מה זה React? ספריית ה-UI של JavaScript בהסבר פשוט

React היא ספריית JavaScript לבניית ממשקי משתמש מקומפוננטות. אתם מתארים איך המסך צריך להיראות עבור הנתונים הנוכחיים, וכשהנתונים משתנים, React מעדכנת את הדף בהתאם. React, React JS ו-ReactJS הם אותו דבר: ספריית קוד פתוח שנוצרה בפייסבוק (היום Meta).

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);

    return (
        <p>
            {label}: {count}{' '}
            <button onClick={() => setCount(count + 1)}>Add one</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <h3>Fruit basket</h3>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

לחצו על שני הכפתורים. כל Counter שומר מספר משלו, כי כל אחד הוא עותק נפרד של הקומפוננטה עם state משלו. הוסיפו שורה שלישית, <Counter label="Plums" />, ויופיע מונה חדש ועצמאי.

הדוגמה הקצרה הזו כבר מראה את שלושת הרעיונות ש-React בנויה עליהם: קומפוננטות (Counter ו-App הן פונקציות שמחזירות UI), JSX (התחביר שדומה ל-HTML בתוך return), ו-state (count, ערך שגורם ל-React לצייר מחדש את הקומפוננטה כשהוא משתנה).

הבעיה ש-React פותרת

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

React הופכת את זה. אתם כותבים פונקציה אחת שאומרת מה המסך צריך להיות עבור state נתון, ו-React מחשבת אילו חלקים בדף צריכים להשתנות. זה נקרא UI דקלרטיבי, בניגוד לקוד אימפרטיבי שמפרט כל שינוי ב-DOM צעד אחר צעד. הנה שני הסגנונות זה לצד זה בדוגמה אחת:

import { useEffect, useRef, useState } from 'react';

function ByHand() {
    const boxRef = useRef(null);

    useEffect(() => {
        // Plain DOM code: no React state, no JSX.
        const box = boxRef.current;
        box.innerHTML = 'By hand: <span class="num">0</span> is <span class="parity">even</span> <button>+1</button>';
        let count = 0;
        const button = box.querySelector('button');

        function handleClick() {
            count += 1;
            box.querySelector('.num').textContent = count;
            box.querySelector('.parity').textContent = count % 2 === 0 ? 'even' : 'odd';
        }

        button.addEventListener('click', handleClick);
        return () => button.removeEventListener('click', handleClick);
    }, []);

    return <p ref={boxRef} />;
}

function Declarative() {
    const [count, setCount] = useState(0);

    return (
        <p>
            Declarative: {count} is {count % 2 === 0 ? 'even' : 'odd'}{' '}
            <button onClick={() => setCount(count + 1)}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <ByHand />
            <Declarative />
        </div>
    );
}

ByHand מוסר את הפסקה שלו לקוד DOM רגיל (האפקט מריץ את הקוד הזה רק אחרי ש-React יצרה את הפסקה). הוא שומר את המספר במשתנה, מוצא כל אלמנט עם querySelector וקובע את הטקסט שלו ידנית. Declarative רק אומר "הצג את הספירה, והצג אם היא זוגית". מחקו את השורה ב-handleClick שקובעת את .parity ולחצו כמה פעמים: השורה הראשונה טוענת עכשיו ש-3 זוגי, ואילו השורה השנייה לא יכולה לצאת מסנכרון, כי הטקסט מחושב מ-count בכל רינדור.

איך React מעדכנת את הדף

כש-state משתנה, React קוראת שוב לפונקציית הקומפוננטה שלכם. הקריאה הזו היא רינדור. הפונקציה מחזירה תיאור חדש של ה-UI, React משווה אותו לקודם, ואז משנה רק את החלקים בדף האמיתי שבהם יש הבדל. את התיאור הזה שבזיכרון קוראים לעיתים קרובות virtual DOM.

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');

    console.log('App rendered, name is', JSON.stringify(name));

    return (
        <div>
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Type your name"
            />
            <p>Hello, {name || 'stranger'}!</p>
        </div>
    );
}

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

קומפוננטות, JSX ו-state במבט מהיר

קומפוננטות הן פונקציות JavaScript ששמן מתחיל באות גדולה. הן מחזירות את מה שצריך להופיע על המסך, ומשתמשים בהן כמו בתגיות HTML: <Counter />. דף הוא עץ של קומפוננטות, מקטנות כמו כפתור ועד גדולות כמו מסך הגדרות שלם. ראו קומפוננטות.

JSX הוא התחביר שמאפשר לכתוב markup בתוך JavaScript. סוגריים מסולסלים מחזירים אתכם ל-JavaScript, כך ש-{count} מציג ערך ו-{items.map(...)} הופך מערך לרשימה. כלי build מקמפל את ה-JSX לקריאות פונקציה רגילות לפני שהדפדפן מריץ אותו.

State הוא מידע שקומפוננטה זוכרת בין רינדורים. יוצרים אותו עם ההוק useState, וקריאה ל-setter שלו היא הדרך לומר ל-React שמשהו השתנה. נתונים זורמים מטה מהורים לילדים דרך props, שהם הארגומנטים של קומפוננטה.

הדוגמה הזו משתמשת בכולם: רשימה שמרונדרת ממערך ב-state, וטופס שמוסיף אליה.

import { useState } from 'react';

function TaskList({ tasks }) {
    if (tasks.length === 0) return <p>Nothing to do.</p>;
    return (
        <ul>
            {tasks.map((task) => (
                <li key={task}>{task}</li>
            ))}
        </ul>
    );
}

export default function App() {
    const [tasks, setTasks] = useState(['Learn JSX', 'Learn props']);
    const [draft, setDraft] = useState('');

    function addTask() {
        if (draft.trim() === '') return;
        setTasks([...tasks, draft.trim()]);
        setDraft('');
    }

    return (
        <div>
            <input value={draft} onChange={(e) => setDraft(e.target.value)} />
            <button onClick={addTask}>Add</button>
            <TaskList tasks={tasks} />
            <p>{tasks.length} tasks</p>
        </div>
    );
}

הוסיפו משימה ושני דברים משתנים בבת אחת: הרשימה והספירה שמתחתיה. אף פעם לא אמרתם לספירה להתעדכן. שתיהן קוראות מ-tasks, ולכן שתיהן עוקבות אחריו. שנו את המערך ההתחלתי ל-[] והרשימה תציג במקום זאת "Nothing to do.".

מה React היא לא

React היא ספרייה, לא framework מלא. היא מכסה קומפוננטות, state והפיכתם ל-UI, ובכוונה משאירה בחוץ כמה דברים שאפליקציה שלמה צריכה:

• ניתוב (Routing). אין דרך מובנית למפות כתובות URL לדפים. React Router והראוטרים של ה-frameworks ממלאים את החסר.
• טעינת נתונים ורינדור בצד השרת. React נותנת כלים כמו אפקטים ו-Suspense, אבל אין לה דעה מאיפה מגיעים הנתונים או איך דפים מתרנדרים בשרת.
• הגדרת build. דפדפנים לא מבינים JSX, ולכן צריך כלי כמו Vite כדי לקמפל אותו.

Frameworks נבנים מעל React כדי לספק את החלקים האלה. Next.js ו-מצב ה-framework של React Router מוסיפים ניתוב, רינדור בצד השרת וטעינת נתונים, וצוות React ממליץ להתחיל אפליקציה מלאה עם אחד מהם. לאפליקציה בצד הלקוח או ללמידה, Vite עם React רגיל היא נקודת התחלה קטנה ומהירה; ראו איך מתקינים React.

React מול React Native

React עצמה רק מתארת קומפוננטות ואיך הן משתנות. רנדרר נפרד הופך אותן למשהו שאפשר לראות. React DOM מרנדר לדפי ווב, וזה מה שכל הדוגמאות באתר הזה משתמשות בו. React Native מרנדר את אותו סוג של קומפוננטות לתצוגות נייטיב של iOS ו-Android, כך שכותבים <View> ו-<Text> במקום <div> ו-<p>, ואין קובץ HTML או CSS. קומפוננטות, props, state והוקים עובדים אותו דבר בשניהם, כך שמה שלומדים כאן עובר ישירות.

מתי ללמוד React

למדו React אחרי יסודות JavaScript, כי כל מה שיש ב-React הוא JavaScript. לפני שמתחילים, כדאי להרגיש בנוח עם:

• משתנים, פונקציות ופונקציות חץ
• מערכים והמתודות map ו-filter שלהם
• אובייקטים, destructuring ותחביר ה-spread (...)
• import ו-export
• promises ו-async/await, לטעינת נתונים

אם כל אלה מוכרים לכם, התחילו עם JSX וקומפוננטות, ואז props ו-state. אפקטים, refs, קונטקסט וכלי ביצועים מגיעים אחר כך, כשבניית קומפוננטות אינטראקטיביות קטנות כבר מרגישה טבעית.