React初心者必見！ゼロから学べる実践入門

はじめに

Reactは、Facebookによって開発されたJavaScriptライブラリで、ユーザーインターフェイス（UI）の構築に使用されます。
コンポーネントベースのアプローチにより、再利用可能なUI部品を簡単に作成できます。

メリット

コンポーネントベース：UIを小さな部品に分割し、それぞれを独立して開発・管理できます。
仮想DOM：実際のDOM操作を最小限に抑え、高速なUI更新を実現します。
コミュニティとエコシステム：豊富なライブラリやツールがあり、開発効率が向上します。

JSX

JSXは、JavaScript内でHTMLを記述するための構文です。
直感的にUIを記述できるため、開発がスムーズになります。

.jsx

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

Reactの基本

.コンポーネントの作成

import React from 'react';

function HelloWorld() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default HelloWorld;

useState

Reactでは、コンポーネントの状態を管理するためにuseStateフックを使用します。
ユーザーインターフェイスの一部のデータを保持し、コンポーネントの再レンダリングに影響を与えます。

.useState

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>
  );
}

export default Counter;

useEffect

関数コンポーネント内で副作用（サイドエフェクト）を処理するためのフックです。
副作用とは、コンポーネントのレンダリングに直接関係しない処理のことを指します。
例えば、データのフェッチ、手動でのDOM操作、サブスクリプションの設定や解除などです。

.useEffect

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

function DataFetching() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default DataFetching;

ディレクトリ例

my-app/
├── public/
│   ├── index.html           # アプリケーションのHTMLテンプレート
│   └── favicon.ico          # ファビコン
├── src/
│   ├── assets/              # 画像やフォントなどの静的ファイル
│   ├── components/         # 再利用可能なUIコンポーネント
│   │   ├── Button.js
│   │   ├── Header.js
│   │   └── Footer.js
│   ├── pages/              # ページコンポーネント
│   │   ├── HomePage.js
│   │   ├── AboutPage.js
│   │   └── ContactPage.js
│   ├── hooks/              # カスタムフック
│   │   └── useFetch.js
│   ├── services/           # API呼び出しやビジネスロジック
│   │   └── apiService.js
│   ├── context/            # コンテキストAPIの定義
│   │   └── ThemeContext.js
│   ├── utils/              # ユーティリティ関数
│   │   └── formatDate.js
│   ├── App.js              # アプリケーションのメインコンポーネント
│   ├── index.js            # アプリケーションのエントリーポイント
│   └── setupTests.js       # テストセットアップ
├── .gitignore              # Gitで無視するファイル
├── package.json            # プロジェクトの依存関係とスクリプト
└── README.md               # プロジェクトの説明

まとめ

ReactはJavaScriptライブラリで、コンポーネントベースのアプローチを使用して再利用可能なUI部品を作成し、仮想DOMにより高速なUI更新を実現します。
豊富なコミュニティとエコシステムがあり、開発効率が向上します。