במאמר הקודם למדנו על מבוא לריאקט והסברנו איך בונים אפליקצית ריאקט בסיסית וסביבת פיתוח ראשונית. כל הקוד שאנו כותבים בשלב זה הוא בתוך תגית 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 ואז לראות את השינוי בתחתית הדף באופן חי.
במאמר הקודם הסברנו על אפליקצית ריאקט שהיא בעצם מגרש המשחקים שעליו הקומפוננטות משחקות. רגע, מה זה קומפוננטות? קומפוננטות הם הלחם והחמאה של פיתוח ג׳אווהסקריפט מודרני. מדובר באבני בניין של 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 משעמם.
⚠️אם אהבת את המדריכים על ריאקט – יש ספר מקיף ושלם על ריאקט שכתבתי בשם ללמוד ריאקט בעברית, במסגרת פרויקט עם חברות מובילות ומפתחים אחרים. בספר יש פירוט מקיף יותר על ריאקט ותרגילים רבים ללימוד עצמי.
