R初めてのReact

初めての◯◯シリーズ

初めてのReact — UIを組み立てる

7日で、Reactの考え方(コンポーネント・props・state・useEffect)から、 データを取得して表示する小さなアプリの公開まで。実装はAIに任せても、Reactの仕組みを読める・直せる・説明できる状態を目指します。 JavaScriptの基礎を終えていることが前提です。登録不要・進捗はこのブラウザに保存されます。

学習の進捗0/22 レッスン
  1. 0

    Day 0・Reactってなに？ — UIを部品で組み立てる

    Reactが何で、なぜ生まれたのかを説明できる。宣言的UI(状態を書けば画面はReactが同期)、コンポーネント指向(UIを部品に分けて再利用)、SPAの発想、そして直接DOM操作との違いを自分の言葉で言える。

    0/3 完了

  2. 1

    Day 1・JSXとコンポーネント — 部品を作って渡す

    関数コンポーネントを読んで書けるようになり、JSX(HTMLに似た記法で実体はJS。{}でJSを埋め込む)を理解し、propsで親から子へデータを渡せるようになる。

    0/3 完了

  3. 2

    Day 2・state と イベント — 動くUIの心臓部

    useStateでstateを読んで説明でき、onClick/onChangeでイベントを扱え、stateが変わると自動で再描画される仕組みを理解する。

    0/3 完了

  4. 3

    Day 3・リスト・条件・フォーム — 実データを画面に出す

    配列を map で一覧に変換し key を正しく付けられる。条件付きレンダリングで表示を出し分けられる。input を state に結びつけた制御コンポーネントでフォームを作れる。

    0/3 完了

  5. 4

    Day 4・useEffect と データ取得 — 外の世界とつながる

    useEffectで副作用を読み書きでき、fetchでAPIからデータを取得し、読み込み中・成功・失敗の状態を扱えるようになる。

    0/3 完了

  6. 5

    Day 5・状態の設計と再利用 — 大きくしても壊れない作り

    共有したい状態を共通の親へ持ち上げ(lifting state up)、単一の情報源を意識できる。コンポーネントを責務で分割し、propsのバケツリレー(prop drilling)問題とContextが効く場面を理解する。use〜で始まるカスタムHookを読んで、ロジックとUIの分離を説明できる。

    0/3 完了

  7. 6

    Day 6・小さなアプリを作って公開する — 現場の地図

    これまでの部品(props/state/effect/list/form)を組み合わせて小さなアプリを作る全体像をつかみ、ReactとNext.jsの関係、画面遷移(ルーティング)の考え方、Vercelへの公開の流れ、そしてよくある落とし穴と基本のパフォーマンス感覚を、読める・直せる・説明できるレベルで理解する。

    0/4 完了