【React入門】はじめての基礎6ステップ｜中学生でもわかる！練習つき

Reactの基本を、1つずつゆっくり学びたい人のための記事です。
中学生にもわかるように、やさしい言葉と練習問題で解説しています。

✅ 講義1：JSXってなに？

JSX（ジェイエスエックス）は、JavaScriptの中にHTMLっぽいコードを書く方法です。

const name = "Alice";
return <h1>Hello {name}</h1>;

🧪 練習問題

次の変数を使って、<code><h2>Hello dog</h2></code> を表示しましょう。

const animal = "dog";

export default function App() {
  return (
    <div>
      <h2>Hello {animal}</h2>
    </div>
  );
}

---

✅ 講義2：コンポーネントの基本

Reactでは、画面を「部品（コンポーネント）」に分けて作ります。

function Hello() {
  return <p>Hello world</p>;
}

<Hello /> と使えば、その部品が表示されます。

🧪 練習問題

Fruit というコンポーネントを作って、<code><p>Apple</p></code> を表示しましょう。

function Fruit() {
  return (
    <div>
      <p>Apple</p>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Fruit />
    </div>
  );
}

※注意： コンポーネント名（Fruit）は大文字で始めましょう！

---

✅ 講義3：propsでデータを渡す

props（プロップス）は、コンポーネントにデータを渡す方法です。

function Greeting(props) {
  return <h2>Hello {props.name}</h2>;
}

<Greeting name="Alice" />

🧪 練習問題

Welcome コンポーネントに fruit=”Banana” を渡して表示してみましょう。

function Welcome(props) {
  return <h3>I like {props.fruit}</h3>;
}

export default function App() {
  return (
    <div>
      <Welcome fruit="Banana" />
    </div>
  );
}

---

✅ 講義4：propsの分割代入

毎回 props.fruit と書くのは少し長いので、分割代入が使えます。

function Welcome({ fruit }) {
  return <h3>I like {fruit}</h3>;
}

🧪 練習問題

以下のコードを使って、<code><h4>I like cat</h4></code> を表示してください。

function Favorite({ animal }) {
  return <h4>I like {animal}</h4>;
}

export default function App() {
  return (
    <div>
      <Favorite animal="cat" />
    </div>
  );
}

---

✅ 講義5：useState入門（カウンター）

変わるデータ（状態）を使うときは、useState を使います。

import { useState } from "react";

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

---

✅ 講義6：カウント応用（+2, ×2, Random）

useState を使って、いろんな操作ができます！

🧪 練習問題

次のような動きのボタンを作ってください。

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(1);

  return (
    <div>
      <p>Count: {count}</p>

      <button onClick={() => setCount(count + 2)}>+2</button>
      <button onClick={() => setCount(count * 2)}>×2</button>
      <button onClick={() => setCount(Math.floor(Math.random() * 100) + 1)}>
        Random
      </button>
    </div>
  );
}

---

🎉 おつかれさまでした！

これで React の基礎6ステップはクリアです！

次は「入力フォームのリアルタイム表示」「Todoリスト」「画面の切り替え」などに進んでいきます。

楽しんで学んでいきましょう！