Reactの地図と、最初の実行

ReactはUIを組み立てる道具

Reactでは、画面を小さなコンポーネントに分け、データから表示を計算します。HTMLは意味と構造、CSSは見た目、JavaScriptは処理を担当します。Reactを使っても、この3つの知識は必要です。ボタンを押したときにDOMを自分で探して書き換える代わりに、状態を変えて次の画面を表します。

先に読めるようにするJavaScript

変数、関数、条件分岐、配列、オブジェクト、map・filter、import/exportを確認しましょう。たとえばitems.filter(item => !item.done)は未完了の項目だけの新しい配列です。苦手な構文に出会ったら、まず通常のJavaScriptとして小さく試してからJSXへ戻ります。

• HTML: 見出し・リンク・ボタン・ラベル付き入力
• CSS: class、余白、Flexbox、狭い画面
• JavaScript: 分割代入、アロー関数、スプレッド構文

教材の実行基準

基礎を学ぶ目的でViteのreactテンプレートを使います。新規の本格的なアプリでは、React公式が案内するフレームワークも比較してください。Node.jsはViteが対応する版を用意し、node -vで確認します。確認日の公式要件は20.19+または22.12+で、テンプレートがより新しい版を求める場合はその警告に従います。

• ターミナルに出たローカルURLを開く。ポート番号は環境により変わる
• src/main.jsxがAppを読み込み、HTML内のrootへ描画する
• Reactのstateは、何も保存しなければ再読み込みで初期化される

JavaScript版の学習環境を作る

node -v
npm create vite@latest react-practice -- --template react
cd react-practice
npm install
npm run dev

新しい空の学習用フォルダーで実行します。react-tsではなくreactを選びます。

最初の表示に置き換える

export default function App() {
  const topic = 'React';
  return (
    <main>
      <h1>{topic}の練習帳</h1>
      <p>今日は小さな画面から始めます。</p>
    </main>
  );
}

生成されたsrc/App.jsxの内容を置き換えます。src/main.jsxはそのまま使えます。