בתור ספריית החזית הפופולרית ביותר, כולם רוצים ללמוד React. ReactJS הוא ביסודו JavaScript. אבל זה לא אומר שאתה חייב ללמוד הכל ב-JavaScript כדי לעבור ל-ReactJS. הבנת המושגים הבסיסיים של JavaScript תעזור לך לתפוס את מושגי React ביתר קלות, ובסופו של דבר היא תאיץ את היכולת שלך לעבוד על פרויקטים.
בואו נתאר מושגים חיוניים שכדאי לדעת על JavaScript לפני המעבר ל-ReactJS.
1. פונקציות חץ
פונקציות החצים נמצאות בשימוש נרחב ב-React. החל מגרסה 16.8, React עברה מרכיבים מבוססי כיתה לרכיבים פונקציונליים. פונקציות חץ מאפשרים לך ליצור פונקציות עם תחביר קצר יותר.
בואו נמחיש זאת בדוגמאות הבאות:
תפקוד קבוע
פוּנקצִיָהבְּרָכָה() {
לַחֲזוֹר'שלום'
}
לְנַחֵם.log (greeting()) //helloפונקציית חץ
לתת ברכה = () =>'שלום'
לְנַחֵם.log (greeting()) //helloלשתי הפונקציות למעלה יש פלט זהה, אם כי התחביר שונה. פונקציית החץ נראית קצרה ונקייה יותר מהפונקציה הרגילה. בדרך כלל, לרכיבי React יש את המבנה הבא:
יְבוּא לְהָגִיב מ'לְהָגִיב'const ספר = () => {
לַחֲזוֹר (
ספר</div>)
}
יְצוּאבְּרִירַת מֶחדָל סֵפֶר
לפונקציות חץ אין שמות. אם אתה רוצה לתת לו שם, הקצה אותו למשתנה. ההבדל בין פונקציית חץ רגילה הוא יותר מסתם התחביר. למידע נוסף על פונקציות חצים ב מוזילה תיעוד של מפתחים.
2. הרס מבנה
ביטול המבנה משמש להשגת נתונים ממבני נתונים מורכבים. ב-JavaScript, מערכים ואובייקטים יכולים לאחסן ערכים רבים. אתה יכול לתפעל את הערכים ולהשתמש בהם בחלקים שונים של היישום.
כדי לקבל את הערכים האלה, עליך לפרק את המבנה של המשתנה. בהתאם למבנה הנתונים איתו אתה מתמודד, אתה יכול להשתמש בסימון הנקודה (.) או בסימון הסוגריים. לדוגמה:
const תלמיד = {'שֵׁם': 'מרי',
'כתובת': "סאות' פארק, בית לחם",
'גיל': 15
}
הרס מבנה:
לְנַחֵם.log (תלמיד.שם) // פלט מריבדוגמה שלמעלה, סימון הנקודה ניגש לערך של המפתח 'שם'. ב-ReactJS, תשתמש במושג ההרס כדי להשיג ולשתף ערכים באפליקציה שלך. הסרת המבנה עוזרת להימנע מחזרות והופך את הקוד שלך לקריא יותר.
3. שיטות מערך
אתה תיתקל במערכים מספר פעמים תוך כדי עבודה על פרויקטים של React. מערך הוא אוסף של נתונים. אתה מאחסן נתונים במערכים, כך שתוכל לעשות בהם שימוש חוזר בעת הצורך.
שיטות מערך משמשות בעיקר כדי לתפעל, לאחזר ולהציג נתונים. כמה שיטות מערך נפוצות הן מַפָּה(), לְסַנֵן(), ו לְהַפחִית(). אתה חייב להכיר את שיטות מערך כדי להבין מתי ליישם כל אחד.
לדוגמה, ה מַפָּה() השיטה חוזרת על כל הפריטים במערך. הוא פועל על כל אלמנט של המערך כדי ליצור מערך חדש.
const מספרים = [9, 16, 25, 36];
const squaredArr = numbers.map(מתמטיקה.sqrt) // 3,4,5,6
אתה תשתמש הרבה בשיטות מערך ב-ReactJS. אתה תשתמש בהם כדי להמיר מערכים למחרוזות, להצטרף, להוסיף פריטים ולהסיר פריטים ממערכים אחרים.
4. תנאים קצרים
תנאים הם הצהרות ש-JavaScript משתמש בהן כדי לקבל החלטות בקוד. התניות קצרות כוללות && (ו), II (או), וה-Ternary Operator. אלו הם ביטויים קצרים יותר של תנאים והצהרות אם/אחר.
הדוגמה הבאה מראה כיצד להשתמש באופרטור טרינרי.
קוד עם הצהרת if/else:
פוּנקצִיָהשעת פתיחה(יְוֹם) {
אם (יום == יום ראשון) {
לַחֲזוֹר12;
}
אַחֵר {
לַחֲזוֹר9;
}
}קוד עם מפעיל טרנרי:
פוּנקצִיָהשעת פתיחה(יְוֹם) {
לַחֲזוֹר יום == יום ראשון? 12: 9;
}ללמוד על סוגים שונים של תנאים עם התמקדות מיוחדת בתנאים קצרים. אלה נמצאים בשימוש נרחב ב-React.
5. תבנית מילולית
ליטרלים של תבנית משתמשים בסימון אחורי (``) כדי להגדיר מחרוזת. מילולי תבנית מאפשרים לך לתפעל את נתוני המחרוזת ולהפוך אותם לדינמיים יותר. מילות תבנית מתויגות מאפשרות לך לבצע פעולות בתוך מחרוזת. אלו הם ביטויים קצרים יותר של תנאים והצהרות אם/אחר.
לדוגמה:
לתת שם פרטי = "ג'יין";לתת שם משפחה = "צְבִיָה";
לתת טקסט = `ברוך הבא ${firstName}, ${lastName}!`; // ברוכה הבאה ג'יין דו!
6. מפעילי התפשטות
האופרטור Spread (...) מעתיק את הערכים של אובייקט או מערך לתוך אחר. התחביר שלו מורכב משלוש נקודות ואחריהן שם המשתנה. למשל (...שם). הוא ממזג את המאפיינים של שני מערכים או אובייקטים.
הדוגמה הבאה מראה כיצד להשתמש באופרטור התפשטות כדי להעתיק את הערכים של משתנה אחד למשנהו.
const שמות = ['מרי', 'ג'יין'];
const groupMembers = ['פרד', ...שמות, 'אנג'לה']; // ["פרד", "מרי", "ג'יין", "אנג'לה"]
אתה יכול להשתמש באופרטור ההפצה כדי לבצע מספר פעולות. אלה כוללים העתקת תוכן של מערך, הוספת מערך למערך אחר, גישה למערכים מקוננים והעברת מערכים כארגומנטים. אתה יכול להשתמש באופרטור ההפצה ב-ReactJS כדי לטפל בשינויי המצב ברכיבים.
למה ללמוד ReactJS?
ReactJS פופולרי מסיבה טובה. יש לו עקומת למידה קצרה, אמין ומוצג במהירות ל-DOM. הוא תומך ברכיבים עצמאיים ויש לו כלי ניפוי באגים מעולים.
ReactJS משלבת מושגי JavaScript חדשים מ-ECMAScript 6 (ES6). לימוד מושגים בסיסיים ב-JavaScript יקל על פיתוח פרויקטים ב-ReactJS.
לראש הכול, ל-ReactJS יש קהילה נהדרת שמשחררת כל הזמן עדכונים חדשים. אם אתה רוצה ללמוד ספריית JavaScript, ReactJS תהיה בחירה מצוינת. המסגרת של Next.js משלימה את המגבלות של ReactJS. שילוב של השניים הופך את ReactJS לספריית חזית חזקה.
