Reactを学習したのでまとめてみた

案件でReactを使うことになったので調べてみて理解したことをまとめてみました。
（ほとんどAIに聞きました）

1. コンポーネント

Reactアプリケーションは、再利用可能なUIの部品であるコンポーネントで構成されます。コンポーネントには、関数コンポーネントとクラスコンポーネントの2種類があります。

関数コンポーネント

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

クラスコンポーネント

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

2. JSX

JSXは、HTMLのような構文でReactコンポーネントを記述するための拡張構文です。

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

3. Props（プロパティ）

Propsは、親コンポーネントから子コンポーネントにデータを渡すための仕組みです。

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

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

4. State（状態）

Stateは、コンポーネント内で管理されるデータです。関数コンポーネントではuseStateフックを使用し、クラスコンポーネントではthis.stateを使用します。

関数コンポーネントでのState

import React, { useState } from 'react';

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

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

クラスコンポーネントでのState

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  increment() {
    this.setState({
      count: this.state.count + 1
    });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.increment()}>Increment</button>
      </div>
    );
  }
}

5. イベント処理

イベント処理は、ユーザーアクションに応じてコンポーネントの動作を定義するために使用されます。

function Button() {
  function handleClick() {
    console.log('Button clicked!');
  }

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

6. 条件付きレンダリング

条件に応じてコンポーネントの表示を切り替えるために、条件付きレンダリングを使用します。

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;

  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

7. リストとキー

配列データを元にコンポーネントを動的に生成するために、リストとキーを使用します。

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

8. フォーム

フォームは、ユーザー入力を受け取り、stateと同期させるために使用されます。

function NameForm() {
  const [name, setName] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('A name was submitted: ' + name);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}