הרכיב הראשון שלכם

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

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

export default function App() {
    return (
        <div>

        </div>
    );
}

כרגע הוא מחזיר <div> ריק, ולכן התצוגה המקדימה ריקה. כל JSX שתכניסו לתוכו יוצג (כותרות, פסקאות, כפתורים, כל דבר):

<h1 id="title">Hello, React!</h1>

שימו לב למאפיין id: הוא פועל בדיוק כמו ב-HTML, והבדיקות שלנו משתמשות במזהים כדי למצוא את הרכיבים שלכם. שני הקבצים האחרים הם התשתית של האפליקציה: index.html מארח את האפליקציה ו-main.jsx מרכיב את App בתוך הדף. הם נעולים. App.jsx הוא המקום שבו אתם עובדים.

אתגר

מתחילים

גרום לאפליקציה שלך לברך את העולם.

בתוך ה־<div> שב־App.jsx, הוסף <h1> עם id="title".
הטקסט שלו חייב להיות בדיוק Hello, React!

נסו בעצמכם

<!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>