למד React.js על ידי בניית פרויקטים - צור אפליקציית תזכורת ליום הולדת

כאשר אתה לומד מיומנות חדשה, מדריכי וידאו יכולים לקחת אותך רק עד כה. אנשים רבים מסכימים שלכלוך את הידיים על ידי בניית פרויקט זו הדרך.

לכן, בסדרת מאמרים מעשיים אלה, נבנה לא אחת או שתיים, אלא חמש יישומי React קטנים.

יישומים אלה ינועו בין קטן לגודל בינוני ויחייבו אתכם לבנות את כל העניין בעצמכם. כמו שתקודד באמת את האפליקציה ותעבור את מקרי המבחן ותוודא שלמדת כל מיומנות.

מוכן להתחיל?

איך זה יעבוד

מאמר זה שואב השראה רבה מהסרטון של freeCodeCamp עצמו כאן. אבל במקום רק לצפות בסרטון, תצטרך להשלים את הפרויקטים במו ידיך.

במהלך סדרת מיני הבלוגים הזו, תבנה חמישה פרויקטים קטנים. ולכל פרויקט, ישנם כמה כללים בסיסיים:

עליך לקודד היבטים מסוימים (או כולם) של תכונה
אתה צריך לעבור את המבחנים הנתונים לאתגרים
אתה יכול לחפש עזרה חיצונית. אבל הייתי ממליץ להקדיש תחילה קצת זמן לממשק ולהוראות. הסיבה לכך היא שהממשק מתוכנן על פי האופן שבו סביר להניח שתבזבזו את זמנכם כמפתחים בכלים מבוססי מפתח.

רק הערה: codedamn מסובב מופע שרת לכל משתמש, אז כדי להשתמש בכיתה עליכם להירשם / להיכנס.

אם אתה רק רוצה לבדוק את הקוד ולעבד את הפרויקט בעצמך, לא בכיתה, תוכל להציג אותו ב- GitHub. קישרתי ל- GitHub בכל קטע למטה כדי שתוכל לקפוץ לחלק הרלוונטי בקוד.

אז בואו נתחיל עם הפרויקט הראשון. אם אקבל משוב טוב, אמשיך במחקרים ופרויקטים.

כיצד לבנות אפליקציית תזכורות ליום הולדת (פרויקט מס '1)

מכיוון שזהו הפרויקט הראשון שלנו, אני אשמור על המורכבות נמוכה מאוד. בפרויקט זה, נשתמש ב- React כדי להציג רשימה של פריטי נתונים, כלומר ימי הולדת של כמה אנשים.

נתונים אלה יופקו ממקור נתונים סטטי ואמורים לעזור לך להבין כיצד לייבא ולהשתמש / לנקות נתונים בתוך מדינה. נעבוד בתוך כיתה שיצרתי עם הפרויקט שלי Codedamn. אתה יכול להתחיל את הכיתה הזו כאן.

אני ממליץ בחום להשלים כיתות אלו ואחרות ככל שתוכל לבד. אתה יכול (וצריך) להשתמש בפוסט בבלוג זה כמדריך.

הנה מה שתלמד בכיתה זו:

איך נראה פרויקט בסיסי של תגובה
כיצד לטעון נתונים מקובץ JS סטטי
כיצד להשתמש ב- UseState לאחסון נתונים
כיצד לנקות את משתנה המצב ולראות את זה משתקף בממשק המשתמש

מעבדה 1 - מבוא לפרויקט

הנה הקישור למעבדה זו.

אתגר ראשון זה מציג בפניכם את הפרויקט ומבנהו. הקדיש זמן לאיתור כל החלקים הרלוונטיים בחלק זה, וברגע שתסיים, פשוט לחץ על "הפעל בדיקות" כדי לעבור את האתגר הזה. שום דבר לא מפואר כאן :)

מעבדה 2 - כיצד ליצור את מיכל תצוגת יום ההולדת

הנה הקישור למעבדת תרגול זו.

תוכל גם למצוא את קבצי ההתקנה של המעבדה ב- GitHub כאן.

כעת, לאחר שבחנתם כיצד מבנה הפרויקט והקבצים מאורגנים, הגיע הזמן ליצור תצוגות סטטיות.

זכור שתמיד תוכל ליצור תחילה נתונים סטטיים ואז לאכלס אותם עם נתונים דינמיים בהמשך.

זו גישה מאוד נקייה לבניית רכיבים דינמיים, מכיוון שהיא מאפשרת לך להפוך את הרכיב מוכן לפני שתמלא אותו באופן דינמי בנתונים.

במעבדה זו עומדים בפניכם האתגרים הבאים:

בתוך הקובץ App.jsx שלך, צור את היררכיית ה- HTML הבאה:

main > section.container > h3 + List

רמז: הקיצור הנ"ל פירושו שהמבנה שלך צריך להיראות כך:

עליך h3להכיל את הטקסט:

0 birthdays today

הרכיב שלך צריך להיות List.jsxהרכיב המיובא בחלקו העליון.

כדי לעבור את כל המבחנים, הקפד לבצע את הפעולות הבאות:

אלמנט 'h3' אחד צריך להיות קיים בקובץ App.jsx שלך
תג 'h3' שלך אמור להכיל "0 ימי הולדת היום" (ללא הצעות מחיר)
יש להציג את רכיב 'הרשימה' שלך

להלן פיתרון אתגר זה:

import React, { useState } from 'react' import data from './data' import List from './List' function App() { // Edit your return statement here to match the instructions return (   0 birthdays today
    ) } export default App

מעבדה 3 - כיצד לאכלס נתוני רשימה סטטית

הנה הקישור למעבדה זו.

תוכל גם למצוא את קבצי ההתקנה של המעבדה ב- GitHub כאן.

יש לנו את ממשק המשתמש הבסיסי העומד לרשותנו. בואו נאכלס כעת את הנתונים הסטטיים data.jsמהקובץ.

קובץ זה כבר נפתח עבורך בצד ימין של העורך. בדוק קובץ זה וראה כיצד נראים נתוני JSON.

במעבדה זו עליכם לבצע את הדברים הבאים:

בתוך App.jsxהקובץ שלך , עליך להחליף כעת 0 Birthdays Todayב- Birthdays Today. לכן, בהתחלה, זה אמור להראות 5 Birthdays Today. זכור, זה מגיע ממספר האלמנטים בתוך dataהמשתנה שלך המיובאים בחלק העליון.
רמז: אתה יכול להשתמש data.length
העבירו את dataהמשתנה המיובא כאביזר Listלרכיב. צריך לקרוא לאביזר הזהpeople
רֶמֶז:
בשנות ה Listמרכיב, להשתמש בנתונים עבר זה כדי להבהיר בדיוק את שמות האנשים לעת עתה. אתה יכול לעבור mapעל האנשים האלה ולהציג את שמותיהם.

להלן 3 מבחנים שעליך לעבור:

App.jsx שלך אמור להציג כעת "5 ימי הולדת היום" היכן "5" מגיע מאורך הפריטים המיובאים בחלקו העליון
על המסך להציג את שמות כל האנשים ברשימה
עליך להשתמש באביזר "אנשים" ברכיב הרשימה כדי להעביר את הנתונים והוא צריך להציג את השמות

והנה הפתרון לאתגר.

קובץ App.jsx:

import React, { useState } from 'react' import data from './data' import List from './List' function App() { return (   {/* Make change to "0" here */} {data.length} birthdays today
 {/* pass data to list component */}    ) } export default App

קובץ List.jsx:

import React from 'react' // accept props here const List = (props) => { const { people } = props // Map over prop "people" and display only the names in any way you like return people.map((item) => { return {item.name}
 }) } export default List

מעבדה 4 - כיצד להציג את ממשק המשתמש החדש

הנה קישור למעבדה זו

תוכל גם למצוא את קבצי ההתקנה של המעבדה ב- GitHub כאן.

Now that we have the names of people from the static data, let's make the UI a little bit better. You can look through all the CSS in the css files first, and then we will simply start using the CSS classes directly.

In this challenge, you only have to build up from the last challenge and create a UI inside List component.

In this lab, you have to do the following things:

Inside your List.jsx file, iterate over the people prop and display the following HTML structure:

NAME_OF_USER
AGE_OF_USER years

Make sure you replace the placeholders appropriately. Also, CSS classes in React JSX are named className, just a reminder!

Here are 4 tests you have to pass:

Your List component should render the "article" tag as parent
Your List component should render the "img" tag inside "article" tag with the correct src and alt tag
Your List component should render the "div > h4" inside the "article" tag with the name of the person
Your List component should render the "div > p" inside the "article" tag with the age of the person

And here's the solution (List.jsx file):

import React from 'react' // accept props here const List = (props) => { const { people } = props // Map over prop "people" and code the right structure return people.map((person) => { const { id, name, age, image } = person return (  {name}
{age} years
 ) }) } export default List

Lab 5 - How to add a Clear All button

Here's a link to this lab

You can also find the setup files of the lab on GitHub here.

In this final lab, let's now add a “Clear” button which will clear the records and reset it to 0 birthdays. The button is already available for you, you just have to make sure it functions properly.

In this lab, you have to do the following things:

Create a new state variable called people
The initial value of this state variable should be the imported data from the top.
Pass this state variable now in the List component.
When the Clear button is pressed, empty the state variable so that no record is displayed (Hint: set it to an empty array)

And these are the tests you have to pass:

There should be a "Clear All" button on the screen (already done for you)
Initially, all records should be visible
When the "Clear All" button is pressed, it should remove all records from the screen

Here's the App.jsx solution file for this lab:

import React, { useState } from 'react' import data from './data' import List from './List' function App() { // create a state variable here const [people, setPeople] = useState(data) // this should clear all records function clearAllRecords() { setPeople([]) } return (   {people.length} birthdays today
  Clear All   ) } export default App

And you're done! Congrats on completing a small project in React. Way to go :)

Conclusion

I hope you enjoyed this codedamn classroom. You can find many others in the React Mastery learning path on codedamn.

There are a lot of gaps to fill yet, but there's a good chance that it will get you started pretty smoothly if you're new.

Make sure you tell me how your experience was on my Twitter handle, as this will help me frame the next practice classrooms.