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

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

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

תנאים מוקדמים ליצירת רשימת מטלות

לפני שתתחיל בפרויקט זה, ישנן מספר דרישות. עליך להיות בעל הבנה בסיסית בדברים הבאים, HTML, CSS, JavaScript, ES6, ו-React. אתה צריך להיות בעל Node.js ו npm, מנהל החבילות של JavaScript. אתה צריך גם עורך קוד, כמו Visual Studio Code.

הנה ה-CSS שבו ישתמש הפרויקט הזה:

/* styles.css */
.אפליקציה {
משפחת גופן: פונט סאנס סריף;
לְהַצִיג: לְהַגמִישׁ;
להצדיק-תוכן: מֶרְכָּז;
align-items: מֶרְכָּז;
גוֹבַה: 100vh;
}
.לעשות {
צבע רקע: חיטה;
יישור טקסט: מֶרְכָּז;
רוֹחַב: 50%;
ריפוד: 20פיקסלים;
צל קופסא: rgba(0, 0, 0, 0.24) 0פיקסלים 3פיקסלים 8פיקסלים;
שולים: אוטומטי;
}


ul {
סוג רשימה: אף אחד;
ריפוד: 10פיקסלים;
שולים: 0;
}


לַחְצָן {
רוֹחַב: 70פיקסלים;
גוֹבַה: 35פיקסלים;
צבע רקע: חום חול;
גבול: 





instagram viewer

אף אחד;
גודל גופן: 15פיקסלים;
משקל גופן: 800;
גבול-רדיוס: 4פיקסלים;
צל קופסא: rgba(0, 0, 0, 0.24) 0פיקסלים 3פיקסלים 8פיקסלים;
}


.קֶלֶט {
גבול: אף אחד;
רוֹחַב: 340פיקסלים;
גוֹבַה: 35פיקסלים;
גבול-רדיוס: 9פיקסלים;
יישור טקסט: מֶרְכָּז;
צל קופסא: rgba(0, 0, 0, 0.24) 0פיקסלים 3פיקסלים 8פיקסלים;
}


.חלק עליון {
לְהַצִיג: לְהַגמִישׁ;
להצדיק-תוכן: מֶרְכָּז;
פער: 12פיקסלים;
}


לי {
לְהַצִיג: לְהַגמִישׁ;
להצדיק-תוכן: שטח באופן שווה;
align-items: מֶרְכָּז;
ריפוד: 10פיקסלים;
}
לי:לפני {
תוֹכֶן: "*";
שוליים-ימין: 5פיקסלים;
}

1. הגדר סביבת פרויקט

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

npx create-react-app todo-list

זה לוקח כמה דקות להתקין את כל הקבצים הדרושים והחבילות גם כן. זה יוצר אפליקציית React חדשה בשם todo-list. ברגע שאתה רואה משהו כזה אתה בדרך הנכונה:

נווט אל הספרייה של הפרויקט החדש שלך באמצעות פקודה זו:

רשימת מטלות CD

הפעל את הפרויקט שלך באופן מקומי עם הפקודה הזו:

התחלה של npm

ולאחר מכן הצג את הפרויקט בדפדפן שלך ב- http://localhost: 3000/.

בתיקיית src של הפרויקט שלך, ישנם כמה קבצים שאינך צריך. מחק את הקבצים האלה: App.css, App.test.js, logo.svg, reportWebVitals.js, setupTests.js.

ודא שאתה מחפש הצהרות ייבוא ​​בקבצים הזמינים והסר כל הפניות לקבצים שנמחקו.

2. צור רכיב TodoList

זה הרכיב בו ניישם את כל הקודים הדרושים לרשימת המטלות. צור קובץ בשם "TodoList.js" בתיקיית ה-src שלך. ואז כדי לבדוק שהכל עובד כמו שצריך, הוסף את הקוד הבא:

יְבוּא לְהָגִיב מ'לְהָגִיב';
const TodoList = () => {
לַחֲזוֹר (




שלום עולם </h2>
 </div>
 );
};


יְצוּאבְּרִירַת מֶחדָל רשימת מטלות;

פתח את קובץ App.js שלך, ייבא את רכיב TodoList ועבד אותו בתוך רכיב האפליקציה. זה ייראה בערך כך:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא'./styles.css'
יְבוּא רשימת מטלות מ'./רשימת מטלות';
const אפליקציה = () => {
לַחֲזוֹר (





 </div>
 );
};
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

עבור לדפדפן המקומי שלך שבו פועל ה-localhost: 3000 ובדוק לראות את "Hello World" כתוב באומץ. הכל טוב? לשלב הבא.

3. טפל בשינוי קלט וקלט

שלב זה מאפשר לך להפעיל אירוע בעת הקלדת משימה בתיבת הקלט. ייבא את ה-useState הוק מחבילת React שלך. useState הוא React hook המאפשר לך לנהל מצב ביעילות.

יְבוּא תגובה, { useState } מ'לְהָגִיב';

השתמש ב-useState hook כדי ליצור משתנה מצב בשם "inputTask" עם ערך התחלתי של מחרוזת ריקה. בנוסף, הקצה את הפונקציה "setInputTask" לעדכון הערך של "inputTask" בהתבסס על קלט המשתמש.

const [inputTask, setInputTask] = useState("");

צור פונקציה בשם "handleInputChange", תוך שימוש בפרמטר אירוע. זה אמור לעדכן את מצב inputTask באמצעות הפונקציה setInputTask. גש לערך של יעד האירוע באמצעות event.target.value. זה יפעל בכל פעם שהערך של שדה הקלט משתנה.

const handleInputChange = (מִקרֶה) => {
 setInputTask (event.target.value);
};

החזר כמה רכיבי JSX. הראשונה היא הכותרת שקוראת "רשימת המשימות שלי", אתה יכול להחליט על כל כותרת שתרצה. כלול כמה תכונות לרכיבי הקלט שלך. type="טקסט": זה מציין את סוג הקלט שלך כטקסט, value={inputTask}: פעולה זו קושרת את הערך של שדה הקלט למשתנה המצב inputTask, ומבטיחה שהוא משקף את הערך הנוכחי.onChange={handleInputChange}: זה קורא לפונקציה handleInputChange כאשר הערך של שדה הקלט משתנה, מעדכן את מצב inputTask.

"לעשות">
רשימת המטלות שלי</h1>
"חלק עליון">
"קֶלֶט" סוג="טֶקסט" value={inputTask}
 onChange={handleInputChange} מציין מיקום="הזן משימה" />

ממשיכים הלאה, צור כפתור שיוסיף את המשימה שהוקלטה לרשימה.

בשלב זה, כך ייראה פלט הדפדפן שלך.

4. הוסף פונקציונליות ללחצן "הוסף".

להשתמש ב useState hook ליצירת משתנה מצב בשם 'רשימה' עם ערך התחלתי של מערך ריק. המשתנה 'setList' מאחסן את מערך המשימות על סמך קלט המשתמש.

const [list, setList] = useState([]);

צור פונקציה handleAddTodo שתפעל כאשר המשתמש ילחץ על כפתור "הוסף" כדי להוסיף משימה חדשה. זה לוקח את הפרמטר todo, המייצג את המשימה החדשה שהזין המשתמש. לאחר מכן, צור אובייקט newTask עם מזהה ייחודי שנוצר באמצעות Math.random(), והמאפיין todo שמחזיק את טקסט הקלט.

ממשיכים הלאה, עדכן את מצב הרשימה על ידי שימוש באופרטור התפשטות [...רשימה] כדי ליצור מערך חדש עם המשימות הקיימות ברשימה. הוסף את newTask לסוף המערך. זה מבטיח שלא נשנה את מערך המצב המקורי. לבסוף, אפס את מצב inputTask למחרוזת ריקה, נקה את שדה הקלט כאשר המשתמש לוחץ על הכפתור.

const handleAddTodo = (לעשות) => {
const newTask = {
 תְעוּדַת זֶהוּת: מתמטיקה.אַקרַאִי(),
 todo: todo
 };
 setList([...list, newTask]);
 setInputTask('');
};

כלול את בלחיצה ייחוס לרכיב הכפתור עם הטקסט "ADD". כאשר לוחצים עליו, הוא מפעיל את handleAddTodo פונקציה, אשר מוסיפה משימה חדשה למצב הרשימה

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

5. הוסף לחצן מחק

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

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

const handleDeleteTodo = (תְעוּדַת זֶהוּת) => {
const newList = list.filter((לעשות) =>
 todo.id !== id
 );
 setList (NewList); 
};

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

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

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

    <ul>
    { list.map((לעשות) => (
    <ליclassName="מְשִׁימָה"מַפְתֵחַ={todo.id}>
     {todo.todo}
    <לַחְצָןבלחיצה={() => handleDeleteTodo (todo.id)}>מחקלַחְצָן>
    לי>
    ))}
    ul>

    כך אמור להיראות הקוד הסופי שלך:

    יְבוּא תגובה, { useState } מ'לְהָגִיב';
    const TodoList = () => {
    const [inputTask, setInputTask] = useState('');
    const [רשימה, setList] = useState([]);
    

    const handleAddTodo = () => {
    const newTask = {
     תְעוּדַת זֶהוּת: מתמטיקה.אַקרַאִי(),
     Todo: inputTask
     };
    

     setList([...רשימה, משימה חדשה]);
     setInputTask('');
     };
    

    const handleDeleteTodo = (תְעוּדַת זֶהוּת) => {
    const newList = list.filter((לעשות) => todo.id !== id);
     setList (NewList);
     };
    

    const handleInputChange = (מִקרֶה) => {
    setInputTask(מִקרֶה.יַעַד.ערך);
     };
    

    לַחֲזוֹר (
    <divclassName="לעשות">
    

    שלי ל-לַעֲשׂוֹתרשימה

    

    <divclassName="חלק עליון">
    <קֶלֶטclassName="קֶלֶט"סוּג="טֶקסט"ערך={inputTask}
     onChange={handleInputChange} מציין מיקום="הזן משימה" />
    

    <לַחְצָןclassName="btn"בלחיצה={handleAddTodo}>לְהוֹסִיףלַחְצָן>
    div>
    

    <ul>
     { list.map((לעשות) => (
    <ליclassName="מְשִׁימָה"מַפְתֵחַ={todo.id}>
     {todo.todo}
    <לַחְצָןבלחיצה={() => handleDeleteTodo (todo.id)}>
    לִמְחוֹק
    לַחְצָן>
    לי>
     ))}
    ul>
    div>
     );
    };
    יְצוּאבְּרִירַת מֶחדָל רשימת מטלות;

    כך יהיה הפלט הסופי שלך, כאשר גם כפתורי ההוספה וגם כפתורי המחיקה יתפקדו כמצופה.

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

    השתמש בפרויקטים בעולם האמיתי כדי ללמוד React

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