כיצד לבנות אפליקציית מונה פשוטה ב-React

React היא אחת מספריות JavaScript החזיתיות הפופולריות ביותר. חברות רבות משתמשות ב-React כדי לפתח את ממשקי המשתמש שלהן והיא צברה פופולריות רחבה בקרב מפתחים.

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

תכונות של אפליקציית Counter

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

1. לחצן הגדל ספירה: זה יגדיל את הספירה באחד.
2. לחצן הקטנת ספירה: זה יקטין את הספירה באחד.
3. כפתור אתחול: זה יקבע את הספירה לאפס.

מושגים בסיסיים של React

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

1. רכיבים: רכיבים הם אבני הבניין המרכזיות של יישומי React. הם מכילים קוד עצמאי שניתן לשימוש חוזר. באמצעות רכיבים ניתן לפצל את ממשק המשתמש לחלקים נפרדים. לאחר מכן תוכל לעשות שימוש חוזר בחלקים הללו ולעבוד איתם באופן עצמאי.
2. מדינה: ב-React אתה יכול להשתמש באובייקט כדי לאחסן נתונים המייצגים את המצב של רכיב. זה מאפשר לרכיבים לנהל ולעדכן את הנתונים שלהם. מצבו של רכיב קובע כיצד הוא הופך ומתנהג.
   instagram viewer
3. רכיבים פונקציונליים: הרכיב הפונקציונלי של React הוא פשוט פונקציית JavaScript שמקבלת אביזרים כארגומנט ומחזירה אלמנט React (JSX).
4. אביזרים: אתה יכול להשתמש באביזרים - קיצור של "מאפיינים" - כדי להעביר נתונים מרכיב אב לרכיב צאצא. אביזרים הם אחד החלקים האינטגרליים של React ואתם יכולים השתמש באביזרים לביצוע מספר פעולות ב-React.
5. ווים: React Hooks הם פונקציות מובנות המאפשרים לך לנהל מצב ותכונות React אחרות כמו שיטות מחזור חיים בתוך רכיבים פונקציונליים. הם יכולים גם לעזור לך לכתוב קוד תמציתי וברור. בקרוב תראה איך אתה יכול לנהל את המדינה עם useState() וו.

הקוד המשמש בפרויקט זה זמין ב-a מאגר GitHub והוא בחינם עבורך לשימוש תחת רישיון MIT.

שלב 1: הגדרת הפרויקט

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

npx לִיצוֹר-react-app react-counter-app

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

הפעל את הפקודה הבאה בטרמינל כדי להפעיל את שרת הפיתוח:

npm הַתחָלָה

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

שלב 2: יצירת השלד של יישום הדלפק

פתח את ה src/App.js קובץ ומחק את כל קוד ברירת המחדל שקיים שם. כעת, צור שלד של היישום באמצעות הקוד הבא:

יְבוּא תגובה, { useState } מ"לְהָגִיב";
פוּנקצִיָהאפליקציה() {
const [count, setCount] = useState(0);
לתת incrementCount = () => {
// להוסיף מאוחר יותר
 };
לתת decrementCount = () => {
// להוסיף מאוחר יותר
 };
לתת resetCount = () => {
// להוסיף מאוחר יותר
 }
לַחֲזוֹר (
<divclassName="אפליקציה">
<ע>ספירה: {count}ע>
<divclassName="כפתורים">
div>
div>
);
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

ההצהרה הראשונה מייבאת את useState וו מה לְהָגִיב מודול. השתמש בו כדי ליצור את לספור מצב ואתחל אותו ל-0. אתה יכול לשנות את הערך של לספור משתמש ב setCount פוּנקצִיָה.

אתה תשתמש ב incrementCount, decrementCount, ו resetCount מתפקד מאוחר יותר כדי להגדיל, להקטין ולאפס את הערך של המונה.

ייתכן שתבחין בסוגריים המתולתלים { } המשמשים סביב משתנה הספירה בסימון. זה בעצם מאפשר למנתח JSX לדעת שהוא צריך להתייחס לתוכן בתוך הסוגרים האלה כ-JavaScript.

שלב 3: הוספת הפונקציונליות ליישום המונה

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

<לַחְצָןכותרת={"ירידה"} פעולה={decrementCount} />
<לַחְצָןכותרת={"תוֹסֶפֶת"} פעולה={incrementCount} />
<לַחְצָןכותרת={"אִתחוּל"} פעולה={resetCount} />

כאשר אתה לוחץ על כפתורים אלה, ה decrementCount, incrementCount, ו resetCount פונקציות יפעלו. שימו לב שאתם עוברים את כותרת ו פעולה אביזרים מההורה אפליקציה מרכיב לילד לַחְצָן רְכִיב.

עדכן פונקציות אלה ב- App.js קובץ עם הקוד הבא:

לתת incrementCount = () => {
 setCount (ספירה + 1);
};
לתת decrementCount = () => {
 setCount (ספירה - 1);
};
לתת resetCount = () => {
 setCount (0);
}

ה setCount הפונקציה תעדכן את המצב של לספור.

שים לב שעדיין לא יצרת את רכיב הלחצן. ליצור חדש רכיבים תיקייה ב- src ספרייה ולאחר מכן צור קובץ חדש בשם Button.js. מומלץ לשמור את כל הרכיבים באותה תיקייה.

הוסף את הקוד הבא ב- רכיבים/Button.js קוֹבֶץ:

יְבוּא לְהָגִיב מ"לְהָגִיב";
פוּנקצִיָהלַחְצָן(אביזרים) {
לתת { פעולה, כותרת } = אביזרים;
לַחֲזוֹר<לַחְצָןבלחיצה={פעולה}>{כותרת}לַחְצָן>;
}
יְצוּאבְּרִירַת מֶחדָל לַחְצָן;

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

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

לבסוף, ייבא את רכיב הלחצן בחלק העליון של ה- App.js עמוד באמצעות הקוד הבא:

יְבוּא לַחְצָן מ"./components/Botton";

כך ייראה הקוד הסופי ב- App.js קוֹבֶץ:

יְבוּא תגובה, { useState } מ"לְהָגִיב";
יְבוּא לַחְצָן מ"./components/Button";
פוּנקצִיָהאפליקציה() {
const [count, setCount] = useState(0);
לתת incrementCount = () => {
 setCount (ספירה + 1);
 };
לתת decrementCount = () => {
 setCount (ספירה - 1);
 };
לתת resetCount = () => {
 setCount (0);
 }
לַחֲזוֹר (
<divclassName="אפליקציה">
<ע>ספירה: {count}ע>
<divclassName="כפתורים">
<לַחְצָןכותרת={"ירידה"} פעולה={decrementCount} />
<לַחְצָןכותרת={"תוֹסֶפֶת"} פעולה={incrementCount} />
<לַחְצָןכותרת={"אִתחוּל"} פעולה={resetCount} />
div>
div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

פעל לפי שיטות התגובה המומלצות

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

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