← クエスト一覧へ

React基礎 ガイドブック

🏠

基礎知識

2 記事
1
コンポーネントとJSXの基本

Reactの基本はコンポーネントです。JSXという構文でHTMLとJavaScriptを一緒に書きます。

// 関数コンポーネントの例
function Greeting({ name }) {
  return (
    <div className="card">
      <h1>こんにちは、{name}！</h1>
      <p>Reactへようこそ</p>
    </div>
  );
}

// 使用例
function App() {
  return <Greeting name="Alice" />;
}
💡 JSXのポイント
  • class は className と書く（JSの予約語のため）
  • JavaScript式は {} で囲む
  • タグは必ず閉じる（<img /> など）
2
useStateで状態を管理する

useStateはReactの基本フックです。コンポーネント内の「変化するデータ」を管理します。

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 初期値0

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
      <button onClick={() => setCount(0)}>
        リセット
      </button>
    </div>
  );
}
⚠️ stateを直接変更してはいけない

count++ は NG。必ず setCount(新しい値) を使う。直接変更するとReactが再レンダリングしません。