6.1 הקדמה לריאקט ו JSX הרצאה

מה זה ריאקט - React

ריאקט (React) היא ספריית JavaScript לבניית ממשקי משתמש. היא פותחה על ידי פייסבוק (מטא) ב-2013 והיא כיום הספרייה הפופולרית ביותר לפיתוח פרונטאנד.

• ריאקט היא ספרייה (library) ולא framework - היא מתמקדת רק ב-UI ולא כוללת ניתוב, ניהול סטייט גלובלי וכו׳
• ריאקט עובדת על עיקרון של קומפוננטות - פיצול ה-UI לחלקים קטנים ועצמאיים שאפשר לשלב ביחד
• ריאקט משתמשת ב-Virtual DOM - היא מחשבת מה השתנה ומעדכנת רק את מה שצריך, במקום לרנדר מחדש את כל הדף
• ריאקט היא declarative - אנחנו מתארים איך ה-UI צריך להיראות, וריאקט דואגת לעדכון ה-DOM

למה ריאקט

בפיתוח פרונטאנד מודרני, אנחנו בונים אפליקציות עשירות עם הרבה אינטראקטיביות. ניהול ה-DOM ידנית עם vanilla JS הופך מהר למסובך ומועד לבאגים:

// vanilla JS - manually managing the DOM
const button = document.createElement("button");
button.textContent = "Likes: 0";
let count = 0;
button.addEventListener("click", () => {
    count++;
    button.textContent = `Likes: ${count}`;
});
document.body.appendChild(button);

// React - declarative approach
function LikeButton() {
    const [count, setCount] = useState(0);

    return <button onClick={() => setCount(count + 1)}>Likes: {count}</button>;
}

בריאקט אנחנו מתארים מה ה-UI צריך להציג, ולא איך לעדכן אותו. ריאקט דואגת לסנכרון בין הסטייט ל-DOM.

אפליקציית עמוד יחיד - SPA

ריאקט בונה SPA - Single Page Application. במקום שהשרת שולח דף HTML חדש בכל ניווט, נטען דף HTML אחד ו-JavaScript מעדכנת את התוכן דינמית.

• הדפדפן טוען את האפליקציה פעם אחת
• ניווט בין דפים קורה בצד הלקוח (client-side routing) - בלי בקשה חדשה לשרת
• נתונים מגיעים מהשרת דרך בקשות API (fetch)
• התוצאה - חוויית משתמש מהירה וחלקה, דומה לאפליקציה נייטיב

הקמת פרויקט עם Vite

הכלי המומלץ ליצירת פרויקט ריאקט חדש הוא Vite (נקרא "ויט", מילה צרפתית ל"מהיר"):

# create a new React project with TypeScript
npm create vite@latest my-app -- --template react-ts

# enter the project directory
cd my-app

# install dependencies
npm install

# start the development server
npm run dev

Vite מספקת:

• שרת פיתוח מהיר עם Hot Module Replacement (שינויים נראים מיד בדפדפן)
• קומפילציה של טייפסקריפט אוטומטית
• בנייה (build) מותאמת לפרודקשן

מבנה הפרויקט

my-app/
  ├── node_modules/
  ├── public/          # static files (favicon, etc.)
  ├── src/
  │   ├── App.tsx      # the root component
  │   ├── main.tsx     # entry point - renders App into the DOM
  │   ├── App.css
  │   └── index.css
  ├── index.html       # the single HTML page
  ├── package.json
  ├── tsconfig.json
  └── vite.config.ts

נקודת הכניסה היא main.tsx:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

הקוד הזה מוצא את האלמנט עם id="root" ב-HTML ומרנדר לתוכו את הקומפוננטה App.

מה זה JSX

JSX (JavaScript XML) הוא תחביר שמאפשר לכתוב HTML בתוך JavaScript. זה נראה כמו HTML, אבל זה בעצם JavaScript:

// this looks like HTML, but it's JSX
const element = <h1>Hello, World!</h1>;

מאחורי הקלעים, JSX מומר לקריאות JavaScript:

// JSX
const element = <h1>Hello, World!</h1>;

// what it compiles to (you don't write this)
const element = React.createElement("h1", null, "Hello, World!");

בטייפסקריפט, קבצים שמכילים JSX חייבים להיות עם סיומת .tsx (לא .ts).

ביטויים בתוך JSX - סוגריים מסולסלים

אפשר להכניס כל ביטוי JavaScript בתוך JSX על ידי עטיפה בסוגריים מסולסלים {}:

function Greeting() {
    const name = "Alice";
    const age = 30;

    return (
        <div>
            <h1>Hello, {name}!</h1>
            <p>You are {age} years old.</p>
            <p>Next year you will be {age + 1}.</p>
            <p>Your name in uppercase: {name.toUpperCase()}</p>
        </div>
    );
}

אפשר לשים בתוך {} כל ביטוי שמחזיר ערך - משתנים, חישובים, קריאות לפונקציות, ternary. אי אפשר לשים statements כמו if/for/while.

function Example() {
    const items = ["apple", "banana", "cherry"];

    return (
        <div>
            {/* expression - OK */}
            <p>{2 + 2}</p>
            <p>{items.length > 0 ? "Has items" : "Empty"}</p>
            <p>{items.join(", ")}</p>

            {/* statement - NOT allowed inside JSX */}
            {/* <p>{if (true) { "yes" }}</p>  ERROR! */}
        </div>
    );
}

הבדלים בין JSX ל-HTML

JSX דומה ל-HTML אבל יש כמה הבדלים חשובים:

className במקום class

המילה class שמורה ב-JavaScript, אז ב-JSX משתמשים ב-className:

// HTML
// <div class="container">...</div>

// JSX
<div className="container">...</div>

htmlFor במקום for

גם for שמורה ב-JavaScript:

// HTML
// <label for="email">Email:</label>

// JSX
<label htmlFor="email">Email:</label>

camelCase לאטריביוטים

אטריביוטים שב-HTML כתובים עם מקף, ב-JSX כתובים ב-camelCase:

// HTML: onclick, tabindex, maxlength
// JSX:
<button onClick={handleClick} tabIndex={0}>Click</button>
<input maxLength={50} />

style כאובייקט

ב-JSX, style מקבל אובייקט JavaScript ולא מחרוזת:

// HTML
// <div style="background-color: blue; font-size: 16px;">...</div>

// JSX
<div style={{ backgroundColor: "blue", fontSize: "16px" }}>...</div>

שימו לב לסוגריים הכפולים - הסוגריים החיצוניים {} הם תחביר JSX להכנסת ביטוי, והפנימיים {} הם אובייקט JavaScript.

פרגמנטים - Fragments

כל קומפוננטה חייבת להחזיר אלמנט שורש אחד. אם רוצים להחזיר כמה אלמנטים בלי div עוטף, משתמשים ב-Fragment:

// ERROR - multiple root elements
function Bad() {
    return (
        <h1>Title</h1>
        <p>Paragraph</p>
    );
}

// OK - wrapped in a div (but adds an extra DOM element)
function WithDiv() {
    return (
        <div>
            <h1>Title</h1>
            <p>Paragraph</p>
        </div>
    );
}

// OK - Fragment (no extra DOM element)
function WithFragment() {
    return (
        <>
            <h1>Title</h1>
            <p>Paragraph</p>
        </>
    );
}

<>...</> הוא קיצור של <React.Fragment>...</React.Fragment>. הוא לא מוסיף שום אלמנט ל-DOM - רק מאפשר להחזיר כמה אלמנטים.

הערות בתוך JSX

הערות בתוך JSX נכתבות בתחביר של JavaScript עטוף בסוגריים מסולסלים:

function Example() {
    return (
        <div>
            {/* this is a comment inside JSX */}
            <h1>Hello</h1>

            {/*
                multi-line comment
                inside JSX
            */}
            <p>World</p>
        </div>
    );
}

מחוץ ל-JSX (בחלק ה-JavaScript), הערות רגילות עובדות:

function Example() {
    // regular JS comment - works here
    const name = "Alice";

    /* also works here */
    return <h1>{name}</h1>;
}

קומפוננטה ראשונה

קומפוננטה בריאקט היא פונקציה שמחזירה JSX:

function Welcome() {
    return (
        <div>
            <h1>Welcome to React!</h1>
            <p>This is my first component.</p>
        </div>
    );
}

כדי להשתמש בקומפוננטה, כותבים אותה כאלמנט JSX:

function App() {
    return (
        <div>
            <Welcome />
            <Welcome />
            <Welcome />
        </div>
    );
}

שם הקומפוננטה חייב להתחיל באות גדולה (PascalCase). ריאקט מבדילה בין קומפוננטות (אות גדולה) לאלמנטי HTML (אות קטנה).

סיכום

• ריאקט היא ספרייה לבניית UI דרך קומפוננטות
• יוצרים פרויקט חדש עם Vite - npm create vite@latest
• JSX מאפשר לכתוב HTML בתוך JavaScript
• ביטויים מוכנסים ל-JSX עם סוגריים מסולסלים {}
• className במקום class, סגנון כאובייקט, אטריביוטים ב-camelCase
• פרגמנטים <>...</> מאפשרים להחזיר כמה אלמנטים בלי עטיפה
• הערות ב-JSX נכתבות כ-{/* comment */}
• קומפוננטה היא פונקציה שמחזירה JSX, עם שם ב-PascalCase