Create React AppでReactの環境構築

Reactの環境を構築するにはBabelやwebpackを使ったりと真面目にゼロからやろうとしたらつまずいてしまいますが、Facebookが公式に出しているReactのプロジェクト生成ツール（Create React App）を使うことで簡単にReactの初期プロジェクトテンプレートを生成することができます。

Create React Appを使うための事前準備

Node.jsのインストール

下記のURLからNode.jsをダウンロードしてインストール実施。

https://nodejs.org/ja/

「推奨版」と「最新の機能」の２種類ありますがここでは「最新版」を選択してダウンロード。
インストールが完了したらコマンドプロンプトを開いてnode.jsのバージョンを確認します。

> node -v
v15.11.0

上記のようにバージョン情報が表示されたら正常にインストールが完了です。

yarnのインストール

Create React Appでは、デフォルトのパッケージマネージャーにYarnを使用します。
（npmよりもyarnの方がより高速且つパッケージの整合性での信頼性があるということだったのですが、最近ではnpxがnpmに入ったのでyarnとの大きな差がなくなったようです。）

> npm install -g yarn
～
# インストール処理ログ表示
～

# 完了メッセージ後にバージョン確認
>yarn -v
1.22.10

Reactの新規プロジェクトの作成と起動

プロジェクトテンプレートの作成

yarnコマンドで新規プロジェクトのテンプレートを作成します。
今回は「sample-react-app」というプロジェクト名で進めていきます。

#npxコマンドでアプリケーション作成
> npx create-react-app sample-react-app

～
#色々と処理ログが流れます
～

success Uninstalled packages.
Done in 8.46s.

Created git commit.

Success! Created sample-react-app at C:\work\sample-project-react\sample-react-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd sample-react-app
  yarn start

Happy hacking!

プロセスのログが色々と流れて最後に「happy hacking!」が表示されたら完了です。

ちなみにnpxだけでなくnpm, yarnでも「crate react app」を実行してプロジェクトテンプレートを作成することができます。

npxの場合

> npx create-react-app my-react-app 

npmの場合

> npm init react-app my-react-app

yarnの場合

> yarn create react-app my-react-app

Reactアプリケーションの起動

#アプリケーションのディレクトリに移動
> cd sample-react-app

#サーバーを起動
yarn start

ブラウザが自動的に起動して「http://localhost:3000/」のURLが開かれます。
下記のようにReactのロゴが表示されていたらReactアプリケーションの起動成功です。

Create React Appで作成されたディレクトリ構造は下記のようになります

sample-react-app
│  .gitignore #gitの除外設定ファイル
│  package.json #作成したアプリケーションのパッケージ設定ファイル
│  README.md #アプリケーションの最初に読むドキュメントファイル
│  yarn.lock #パッケージの正確なバージョン記述ファイル
│  
├─node_modules #パッケージの実モジュールフォルダ
│          
├─public #フロントの一般的なファイルを格納するディレクトリ
│      favicon.ico
│      index.html #ReactのSPAメインページとなるテンプレートファイル
│      logo192.png
│      logo512.png
│      manifest.json #アプリケーションに関する情報ファイル
│      robots.txt
│      
└─src #アプリケーションのプログラムファイル格納ディレクトリ
        App.css #
        App.js #アプリケーションのメインプログラム
        App.test.js #yarn testで実施されるテストの定義
        index.css #アプリケーションのCSSファイル
        index.js #Reactアプリで最初に実行されるJSファイル
        logo.svg
        reportWebVitals.js #WebVitalの計測機能の設定ファイル
        setupTests.js #テストの設定ファイル
        

少し改修してみましょう

App.jsのソースコードを見てみると下記のようなコードになっていると思います。

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

App.jsの内容を下記に書き換えてみましょう。

const App = () => {
  return (
    <div>
      <h1>Hello React</h1>
    </div>
  );
}
export default App;

ブラウザの表示が下記のように表示されます。

お疲れさまでした！！

以上でReactのプロジェクトテンプレート作成の一通りの流れでした。

Create React Appで使われているツール

Create React Appで環境構築すると下記のツールが自動的に設定されます

webpack

webpack-dev-server

Babel

ESLint