React / Reduxのイニシャルセットアップ

まずは必要なパッケージをインストールする。

$ npm init
$ npm install --save react react-dom redux react-redux redux-thunk
$ npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react webpack

webpackの設定ファイル

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './index.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
};

package.jsonはこんな感じ

{
  "name": "redux-counter",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "webpack -p --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.8",
    "react-dom": "^0.14.8",
    "react-redux": "^4.4.1",
    "redux": "^3.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "webpack": "^1.12.14"
  }
}

ここまでで最小限のセットアップができて、あとは開発するだけ。

追記:このページ自分でもよく見るので、イニシャルであるといいindex.jsも書いておく。
基本的には http://redux.js.org/docs/basics/UsageWithReact.html 参照だが、加えて非同期処理も普通にやるのでthunkを追加する。

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
import Root from './containers/Root';

let store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

render(
  
    
  ,
  document.getElementById('react-app')
)

当然ながら最低限1つのReducerを用意する。