הקומפוננטה הראשונה שלכם

רכיבים: אבני הבניין של ממשק המשתמש

באינטרנט, HTML מאפשר לנו ליצור מסמכים מובנים עשירים עם ערכת התגים המובנית שלו כמו <h1> ו-<li>:

<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

סימון זה מייצג את המאמר <article>, את הכותרת שלו <h1>, ותוכן עניינים (מקוצר) כרשימה מסודרת <ol>. סימון כזה, בשילוב עם CSS עבור סגנון, ו-JavaScript עבור אינטראקטיביות, נמצא מאחורי כל סרגל צד, דמות, מודאל, תפריט נפתח - כל פיסת ממשק משתמש שאתה רואה באינטרנט.

React מאפשר לך לשלב את הסימון שלך, CSS ו-JavaScript ל”רכיבים” מותאמים אישית, רכיבי ממשק משתמש ניתנים לשימוש חוזר עבור האפליקציה שלך. ניתן להפוך את קוד תוכן העניינים שראית למעלה לרכיב <TableOfContents /> שתוכל לעבד בכל דף. מתחת למכסה המנוע, זה עדיין use אותם תגיות HTML כמו <article>, <h1> וכו’.

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

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

ככל שהפרויקט שלך יגדל, אתה תבחין שניתן להרכיב רבים מהעיצובים שלך על ידי שימוש חוזר ברכיבים שכבר כתבת, לזרז את הפיתוח שלך. ניתן להוסיף את תוכן העניינים שלנו לעיל לכל מסך עם <TableOfContents />! אתה יכול אפילו להזניק את הפרויקט שלך עם אלפי הרכיבים המשותפים לקהילת הקוד הפתוח React כמו Chakra UI ו-Material UI.

הגדרת רכיב

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

והנה איך לבנות רכיב:

שלב 1: ייצא את הרכיב

הקידומת export default היא תחביר JavaScript סטנדרטי (לא ספציפית לReact). היא מאפשרת לסמן את הפונקציה הראשית בקובץ, כך שתוכל לייבא אותה מאוחר יותר מקבצים אחרים. (עוד על ייבוא ​​ב-ייבוא ​​וייצוא רכיבים-ו-ייצוא!

שלב 2: הגדר את הפונקציה

עם function Profile() { } אתה מגדיר פונקציה JavaScript עם השם Profile.

שלב 3: הוסף סימון

הרכיב מחזיר תג <img /> עם תכונות src וalt. <img /> כתוב כמו HTML, אבל הוא למעשה JavaScript מתחת למכסה המנוע! תחביר זה נקרא JSX, והוא מאפשר להטמיע סימון בתוך JavaScript.

ניתן לכתוב statements להחזרה כולם בשורה אחת, כמו ברכיב זה:

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

אבל אם הסימון שלך לא נמצא באותה שורה כמו מילת המפתח return, עליך לעטוף אותה בזוג סוגריים:

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

שימוש ברכיב

כעת לאחר שהגדרת את רכיב Profile שלך, אתה יכול לקנן אותו בתוך רכיבים אחרים. לדוגמה, אתה יכול לייצא רכיב Gallery שuse של רכיבי Profile מרובים:

מה הדפדפן רואה

שימו לב להבדל במארז:

• <section> הוא אותיות קטנות, אז React יודע שאנחנו מתייחסים לתג HTML.
• <Profile /> מתחיל באות גדולה P, אז React יודע שאנחנו רוצים use הרכיב שלנו שנקרא Profile.

ו-Profile מכיל אפילו יותר HTML: <img />. בסופו של דבר, זה מה שהדפדפן רואה:

<section>
  <h1>Amazing scientists</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

קינון וארגון רכיבים

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

Because רכיבי Profile מוצגים בתוך Gallery - אפילו כמה פעמים! - אנו יכולים לומר שGallery הוא רכיב אב, המציג כל Profile כ”ילד”. זה חלק מהקסם של React: אתה יכול להגדיר רכיב פעם אחת, ואז use אותו בכמה מקומות וכמה פעמים שתרצה.

export default function Gallery() {
  // 🔴 Never define a component inside another component!
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ Declare components at the top level
function Profile() {
  // ...
}