Reactの機能をざっくりまとめてみる

Reactは効率的なUIの構築に特化したライブラリです。
以下にReactの主要な機能や概念を簡単にまとめました。

JSX記法

JavaScriptでHTMLライクにUIを記述できる構文。

• {}でJavaScriptの値を埋め込める
• 親タグで要素を囲む必要がある

  const name = "Kiko";
  const element = (
  <div>
    <h1>こんにちは、{name}さん！</h1>
  </div>
  );
  
  
  

コンポーネントの使い方

Reactではコンポーネントを使ってUIを部品化し再利用可能にする

• コンポーネントは関数（もしくはクラス）として定義する

• 必要に応じて呼び出すだけで使える

• Propsで親からデータを渡して動的に表示を変える

• 先に子を定義し、あとで親と組み合わせるのが基本的なルール

    // コンポーネントの定義
    function Greeting(props) {
      return <h1>こんにちは、{props.name}さん！</h1>;
    }
    
    // コンポーネントの使用
    function App() {
      return (
        <div>
          <Greeting name="Kiko" />
          <Greeting name="Taro" />
        </div>
      );
    }
  
  

Propsとは

• 親コンポーネントから子コンポーネントへデータを渡す仕組み

• コンポーネント間で値を受け渡してUIを動的に変化させる時に使う

• 読み取り専用

    // 子コンポーネント: データを受け取る
    function Greeting(props) {
      return <h1>こんにちは、{props.name}さん！</h1>;
    }
    
    // 親コンポーネント: データを渡す
    function App() {
      return (
        <div>
          <Greeting name="Kiko" /> {/* name="Kiko" を渡す */}
          <Greeting name="Taro" /> {/* name="Taro" を渡す */}
        </div>
      );
    }
  
  

stateとは

• コンポーネント内で管理する動的なデータ（状態）

  • useStateで状態を定義

• 状態が変わると自動的にUIが更新される

    import React, { useState } from 'react';
    
    function Counter() {
      const [count, setCount] = useState(0); // 数字を管理する「箱」を作る
    
      return (
        <div>
          <p>{count}</p> {/* 箱の中身を表示 */}
          <button onClick={() => setCount(count + 1)}>増やす</button> {/* 箱の中身を増やす */}
        </div>
      );
    }
  
  

useState

初期値は0。最初の数字をここで決める。

count

「今の数字」を覚えておく場所。

setCount

数字を更新するための関数。

再レンダリングとは

StateやPropsの変化でReactが自動的に画面を描き直すこと

useEffect

再レンダリング後に動く処理のこと

    import React, { useState, useEffect } from 'react';
    
    function Counter() {
      const [count, setCount] = useState(0);
    
      useEffect(() => {
        console.log('再レンダリングされました');
      });
    
      return <button onClick={() => setCount(count + 1)}>+1</button>;
    }