ReduxのチュートリアルはサンプルコードがES6で提供されています。チュートリアルを試すにはbabelなどのパッケージをインストールするなど環境を整える必要があります。
簡単に環境を作れるnpmパッケージ create-react-app1 を使って、チュートリアルを進めるための環境を作る手順をまとめます。
対象者
- Reduxがどんなものかチュートリアルを試してみたい
- ES6を利用した環境のセットアップ方法がよくわからない
create-react-appとは
create-react-appはReactプロジェクトのスケルトンを作成してくれるコマンドラインツールです。create-react-appでプロジェクトを作成すると、reactやreact-scriptsというパッケージを含めた形でプロジェクトを作成してくれます。このreact-scriptsは、babel、eslint、webpack、loaderなどの開発に必要なパッケージをまとめたパッケージです。
手順
- create-react-appをインストール
- npmプロジェクトを作る
- reduxをインストール
- コードを書く
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を試すことができます。