בשיעור זה נכיר את ה React Playground ונכתוב קומפוננטה ראשונה בריאקט.

1. פרויקט ריאקט ראשון אונליין

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

https://reactplayground.vercel.app/

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

import React, { useRef, useState } from 'react'
import Confetti from 'js-confetti'
import './style.css'

const confetti = new Confetti()

const App = () => {
  const [count, setCount] = useState(0)

  const handleClick = () => {
    confetti.addConfetti()
    setCount(c => c + 1)
  }

  return (
    <button className="btn" onClick={handleClick}>
      <span role="img" aria-label="react-emoji">⚛️</span> {count}
    </button>
  )
}


export default App

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

import React from "react";

function ouch() {
  alert('Ouch!');
}

const App = () => {
  return (
    <div className="container">
      <h1>Hello React World</h1>
      <p>Meanwhile just HTML and JS, no style</p>
      <button onClick={ouch}>Click Me</button>
    </div>
  );
};

export default App;

2. מבנה קובץ קומפוננטה

כבר מהשורות הראשונות של הקובץ ברור לנו שמשהו כאן מוזר: זה HTML? זה JavaScript? ומה זה הסיומת jsx? תוכנית ריאקט כוללת קבצי קומפוננטות שהם קבצים עם הסיומת המיוחדת JSX או TSX, הסיומת הראשונה עבור JavaScript והשניה עבור TypeScript. אלה לא קבצים שאני יכול להריץ כמו שהם בדפדפן, כלומר לפני שאפשר לראות את התוצאה של קובץ JSX על המסך צריך לרוץ תהליך שהופך אותו לקובץ JavaScript רגיל שדפדפן יכול להריץ. במהלך הקורס נדבר גם על תהליך זה. קובץ JSX או TSX מכיל גם קוד רגיל, וגם תגיות שנראות כמו HTML אבל לא בדיוק. בואו נסקור את ההבדלים המרכזיים מ HTML בקובץ הדוגמה:

1. המאפיין שב HTML היינו כותבים class נקרא כעת className (שימו לב ב div הראשי).

2. לאלמנט הכפתור יש מאפיין onClick. נכון היה כזה גם ב HTML אבל לא השתמשנו בו שם. אני מזכיר שבאפליקציית ווב רגילה היינו כותבים מתוך JavaScript פקודת addEventListener. מה שעוד מעניין הוא שהערך של אותו onClick כתוב בתוך סוגריים מסולסלים.

3. אנחנו מתחילים את התוכנית בפקודת import React from 'react' אבל לא משתמשים באוביקט בשם React בשום מקום בקוד.

במהלך הקורס נפגוש עוד מספר הבדלים בין הקוד שאנחנו כותבים בתוך תגיות ה JSX לבין HTML. בינתיים נמשיך להתבונן במאפיינים נוספים של הקובץ:

1. קובץ הקומפוננטה מסתיים בפקודת export default App. רוב הזמן נרצה לייצא מקובץ קומפוננטה בודדת ונכתוב כל קומפוננטה בקובץ נפרד, למרות שריאקט לא מחייבת זאת.

2. בדוגמה שלנו קומפוננטה היא פונקציה שלא מקבלת פרמטרים ומחזירה בלוק JSX. הבלוק תמיד מכיל תגית ראשית אחת, בדוגמה שלנו זה ה div. בריאקט יש מספר דרכים לכתוב קומפוננטות אבל פונקציות הן הדרך המרכזית.

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

3. עדכון קוד ה HTML

בשביל המשחק נעדכן את הקומפוננטה כדי להראות תוכן שונה בצד ימין. אני מוסיף בין ה h1 ל p את הקוד הבא:

<h2>Reasons To Learn React</h2>
<ul>
  <li>It's interesting!</li>
  <li>It's popular</li>
  <li>We can create great apps</li>
</ul>

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

4. עכשיו אתם

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