🚀 React入門チュートリアル

Reactとは？

Reactの全体イメージ

ReactはUI（画面）を「コンポーネント」と呼ばれる小さな部品の組み合わせで作るJavaScriptライブラリです。

Reactの基本概念

• 宣言的UI
  状態（state）をもとに「こうなってほしい画面」を宣言的に書きます。状態が変わるたびにReactが自動でUIを最新に保ちます。

• コンポーネント指向
  画面を小さな部品（関数）に分割して再利用可能にします。

• 一方向データフロー
  データが「親 → 子」へ一方向に流れることで、バグが起きにくい構造になっています。

最低限これだけ覚えておけばOK

• Reactは「状態」と「UI」を自動的に結びつける
• 小さな関数（コンポーネント）を組み合わせて画面を作る
• 関数コンポーネントとHooks（useStateなど）が現在の標準

環境構築

# 任意のフォルダで
npx create-react-app my-react-tutorial
cd my-react-tutorial
npm start

最初のコンポーネント

import React from "react";

function App() {
  return (
    <div>
      <h1>こんにちは、React！</h1>
      <p>Reactの世界へようこそ。</p>
    </div>
  );
}

export default App;

状態管理（useState）

import React, { useState } from "react";

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

  return (
    <div>
      <h1>カウンター</h1>
      <p>現在の値: {count}</p>
      <button onClick={() => setCount(count + 1)}>＋1</button>
      <button onClick={() => setCount(count - 1)}>−1</button>
    </div>
  );
}

export default App;

イベント処理

• onClick などのイベントはタグに直接関数を渡す

リスト表示

import React, { useState } from "react";

function App() {
  const [tasks, setTasks] = useState([
    { id: 1, text: "Reactの勉強" },
    { id: 2, text: "昼ご飯を食べる" },
    { id: 3, text: "コーディング" },
  ]);

  return (
    <div>
      <h1>今日のタスク</h1>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.text}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

入力フォームの追加

import React, { useState } from "react";

function App() {
  const [tasks, setTasks] = useState([]);
  const [input, setInput] = useState("");

  const addTask = () => {
    if (input.trim() === "") return;
    setTasks([...tasks, { id: Date.now(), text: input }]);
    setInput("");
  };

  return (
    <div>
      <h1>ToDoリスト</h1>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="新しいタスクを入力"
      />
      <button onClick={addTask}>追加</button>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.text}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

コンポーネント分割例

// App.js
import TaskList from "./components/TaskList";

function App() {
  return (
    <div>
      <h1>ToDoリスト</h1>
      <TaskList />
    </div>
  );
}

export default App;

// components/TaskList.js
import TaskItem from "./TaskItem";

function TaskList() {
  const tasks = [
    { id: 1, text: "牛乳を買う" },
    { id: 2, text: "宿題をする" },
  ];
  return (
    <ul>
      {tasks.map((task) => (
        <TaskItem key={task.id} text={task.text} />
      ))}
    </ul>
  );
}

export default TaskList;

// components/TaskItem.js
function TaskItem({ text }) {
  return <li>{teli>;
}

export default TaskItem;

関数コンポーネントとクラスベースコンポーネントの違い

特徴	関数コンポーネント	クラスベースコンポーネント
記述方法	関数	クラス
状態管理	useState等のフック	this.state / this.setState
ライフサイクル	useEffectフック	componentDidMount等
props参照	引数props	this.props
推奨度	◎推奨	△特殊用途

---

これでReactの基本を抑えましょう！