הכירו את react.dev

16 במרץ 2023 מאת דן אברמוב ורחל נאבורס

---

---

tl;dr

• האתר React החדש (react.dev) מלמד React מודרני עם רכיבי פונקציות וHooks.
• כללנו דיאגרמות, איורים, אתגרים ויותר מ-600 דוגמאות אינטראקטיביות חדשות.
• אתר התיעוד הקודם React עבר עכשיו אל legacy.reactjs.org.

אתר חדש, דומיין חדש, דף בית חדש

ראשית, קצת שמירה על house.

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

המסמכים הישנים של React מאוחסנים כעת בארכיון ב-legacy.reactjs.org. כל הקישורים הקיימים לתוכן הישן יופנו באופן אוטומטי כדי למנוע “שבירה באינטרנט”, אך האתר מדור קודם לא יקבל עדכונים רבים נוספים.

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

אם עדיין לא ראית את דף הבית החדש, בדוק אותו!

הולך All-in על React מודרני עם Hooks

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

המסמכים החדשים מלמדים React עם Hooks מההתחלה. המסמכים מחולקים לשני חלקים עיקריים:

• Learn React הוא קורס בקצב עצמי המלמד React מאפס.
• API Reference מספק את הפרטים ודוגמאות השימוש עבור כל React API.

בואו נסתכל מקרוב על מה תוכלו למצוא בכל חלק.

התחלה מהירה

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

אם אתה אוהב ללמוד על ידי עשייה, אנו ממליצים לבדוק את ה-Tic-Tac-Toe Tutorial הבא. זה ילמד אותך בבניית משחק קטן עם React, תוך כדי ללמד את המיומנויות use בכל יום. הנה מה שתבנה:

import { useState } from 'react';

function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

function Board({ xIsNext, squares, onPlay }) {
  function handleClick(i) {
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    const nextSquares = squares.slice();
    if (xIsNext) {
      nextSquares[i] = 'X';
    } else {
      nextSquares[i] = 'O';
    }
    onPlay(nextSquares);
  }

  const winner = calculateWinner(squares);
  let status;
  if (winner) {
    status = 'Winner: ' + winner;
  } else {
    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
  }

  return (
    <>
      <div className="status">{status}</div>
      <div className="board-row">
        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
      </div>
      <div className="board-row">
        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
      </div>
      <div className="board-row">
        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
      </div>
    </>
  );
}

export default function Game() {
  const [history, setHistory] = useState([Array(9).fill(null)]);
  const [currentMove, setCurrentMove] = useState(0);
  const xIsNext = currentMove % 2 === 0;
  const currentSquares = history[currentMove];

  function handlePlay(nextSquares) {
    const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
    setHistory(nextHistory);
    setCurrentMove(nextHistory.length - 1);
  }

  function jumpTo(nextMove) {
    setCurrentMove(nextMove);
  }

  const moves = history.map((squares, move) => {
    let description;
    if (move > 0) {
      description = 'Go to move #' + move;
    } else {
      description = 'Go to game start';
    }
    return (
      <li key={move}>
        <button onClick={() => jumpTo(move)}>{description}</button>
      </li>
    );
  });

  return (
    <div className="game">
      <div className="game-board">
        <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
      </div>
      <div className="game-info">
        <ol>{moves}</ol>
      </div>
    </div>
  );
}

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

ברצוננו גם להדגיש את Thinking in React - זה המדריך שגרם ל-React ל”קליק” עבור רבים מאיתנו. עדכנו את שני המדריכים הקלאסיים הללו לרכיבי פונקציות use וHooks, כך שהם טובים כמו חדשים.

למד React שלב אחר שלב

אנו רוצים שלכולם בעולם יש הזדמנות שווה ללמוד React בחינם בעצמם.

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

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

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

• Managing State מלמד איך לארגן את ההיגיון שלך ככל שהאפליקציה שלך גדלה במורכבות.
• Escape Hatches מלמד איך אתה יכול “לצאת החוצה” React, ומתי הכי הגיוני לעשות זאת.

כל פרק מורכב מכמה דפים קשורים. רוב הדפים הללו מלמדים מיומנות או טכניקה ספציפית - לדוגמה, כותבת סימון עם JSX, עדכון אובייקטים במצב או Sharing State Between רכיבים. חלק מהדפים ממעשיים בהסבר רעיון - כמו Render and Commit, או State as a Snapshot. ויש כמה, כמו אולי אתה לא צריך אפקט, שחולקים את ההצעות שלנו על סמך מה שלמדנו במהלך השנים הללו.

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

בדוק את ההבנה שלך עם אתגרים

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

אתה לא צריך לפתור אותם עכשיו! אלא אם כן אתה באמת רוצה.

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✔'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

שימו לב ללחצן “הצג פתרון” בפינה השמאלית התחתונה. זה שימושי אם אתה רוצה לבדוק את עצמך!

בנה אינטואיציה עם דיאגרמות ואיורים

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

תראה גם כמה איורים לאורך המסמכים—הנה אחד מה-דפדפן מצייר את המסך:

אישרנו עם ספקי הדפדפן שהתיאור הזה הוא 100% מדויק מבחינה מדעית.

API הפניה חדשה ומפורטת

ב-API Reference, לכל React API יש עכשיו עמוד ייעודי. זה כולל כל מיני APIs:

• Hooks מובנה כמו useState.
• רכיבים מובנים כמו useState.
• רכיבי דפדפן מובנים כמו useState.
• APIs מוכווני מסגרת כמו useState.
• React APIs אחרים כמו useState.

תבחין שכל עמוד API מחולק לשני פלחים לפחות: הפניה ו-שימוש.

Reference מתאר את החתימה הרשמית API על ידי רישום הארגומנטים וערכי ההחזר. זה תמציתי, אבל זה יכול להרגיש קצת מופשט אם אתה לא מכיר את ה-API הזה. זה מתאר מה API עושה, אבל לא איך use אותו.

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

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      You pressed me {count} times
    </button>
  );
}

חלק מהדפים API כוללים גם פתרון בעיות (לבעיות נפוצות) וAlternatives (עבור APIs שהוצאו משימוש).

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

מה הלאה?

זה כיסוי לסיור הקטן שלנו! עיין באתר החדש, ראה מה אתה אוהב או לא אוהב, והמשיכו לקבל את המשוב בסקר האנונימי או במעקב אחר בעיות.) שלנו

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

שמענו רבות מהבקשות שלך להרחיב את התוכן והפונקציונליות של האתר, למשל:

• מתן גרסת TypeScript לכל הדוגמאות;
• יצירת מדריכי הביצועים, הבדיקות והנגישות המעודכנים;
• תיעוד React רכיבי שרת ללא תלות במסגרות התומכות בהם;
• עבודה עם הקהילה הבינלאומית שלנו כדי לתרגם את המסמכים החדשים;
• הוספת תכונות חסרות לאתר החדש (לדוגמה, RSS עבור בלוג זה).

כעת, כאשר react.dev יצא, נוכל להעביר את המיקוד שלנו מ”להדביק” את המשאבים החינוכיים React של צד שלישי להוספת מידע חדש ושיפור נוסף של האתר החדש שלנו.

אנחנו חושבים שמעולם לא היה זמן טוב יותר ללמוד React.

מי עבד על זה?

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

כמובן, שום פרויקט כזה גדול לא קורה בנפרד. יש לנו הרבה אנשים להודות!

סילביה ורגאס שיפרה את הדוגמאות שלנו כדי לחרוג מ”foo/bar/baz” וחתלתולים, ולהציג מדענים, אמנים וערים מרחבי העולם. מגי אפלטון הפכה את השרבוטים שלנו למערכת דיאגרמות ברורה.

תודה לדיוויד מקייב, סופי אלפרט, ריק הנלון, אנדרו קלארק, ומאט קרול על כתיבה נוספת של תרומות. ברצוננו גם להודות ל[נטליה טפלוהינאבסטי]ו-[מרק עלבסתי]](אן-[ק-רעיונות) והמשוב שלנו.

תודה לדן לבוביץ על עיצוב האתר ו-רזבן גרדינר על עיצוב ארגז החול.

בחזית הפיתוח, תודה לג’ארד פאלמר על פיתוח אב טיפוס. תודה לדיין גרנט ודסטין גודמן מ-ThisDotLabs על תמיכתם בפיתוח ממשק משתמש. תודה ל[Ives van Hoorne](___K](___T](___T)(___T)(___T) ווזניקה](https://twitter.com/danilowoz) מ-CodeSandbox על עבודתם עם אינטגרציה של ארגז חול. תודה לריק הנלון על עבודת פיתוח נקודתית ועיצוב, עידוד הצבעים שלנו ופרטים חדשים עדינים יותר. תודה ל-Harish Kumar0_ בתות והוספת.

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

לבסוף, תודה לקהילת React על היותה ההשראה מאחורי המאמץ הזה. אתה חושב שאנחנו עושים זאת, ואנו מקווים שהמסמכים החדשים יעזרו לך use React לבנות כל ממשק user שתרצו.