ריאקט – קומפוננטה

במאמר הזה נלמד איך יוצרים קומפוננטת ריאקט ראשונה

במאמר הקודם למדנו על מבוא לריאקט והסברנו איך בונים אפליקצית ריאקט בסיסית וסביבת פיתוח ראשונית. כל הקוד שאנו כותבים בשלב זה הוא בתוך תגית script שנמצאת ב-HTML הזה. איפה שיש את ההערה: ALL THE CODE INSIDE HERE.


<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>My first react app</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
 
<body>
    <div id="content"></div>
    <script type="text/babel">
        // ALL THE CODE INSIDE HERE
    </script>
</body>
 
</html>

לא חייבים להעתיק את ה-HTML הזה, להדביק אותו בעורך, לשמור אותו באיזשהו מקום ולרפרש בכל שינוי. אפשר גם להשתמש ב-codepen. ואז פשוט להקליד ישירות בחלק של הג׳אווהסקריפט. אם תכנסו ל-https://codepen.io/barzik/pen/JBWLZB למשל, תוכלו לשנות ישירות באיזור של ה-JS ואז לראות את השינוי בתחתית הדף באופן חי.

סביבת פיתוח ב-codepen
סביבת פיתוח ב-codepen

במאמר הקודם הסברנו על אפליקצית ריאקט שהיא בעצם מגרש המשחקים שעליו הקומפוננטות משחקות. רגע, מה זה קומפוננטות? קומפוננטות הם הלחם והחמאה של פיתוח ג׳אווהסקריפט מודרני. מדובר באבני בניין של ui. למשל, אם יש לנו רשימה ב-HTML, אפשר לומר שגם היא מחולקת לקומפוננטות. בואו ונראה:


<div> // "div" Component
    <ul> // "ul" Component
        <li>First Item</li> // "li" Component
        <li>Second Item</li> // "li" Component
        <li>Third Item</li> // "li" Component
    </ul>
</div>

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

איך קומפוננטה נראית? בדיוק כמו class. כך למשל, אם אני רוצה לעשות קומפוננטת hello world. אני אעשה זאת כך:


<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>My first react app</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
 
<body>
    <div id="content"></div>
    <script type="text/babel">
        class HelloWorld extends React.Component {
            render() {
                return <p>Hello world!</p>
            }
        }
        const target = document.getElementById('content');
        ReactDOM.render(
        <HelloWorld/>,
        target
        );
    </script>
</body>
 
</html>

מה הולך פה? מאוד פשוט. הקומפוננטה ראשית מיוצגת כ-class רגיל שיורש מ- React.Component. השם שלה מאוד מאוד חשוב. מה שיש בה זו הפונקציונליות של הקומפוננטה. במקרה הזה לא הרבה. היא מחזירה JSX של Hello World. פשוט, נכון?


class HelloWorld extends React.Component {
    render() {
        return <p>Hello world!</p>
    }
}

ברגע שהצהרנו כך על קומפוננטה, אנחנו יכולים להפעיל אותה כרצוננו ממש ממש כמו HTML רגיל! כן כן! את התגית <HelloWorld/> אני יכול להכניס ל-ReactDOM.render בדיוק כמו שהכנסתי כל ג׳אנק אחר קודם. זה עד כדי כך פשוט.

See the Pen React first component by Ran Bar-Zik (@barzik) on CodePen.

שחקו עם זה קצת בעצמכם. אם אתם לא מכירים את ה-class, אז אפשר וצריך לחזור על הפרק המתאים במדריך שכתבתי על ES6 classes.

אפשר להכניס כמובן כמה קומפוננטות שרוצים לתוך ה-ReactDOM.render, רק צריך להקפיד שתהיה עטיפה. למה? כי אחרת נקבל שגיאת רינדור. נסו ותהנו. במאמר הבא נדבר על קומפוננטות שמקבלות ארגומנטים ונעשה קצת שמח עם קומפוננטה שהיא יותר מעניינת מ hello world משעמם.

⚠️אם אהבת את המדריכים על ריאקט – יש ספר מקיף ושלם על ריאקט שכתבתי בשם ללמוד ריאקט בעברית, במסגרת פרויקט עם חברות מובילות ומפתחים אחרים. בספר יש פירוט מקיף יותר על ריאקט ותרגילים רבים ללימוד עצמי. 

פוסטים נוספים שכדאי לקרוא

יסודות בתכנות

מספרים בינאריים בקוד

איך, ויותר חשוב למה, משתמשים במספרים בינאריים בתכנות? גם בפייתון ובג׳אווהסקריפט?

עבודה בהיי טק

איך מראיינים סניורים?

השיטה שלי לבדיקת התאמה טכנית למתכנתות ולמתכנתים בכירים עם כמה שנות ניסיון.

ספריות ומודולים

מציאת PII באמצעות למידת מכונה

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

ESP32 מאפס לילדים

מדריך ל-ESP32 לילדים ולהורים מאפס

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

גלילה לראש העמוד