React– category –

フォームとユーザー入力 Controlled Component とは何か？ Reactでフォームを扱うときの大原則： 入力欄の値を「DOM任せ」にせず、Reactの状態で管理する。 このパターンを Controlled Component（制御されたコンポーネント） と呼びます。 例： import { ...

コンポーネント設計とデータの流れ 「状態はどこに置くべきか？」という発想 Reactでよく出てくるキーワードが、「Single Source of Truth（単一の情報源）」です。 同じ意味の状態を複数の場所で別々に持たない 「このデータの正体はここにある」と1か所...

イベント処理と状態管理（useState） Reactでの「イベント処理」の基本 ブラウザのJSだと： button.addEventListener('click', () => { ... }) みたいに書きますが、Reactではコンポーネントの中でイベントハンドラを渡す形になります。 export...

ReactコンポーネントとJSXの基本 「コンポーネント」とは Reactでは、画面の部品をコンポーネントとして定義します。 ざっくり言うと、「入力（props）を受け取って、JSX（見た目）を返すただの関数」です。 function Hello() { return <h1>Hello, R...

Node.js・npm・ビルドツールの基礎 なぜNode.jsが必要なのか？ Reactは「ブラウザで動くUIライブラリ」ですが、開発するときはブラウザだけではなく、 Node.js（サーバー側JavaScript実行エンジン） npm（パッケージ管理ツール） ビルドツール（Vite / web...

Reactで何ができるのか Reactでできること Reactは一言でいうと、「状態（state）」から自動で画面（UI）を組み立ててくれるライブラリです。 例： Todoリスト 追加ボタンを押す → 「Todo配列」という状態が変わる⇒ Reactが「配列に基づいたリストUI」を勝...