מה זה React?

חלק מהיחידה יסודות במסלול ה-React של Coddy. שיעור 1 מתוך 42.

React היא הספרייה הפופולרית ביותר בעולם לבניית ממשקי משתמש. Facebook, Netflix, Airbnb: החלקים האינטראקטיביים באינטרנט שבהם משתמשים מדי יום נבנו באמצעותה.

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

רכיב הוא לא דבר מפחיד: הוא פונקציית JavaScript שמחזירה את מה שאמור להופיע על המסך:

function App() {
    return <h1>Hello, React!</h1>;
}

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

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

אתגר

מתחילים

הנה רכיב React הראשון שלך, שכבר נכתב עבורך.

מה לעשות:

קרא את App.jsx: זו פונקציה שמחזירה JSX.
לחץ על הכפתור Run.
צפה בתצוגה המקדימה מימין מציגה את מה שהרכיב החזיר.

זו כל לולאת React: רכיב מחזיר JSX, ו-React מציג אותו על המסך. החל מהשיעור הבא, תכתוב את ה-JSX בעצמך.

נסו בעצמכם

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>