מדריך הביניים של React: 3 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:13

להגיב במדריך ביניים

צפה במוצר המוגמר כאן.

מה תלמד?

תיצור רשימת מטלות פשוטה עם React.js ותלמד על החלקים המסובכים יותר של תגובה. תנאים מוקדמים (מומלץ ביותר) משלימים את מדריך תחילת העבודה של react.js. הכרת HTMLA ידע של CSS פקודות מעטפת בסיסיות ידע הגון ב- JavaScript

אספקה

כל התוכנות יכוסו בהדרכה.

תזדקק למחשב עם התוכנה הבאה המותקנת:

• npm/חוט
• IDE התומך ב- js
• דפדפן אינטרנט

שלב 1: מגיב הדרכה בינונית

מתחילים

למה React.js?

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

התקנת תוכנות/חבילות נדרשות

אתה תצטרך:

npm/חוט

איך להתקין:

1. לך והתקן את ה- LTS העדכני ביותר של Node.js
2. אופציונלי: אם אתה מעדיף חוט כמנהל החבילות שלך, התקן חוט על ידי הקלדת חוט powerhell npm install -g חוט
3. פתח את powershell/cmd.exe
4. נווט לספרייה בה תרצה ליצור את הפרויקט שלך
5. הקלד npx create-react-app.

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

שלב 2: שלב 1: תחילת העבודה

כדי להתחיל, מחק את הקבצים הבאים מספריית /src שלך:

• App.test.js
• index.css
• logo.svg
• serviceWorker.js
• setupTests.js

אנחנו לא צריכים את הקבצים האלה.

בואו גם לארגן את מערכת הקבצים שלנו. צור ספריות אלה ב- /src /:

• js
• css

הכנס את App.js לתוך js dir ו- App.css לתוך ה- css dir.

לאחר מכן, בואו לארגן מחדש את התלות.

ב- index.js, הסר את הייבוא של serviceWorker ו- index.css. מחק serviceWorker.register (). נתב מחדש את הנתיבים לאפליקציה.

ב- App.js, הסר את הייבוא של logo.svg מכיוון שאיננו זקוקים לו יותר. ניתוב מחדש של יישומי css. מחק את הפונקציה App () ואת הייצוא לאפליקציה.

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

הוסף את זה לקוד שלך:

pastebin.com/nGXeCpaH

html יכנס בתוך 2 הדיביזות.

בואו נגדיר את האלמנט.

pastebin.com/amjd0jnb

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

בפונקציית העיבוד, החלף את היי ב- {this.state.value}

אנו מעבירים את הערך שעובר מהמדינה שהגדרנו.

אז בואו נבדוק את זה!

בפונקציית העיבוד של האפליקציה, החלף אותה כך:

pastebin.com/aGLX4jVE

הוא אמור להציג ערך: "test".

בוא נראה אם נוכל לבצע מספר משימות!

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

שנה את פונקציית העיבוד של כך:

pastebin.com/05nqsw71

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

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

בואו להוסיף קונסטרוקטור לאלו שלנו.

pastebin.com/9jHAz2AS

במבנה זה, העברנו את taskArray הרחק מפונקציית העיבוד למצב. מחק את taskArray ולולאה בפונקציית העיבוד. שנה את taskArray ב- div ל- this.state.taskArray.

בשלב זה, קוד ה- App.js שלך אמור להיראות כך:

pastebin.com/1iNtUnE6

שלב 3: הוספת דרך להוספה והסרה של אובייקטים

הבה נוסיף דרך להוסיף ולהסיר אובייקטים. בואו לתכנן את זה.

מה אנחנו צריכים?

• דרך למשתמש להוסיף אובייקטים
• מקום לאחסון חפצים
• דרך לאחזר את האובייקטים

במה נשתמש?

• יסוד
• ה- API של localstorage w/ JSON

נתחיל ברכיב הקלט.

מתחת {this.state.taskArray}, הוסף קלט ולחצן לקוד שלך

לְהוֹסִיף

צריכה להיות הזנת טקסט ולחצן הוסף כעת.

זה לא עושה כלום כרגע, אז בואו נוסיף 6 שיטות לשיטת האפליקציה שלנו.

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

נוסיף את 6 השיטות הבאות:

כפתור לחץ ()

inputTyped (evt)

generateTaskArray ()

saveTasks (משימות)

getTasks ()

removeTask (מזהה)

בואו נוסיף גם משתנה זה למצבנו:

קֶלֶט

עלינו גם לאגד את הפונקציות שלנו לכך.

pastebin.com/syx465hD

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

הוסף 2 תכונות לדומה כך:

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

הוסף תכונה onClick להוספה כך:

לְהוֹסִיף

כאשר המשתמש לוחץ על הכפתור, הפונקציה מבוצעת.

כעת, לאחר שחלק ה- html הסתיים, בואו נמשיך בפונקציונליות.

כבר כתבתי מראש את ממשק ה- API של localStorage, אז החלף את הפונקציות saveTasks, getTasks ו- removeTask בזה:

pastebin.com/G02cMPbi

נתחיל בפונקציה inputTyped.

כאשר המשתמש מקליד, עלינו לשנות את הערך הפנימי של הקלט.

בואו נעשה זאת באמצעות הפונקציה setState המסופקת ב- react.

this.setState ({קלט: evt.target.value});

בדרך זו נוכל לקבל את ערך הקלט.

ברגע שזה נעשה, נוכל לעבוד על הפונקציה buttonClick.

עלינו להוסיף משימה לרשימת המשימות. תחילה אנו שולפים את רשימת המשימות מ- localStorage, עורכים אותה ולאחר מכן שומרים אותה. לאחר מכן אנו מתקשרים לשדר מחדש של רשימת המשימות כדי לעדכן אותו.

var taskList = this.getTasks ();

taskList.tasks.push (this.state.input);

this.saveTasks (taskList);

this.generateTaskArray ();

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

עכשיו, בואו נעבוד על הפונקציה generatedTaskArray ().

אנחנו צריכים:

• לקבל משימות
• ליצור מערך של רכיבי משימות
• להעביר את רכיבי המשימה לעיבוד

נוכל לקבל את המשימות ולאחסן אותן במשתנה עם getTasks ()

var משימות = getTasks (). משימות

לאחר מכן עלינו ליצור מערך ולאכלס אותו.

pastebin.com/9gNXvNWe

זה אמור לעבוד עכשיו.

קוד מקור:

github.com/bluninja1234/todo_list_instructables

רעיונות מיותרים:

פונקציית הסרה (פשוט מאוד, הוסף קליק אחד ומחק באמצעות removeTask מאינדקס המפתחות)

CSS (גם פשוט, כתוב משלך או השתמש באתחול)