React入門ガイド：ゼロから最初のユーザーインターフェースを構築する

Reactは、ユーザーインターフェースを構築するためのJavaScriptライブラリです。 Facebookによって開発およびメンテナンスされており、フロントエンド開発で最も人気のあるツールの1つになっています。このガイドでは、ゼロから始めて、Reactの基本的な概念を段階的に理解し、簡単なユーザーインターフェースを構築します。

Reactを選ぶ理由？

Reactには次の利点があります。

コンポーネント化： Reactは、ユーザーインターフェースを独立した再利用可能なコンポーネントに分解します。これにより、コードの保守と理解が容易になります。
宣言型： Reactは宣言型プログラミングスタイルを使用します。これは、表示したいものを記述するだけで、Reactが更新とレンダリングを自動的に処理することを意味します。
効率的： Reactは仮想DOMとスマートdiffアルゴリズムを使用しており、ユーザーインターフェースを効率的に更新し、不要なレンダリングを削減できます。
大規模なコミュニティサポート： Reactには大規模なコミュニティと豊富なエコシステムがあり、開発を支援する多くのチュートリアル、ライブラリ、ツールを見つけることができます。
クロスプラットフォーム機能： React Nativeを使用すると、Reactを使用してネイティブモバイルアプリケーション（iOSおよびAndroid）を開発できます。

準備

始める前に、コンピューターに次のツールがインストールされていることを確認する必要があります。

Node.js： Node.jsは、React開発ツールを実行するためのJavaScriptランタイム環境です。 https://nodejs.org/ からダウンロードしてインストールできます。
npmまたはyarn： npm（Node Package Manager）とyarnは、Reactの依存関係をインストールおよび管理するためのJavaScriptパッケージマネージャーです。通常、Node.jsをインストールすると、npmも一緒にインストールされます。 yarnはhttps://yarnpkg.com/からインストールできます。

最初のReactアプリケーションを作成する

create-react-appを使用して、Reactプロジェクトをすばやく作成します。

npmを使用して作成：

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

yarnを使用して作成：

yarn create react-app my-first-react-app
cd my-first-react-app
yarn start

上記のコマンドを実行すると、create-react-appはmy-first-react-appという名前のディレクトリを自動的に作成し、そのディレクトリにReactプロジェクトを初期化します。 npm startまたはyarn startコマンドは開発サーバーを起動し、ブラウザでhttp://localhost:3000にアクセスしてReactアプリケーションを表示できます。

ディレクトリ構造

create-react-appによって作成されたプロジェクトのディレクトリ構造は次のとおりです。``` my-first-react-app/ ├── node_modules/ # プロジェクトが依存するライブラリ ├── public/ # 静的リソース（例：HTMLファイル） │ ├── index.html # アプリケーションのエントリポイントとなるHTMLファイル │ └── ... ├── src/ # Reactのソースコード │ ├── App.css # AppコンポーネントのCSSスタイル │ ├── App.js # Appコンポーネント │ ├── App.test.js # Appコンポーネントのテストファイル │ ├── index.css # グローバルCSSスタイル │ ├── index.js # アプリケーションのエントリポイントとなるJavaScriptファイル │ ├── logo.svg # Reactのロゴ │ └── ... ├── .gitignore # Gitの無視ファイル ├── package.json # プロジェクトのメタデータと依存関係 ├── README.md # プロジェクトの説明ドキュメント └── yarn.lock # 依存関係のバージョンロックファイル（yarnを使用する場合）


## Reactコンポーネントの理解

Reactアプリケーションはコンポーネントで構成されています。コンポーネントは、ユーザーインターフェースの特定の部分をレンダリングするための、独立した再利用可能なコードブロックです。

`src/App.js`ファイルでは、デフォルトの`App`コンポーネントを確認できます。

```javascript
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

コードの説明：

import React from 'react'; Reactライブラリをインポートします。
function App() { ... } Appという名前の関数コンポーネントを定義します。
return ( ... ) コンポーネントがレンダリングする内容を記述したJSX式を返します。
export default App; Appコンポーネントをエクスポートして、他のファイルで使用できるようにします。

JSX (JavaScript XML)

JSXはJavaScriptの構文拡張であり、JavaScriptコード内でHTMLのようなコードを記述できます。上記の例では、...がJSX式です。JSXコードはBabelによって標準のJavaScriptコードに変換され、ブラウザが理解できるようになります。

Appコンポーネントの修正

Appコンポーネントを修正して、簡単なカウンターを作成してみましょう。

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# カウンター

      現在のカウント: {count}

      +
      -
    
  );
}

export default App;

修正点：

import React, { useState } from 'react'; useState Hookをインポート。useState は、関数コンポーネントで状態を追加するために使用されるReact Hookです。
const [count, setCount] = useState(0); useState Hookを使用して、countという名前の状態変数を作成し、0に初期化。setCount は、countの状態を更新するための関数です。
const increment = () => { setCount(count + 1); }; incrementという名前の関数を定義し、countの状態を1ずつ増加させます。
const decrement = () => { setCount(count - 1); }; decrementという名前の関数を定義し、countの状態を1ずつ減少させます。
現在のカウント: {count} ページにcount状態の値を表示。{count} は、JSXコードにJavaScript変数を挿入するために使用されるJSX式です。
+ と - incrementとdecrement関数をそれぞれバインドする2つのボタンを作成。onClick は、ボタンがクリックされたときに指定された関数を実行するためのイベントハンドラです。

src/App.jsファイルを保存すると、ブラウザが自動的に更新され、簡単なカウンターが表示されます。「+」ボタンをクリックするとカウントが増加し、「-」ボタンをクリックするとカウントが減少します。

CSSスタイルを使用する

CSSを使用してReactアプリケーションを美化できます。create-react-app は、CSS Modulesと通常のCSSファイルをサポートしています。

CSS Modulesを使用する：

CSS Modulesを使用すると、コンポーネントごとに独立したCSSスタイルを作成し、スタイルの競合を回避できます。コンポーネントでCSS Modulesを使用するには、.module.cssで終わるファイルを作成する必要があります。

たとえば、App.module.cssという名前のファイルを作成し、次のCSSスタイルを追加します。

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

次に、src/App.jsファイルでCSS Modulesをインポートします。

import React, { useState } from 'react';
import styles from './App.module.css'; // CSS Modulesをインポート

function App() {
  const [count, setCount] = useState(0);
```javascript
 const increment = () => {
 setCount(count + 1);
 };

 const decrement = () => {
 setCount(count - 1);
 };

 return (
 <>
 {/* stylesオブジェクトを使ってCSSクラスを参照する */}
 

 # カウンター

 現在のカウント: {count}

 +
 -
 

 );
}

export default App;

通常のCSSファイルの使用:

通常のCSSファイルを使ってグローバルスタイルを定義することもできます。src/index.cssファイルで、グローバルスタイルを定義できます。

例えば、以下のCSSスタイルを追加します。