Reduxのチュートリアルを試す環境を作るのにcreate-react-appを使う

ReduxのチュートリアルはサンプルコードがES6で提供されています。チュートリアルを試すにはbabelなどのパッケージをインストールするなど環境を整える必要があります。

簡単に環境を作れるnpmパッケージ create-react-app¹ を使って、チュートリアルを進めるための環境を作る手順をまとめます。

対象者

• Reduxがどんなものかチュートリアルを試してみたい
• ES6を利用した環境のセットアップ方法がよくわからない

create-react-appとは

create-react-appはReactプロジェクトのスケルトンを作成してくれるコマンドラインツールです。create-react-appでプロジェクトを作成すると、reactやreact-scriptsというパッケージを含めた形でプロジェクトを作成してくれます。このreact-scriptsは、babel、eslint、webpack、loaderなどの開発に必要なパッケージをまとめたパッケージです。

手順

1. create-react-appをインストール
2. npmプロジェクトを作る
3. reduxをインストール
4. コードを書く

1. create-react-appをインストール

npmパッケージのcreate-react-appをインストールします。

npm install -g create-react-app 

2. npmプロジェクトを作る

create-react-appでプロジェクトを作成する

create-react-app redux-tutorial
cd redux-tutorial
npm start

npm startを実行すると以下のログがコンソールに出力されて、ブラウザが自動で開きURLにアクセスします。

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.

プロジェクトディレクトリの内容は次のようになります。パッケージのインストールだけではなくindex.jsやApp.jsファイルも作成されます。

プロジェクトディレクトリのtreeコマンド表示結果

.
└── redux-tutorial
    ├── README.md
    ├── node_modules
    │   ├── asap
    │   ├── core-js
    │   ├── encoding
    │   ├── fbjs
    │   ├── fsevents
    │   ├── iconv-lite
    │   ├── is-stream
    │   ├── isomorphic-fetch
    │   ├── js-tokens
    │   ├── loose-envify
    │   ├── nan
    │   ├── 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

packege.json

{
  "name": "redux-tutorial",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.7.0"
  },
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

3. reduxをインストール

reduxをインストールします。チュートリアルで利用するreact-reduxもインストールします。

npm install --save redux react-redux

4. コードを書く

以上で、チュートリアルを進めるための準備ができました。あとはチュートリアルを読みながらコードを写経していけばReduxを試すことができます。

1. Reactの公式ドキュメントのセットアップにもcreate-react-appを使うようになっていました。また、サンプルコードがES6のものに更新されていますね(2016/11時点)。 ↩