「React入門」ではこれまで「Babelを利用した環境構築」、「webpackを利用した環境構築」について解説をしてきましたが、今回はFacebookが公式に出している環境構築ツール「Create React App」について解説を行います。

Create React Appとは？

Create React App はReactの環境構築ツールで一度インストールしてしまえばコマンド一つでReactに必要な環境を構築することができます。

Create React Appのインストールはnode.jsがインストールされている環境で以下のコマンドを入力することでインストールできます。

npm install -g create-react-app

インストール後はターミナルを再起動するか以下のコマンドを入力することでcreate-react-appコマンドが利用できるようになります。

exec $SHELL -l

インストールが完了したらプロジェクトを作成したいフォルダ上で以下のコマンドでReactプロジェクトを作成します。

create-react-app プロジェクト名

たとえば「my-app」というプロジェクトを作成したい場合は以下のようなコマンドを入力します。

create-react-app my-app

my-app フォルダ内には以下のようなファイルが配置されています。

「Happy hacking!」と表示されたら「Create React App」のインストールは成功です。

my-app
├── node_modules/
├── package.json
├── public/
├── README.md
├── src/
└── yarn.lock(環境によってはない)

srcフォルダにはソースコードが配置されており、実際の開発はこの中のファイルを編集していきます。

src/App.js を確認すると以下のようになっており、Appコンポーネントが作成さているのが確認できます。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    return (
      <div classname="App">
        <header classname="App-header">
          <img src="{logo}" classname="App-logo" alt="logo">
          <h1 classname="App-title">Welcome to React</h1>
        </header>
        <p classname="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}
 
export default App;

Create React Appの利用方法

以下のコマンドでプロジェクトフォルダに移動して、

cd my-app

以下のコマンドでCreate React Appを起動します。

npm start

Yarnをインストールしている環境では以下のコマンドでも実行できます。

yarn start

少しまつと http://localhost:3000 のURLでブラウザが立ち上がり Create React App の初期画面が表示されます。

Create React Appはローカルで開発できるようローカルサーバーも含めて用意されており、上記のコマンドで開発環境が立ち上がります。

試しに少し編集してみましょう。先ほど確認した src/App.js のh1要素を以下のように変更してファイルを保存します。

<h1 classname="App-title">ようこそReactへ</h1>

保存したタイミングでブラウザがリロードされて 「Welcome to React」 の文字列が 「ようこそReactへ」に切り替わるのが確認できます。

このようにReactのファイルに編集を加えると、リアルタイムで更新され実行結果を確認することができます。

Create React Appで本番公開

作成したアプリケーションを本番公開するには npm run build とコマンドを入力します。

そうするとbuildフォルダが生成され静的ファイルが出力されます。

my-app
└── build/
　├── asset-manifest.json
　├── favicon.ico
　├── index.html
　├── manifest.json
　├── service-worker.js
　└── static
　　├── css
　　│   ├── main.c17080f1.css
　　│   └── main.c17080f1.css.map
　　├── js
　　│   ├── main.1265e417.js
　　│   └── main.1265e417.js.map
　　└── media
　　　　 └── logo.5d5d9eef.svg

こちらをサーバーなどに上げれば、アプリケーションとして利用することができます。

設定をカスタマイズ

Create React App は簡単に環境を作成できる反面、デフォルトの設定を簡単にカスタマイズできないようになっています。デフォルトの設定で満足行かず、裏側で動作している webpack などの設定をカスタマイズしたい場合は以下のコマンドを入力します。

npm run eject

そうすると config フォルダなどに設定ファイルが書き出され設定をカスタマイズすることができるようになります。

基本的には設定をカスタマイズは不要ですが、高度に利用するケースなどで利用してください。

本連載も以降はCreate React Appで環境が作成されている前提で進めていきます。

次回は、これまでの内容の復習も含めて「ReactでTODOリスト」を作成していきます。