3. Basic Concepts

JSX

JSX（JavaScript XML）は、JavaScriptでHTMLのような構文を記述するための拡張機能です。JSXを使用することで、UIコンポーネントの構造を視覚的に分かりやすく表現できます。以下は、JSXの基本的な例です：

const element = <h1>Hello, world!</h1>;

JSXはJavaScriptの一部であり、ブラウザで直接実行される前にトランスパイル（変換）されます。通常、このトランスパイル作業はBabelなどのツールが担当します。

コンポーネント

Reactの中心的な概念は「コンポーネント」です。コンポーネントは再利用可能な独立したUIパーツを定義し、アプリケーションを小さな部品に分割して管理することを可能にします。

関数コンポーネント

関数コンポーネントは、最もシンプルな形式のReactコンポーネントです。関数コンポーネントは単純なJavaScript関数であり、props（プロパティ）を引数として受け取り、React要素を返します。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

PropsとState

Props：親コンポーネントから子コンポーネントにデータを渡すための手段です。Propsは読み取り専用であり、子コンポーネントから変更することはできません。
```
function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}
```

State：コンポーネント自身が管理する動的なデータです。Stateを変更することで、コンポーネントの再レンダリングを引き起こすことができます。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

フック (Hooks)

フックは、関数コンポーネント内で状態やライフサイクルなどのReactの機能を利用するための仕組みです。

useState

useStateは、コンポーネントの状態を宣言するためのフックです。状態変数とその更新関数を返します。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect

useEffectは、副作用を処理するためのフックです。データの取得やサブスクリプションの設定、DOMの操作などが含まれます。

import React, { useEffect, useState } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

その他の基本フック

useContext：コンテクストを使用するためのフック。
useReducer：複雑な状態ロジックを管理するためのフック。
useRef：DOM要素や関数の参照を保持するためのフック。
useMemo：パフォーマンスを最適化するために値をメモ化するフック。
useCallback：パフォーマンスを最適化するために関数をメモ化するフック。

イベント処理

Reactでは、標準的なHTMLのイベントハンドリングと似た方法でイベントを処理します。ただし、イベント名はキャメルケースで記述し、イベントハンドラには関数を渡します。

function ActionButton() {
  function handleClick() {
    alert('Button clicked!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

イベントハンドラは通常、関数コンポーネント内で定義し、必要な場合にpropsやstateを使用してイベントを処理します。

このように進めていきます。他に追加や修正の希望があればお知らせください。

3. Basic Concepts

JSX​

コンポーネント​

関数コンポーネント​

PropsとState​

フック (Hooks)​

useState​

useEffect​

その他の基本フック​

イベント処理​

JSX