create-react-appを使ってreactアプリ開発環境を作る

Facebook製のcreate-react-appというツールを知ったので使ってみた、という話です。

このところReactとReduxの勉強をぼちぼちしています。Reduxの公式ドキュメントを見ながら、サンプルを写経してみようと考えたのですが、サンプルを動かす環境の構築において、babelやwebpackなどを導入して環境を作るのが、ちょっと面倒だなと感じて二の足を踏んでいました。

Reduxの公式サイトからリンクされているサンプルコード群(https://github.com/reactjs/redux/tree/master/examples)を1つ1つ見ていくと、共通して、READMEに、

This project template was built with Create React App.

と書かれていることに気付きました。

この「Create React App」が何なのか調べてみると、Facebookが公開したReactアプリの環境を作るコマンド「create-react-app」であることが分かりました。

このコマンドを導入すると、webpackやbabel、Autoprefixer、ESLintなどのライブラリやツールを適用したReactアプリのプロジェクトが簡単に作れるようです。

というわけで、create-react-appをインストールし、写経用のプロジェクトを構築して、ローカルで動かしてみるところまでやってみました。

環境

次の環境を使用した。

• Ubuntu 16.04LTS
• nvm v0.32.0
• node v6.9.1
• npm v3.10.8

インストール

npmでcreate-react-appをインストールする。

% npm install -g create-react-app
% create-react-app --version
create-react-app version: 0.6.0

プロジェクト作成

ここにあるコードの写経をしたいので、 todoという名前のプロジェクトを作成する。

% create-react-app todo

とすると、次のような構成のプロジェクトが生成される。

% cd todo
% tree . -L 2
.
├── README.md
├── node_modules
│   ├── asap
│   ├── core-js
│   ├── encoding
│   ├── fbjs
│   ├── iconv-lite
│   ├── is-stream
│   ├── isomorphic-fetch
│   ├── js-tokens
│   ├── loose-envify
│   ├── node-fetch
│   ├── object-assign
│   ├── promise
│   ├── react
│   ├── react-dom
│   ├── react-scripts
│   ├── ua-parser-js
│   └── whatwg-fetch
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    └── logo.svg

動作確認

% cd todo
% npm start

を実行すると、

Compiled successfully!

The app is running at:

  http://localhost:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

のように出力される。 ブラウザでhttp://localhost:3000へアクセスと、次のようなページが表示される。

次のステップ

あとはプロジェクトのsrcディレクトリ内に適宜コードを書いていくことでReactなアプリケーションが作れる。 Reduxを導入する場合も、package.jsonにRedux関連のパッケージを追加して、コードを書けばよい。

create-react-appコマンドを使うことでReactアプリの開発環境が簡単に構築できることがわかりました。

これを使って、React+Reduxの勉強を進めてみようと思います。