アジェンダ

新しいReactプロジェクトをセットアップするための基本的なステップをまとめます。

1. Node.jsとnpmのインストール

Reactプロジェクトを始めるには、まずNode.jsとnpm（Node Package Manager）が必要です。これらがインストールされていない場合は、Node.jsの公式サイトからインストールしてください。

インストール方法（例：Homebrewを使用）

brew install node

インストール後、以下のコマンドでバージョンを確認できます。

node -v
npm -v

2. Create React Appの利用

Reactアプリケーションを素早くセットアップするために、Facebookが提供する公式のCLIツールであるCreate React Appを使用します。このツールは、プロジェクトの設定や依存関係の管理を自動化します。

新しいReactプロジェクトの作成

次に、create-react-appコマンドを使用して新しいReactプロジェクトを作成します。

npx create-react-app my-react-app

このコマンドにより、my-react-appという名前のディレクトリが作成され、その中にReactプロジェクトの初期設定が行われます。

3. プロジェクトのディレクトリに移動

プロジェクトが作成されたら、そのディレクトリに移動します。

cd my-react-app

4. 開発サーバーの起動

Reactの開発サーバーを起動して、アプリケーションをブラウザで確認します。

npm start

開発サーバーが起動し、ブラウザで http://localhost:3000 にアクセスすると、新しいReactアプリケーションが表示されます。

5. プロジェクト構造の理解

作成されたプロジェクトのディレクトリ構造は以下のようになっています。

my-react-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── ...
├── .gitignore
├── package.json
└── README.md

public/ディレクトリには、静的なファイルが含まれています。
src/ディレクトリには、Reactコンポーネントやスタイルシートなどのソースコードが含まれています。
package.jsonファイルには、プロジェクトの依存関係やスクリプトが定義されています。

6. プロジェクトのカスタマイズ

プロジェクトを作成したら、自分のアプリケーションに必要なカスタマイズを行っていきます。以下はよく行われるカスタマイズの例です。

コンポーネントの作成

新しいコンポーネントをsrcディレクトリに作成します。

src/Hello.js

import React from 'react';

function Hello() {
  return <h1>Hello, React!</h1>;
}

export default Hello;

コンポーネントの使用

作成したコンポーネントを他のコンポーネントで使用します。

src/App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div className="App">
      <Hello />
    </div>
  );
}

export default App;

まとめ

このガイドでは、新しいReactプロジェクトをセットアップするための基本的な手順を紹介しました。Create React Appを使用することで、迅速かつ効率的にReactアプリケーションを作成することができます。

参考

React プロジェクトを始める – React
新しい React アプリを作る – React