React היא אחת מספריות JavaScript הפופולריות ביותר לבניית ממשקי משתמש.

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

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

בתור התחלה, כך תוכלו להתקין את React.

מה זה JSX?

הדבר הראשון שתבין לאחר התקנת פרויקט ה- React הראשון שלך הוא ש פונקציית JavaScript מחזירה קוד HTML כלשהו:

function App() { return ( 
 Edit src/App.js and save to reload. 
 ); }

זוהי סיומת תחביר מיוחדת ותקינה עבור React אשר נקראת JSX (JavaScript XML). בדרך כלל בפרויקטים הקשורים לחזית, אנו שומרים קוד HTML, CSS ו- JavaScript בקבצים נפרדים. עם זאת ב- React זה עובד קצת אחרת.

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

בהתחלה, JSX עשוי להיראות קצת מוזר. אבל אל דאגה, תתרגל לזה.

JSX מאוד מעשי, מכיוון שנוכל לבצע גם כל קוד JavaScript (לוגיקה, פונקציות, משתנים וכן הלאה) בתוך ה- HTML ישירות באמצעות סוגריים מסולסלים {}, כך:

function App() { const text = 'Hello World'; return ( 
 {text} 
 ); }

כמו כן, תוכל להקצות תגי HTML למשתני JavaScript:

const message = 
React is cool!
;

לחלופין, תוכל להחזיר HTML בתוך לוגיקת JavaScript (כגון מקרים אם-אחר):

render() { if(true) { return 
YES
; } else { return 
NO
; } }

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

• תמיד יש לסגור תגי HTML ורכיבים
• תכונות מסוימות כמו "class" הופכות ל- "className" (מכיוון שהמחלקה מתייחסת לשיעורי JavaScript), "tabindex" הופך ל " tabIndex " ויש לכתוב אותה camelCase
• איננו יכולים להחזיר יותר מאלמנט HTML אחד בו זמנית, לכן דאג לעטוף אותם בתג אב:

return ( 
Hello
World
 );

• או כחלופה, תוכלו לעטוף אותם בתגיות ריקות:

return (  
Hello
World
  );

תוכל גם לצפות בהדרכה שלי להגיב למתחילים למידע נוסף:

מה הם רכיבים פונקציונליים ומעמדיים?

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

אם תבקר שוב בקוד הדוגמא בראש הודעה זו, תראה שקוד JSX מוחזר על ידי פונקציה. אבל הפונקציה App () אינה פונקציה רגילה - היא למעשה רכיב. אז מה זה רכיב?

מהו רכיב?

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

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

ל- React שני סוגים של רכיבים: פונקציונלייםושיעור. בואו נסתכל על כל אחד עכשיו בפירוט רב יותר.

רכיבים פונקציונליים

סוג הרכיב הראשון והמומלץ ב- React הוא רכיבים פונקציונליים. רכיב פונקציונלי הוא בעצם פונקציה JavaScript / ES6 המחזירה אלמנט React (JSX). על פי המסמכים הרשמיים של React, הפונקציה שלהלן היא מרכיב פונקציונלי תקף:

function Welcome(props) { return 
Hello, {props.name}
; }

לחלופין, תוכל גם ליצור רכיב פונקציונלי עם הגדרת פונקציית החץ:

const Welcome = (props) => { return 
Hello, {props.name}
; }

פונקציה זו היא רכיב React חוקי מכיוון שהוא מקבל ארגומנט יחיד של "אביזרים" (שמייצג מאפיינים) עם נתונים ומחזיר אלמנט React. - reactjs.org

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

function Welcome(props) { return 
Hello, {props.name}
; } export default Welcome;

לאחר ייבואו, תוכלו להתקשר לרכיב כמו בדוגמה זו:

import Welcome from './Welcome'; function App() { return ( ); }

אז רכיב פונקציונלי בתגובה:

• היא פונקציה JavaScript / ES6
• חייב להחזיר אלמנט תגובה (JSX)
• תמיד מתחיל באות גדולה (כינוס שמות)
• לוקח אביזרים כפרמטר במידת הצורך

מהם רכיבי כיתה?

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

class Welcome extends React.Component { render() { return 
Hello, {this.props.name}
; } }

שונה ממרכיבים פונקציונליים, על רכיבי המחלקה להכיל שיטת render () נוספת להחזרת JSX.

מדוע להשתמש ברכיבי כיתה?

נהגנו להשתמש ברכיבי מחלקה בגלל "מצב". בגרסאות הישנות יותר של React (גרסה <16.8), לא ניתן היה להשתמש במצב בתוך רכיבים פונקציונליים.

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

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

רכיב כיתה:

• הוא מחלקה ES6, יהיה רכיב ברגע שהוא 'מאריך' רכיב תגובה.
• לוקח אבזרים (בבנאי) במידת הצורך
• חייב להיות עיבוד ()שיטה להחזרת JSX

מה הם אביזרים בתגובה?

מושג חשוב נוסף של רכיבים הוא האופן שבו הם מתקשרים. ל- React יש אובייקט מיוחד שנקרא prop (מייצג נכס) בו אנו משתמשים כדי להעביר נתונים מרכיב אחד לאחר.

אבל היזהר - אביזרים רק מעבירים נתונים בזרימה חד כיוונית (רק מרכיבי הורה לילד). לא ניתן עם אביזרים להעביר נתונים מילד להורה, או לרכיבים באותה רמה.

בואו ונבקר שוב בפונקציה App () שלמעלה כדי להעביר נתונים עם אביזרים.

ראשית, עלינו להגדיר אבזר על רכיב הברכה ולהקצות לו ערך:

import Welcome from './Welcome'; function App() { return ( ); }

אביזרים הם ערכים מותאמים אישית והם גם הופכים את הרכיבים לדינמיים יותר. מכיוון שרכיב ה- Welcome הוא הילד כאן, עלינו להגדיר אביזרים על ההורה שלו (App), כדי שנוכל להעביר את הערכים ולקבל את התוצאה פשוט על ידי גישה למאפיין "שם":

function Welcome(props) { return 
Hello, {props.name}
; }

אביזרי תגובה הם באמת שימושיים

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

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

תודה שקראת!