React + Redux 実践入門

はじめに

React + Reduxをプロジェクトに使おうとした場合、割りと色んな周辺ライブラリが必要なったり、
バージョンによっては同梱されていたモジュールがパッケージに分離されていたりするので
Fluxのデータフローにそって入門してみます。

開発環境

package version
React 15.2.1
Redux 3.6.0

ReactもES6を書いていきたいのでBabelでコンパイルさせる設定を記述します。

パッケージのインストール

npm install --save-dev babel-cli babel-preset-react

package.json

  "babel": {
    "presets": [ "react" ],
  }

https://babeljs.io/docs/plugins/preset-react/

パッケージのインストール

パッケージをどんどんインストールしていきます。

package version
React React本体
Redux Redux本体
react-redux ReactとReduxを連携させるため使用します
react-dom domにreact elementをrenderするために必要なやつです (https://github.com/facebook/react/blob/master/docs/docs/reference-react-dom.md)
react-router React用ルーティングライブラリ
redux-thunk Actionに関数を記述できるようにします

Hello World

さて、いよいよReactを使用してHello Worldしていきます。

コンポーネント

Reactはコンポーネント指向のFWであり、JSXを使用してコンポーネントを作成していきます。
以下はHello Worldするだけのコンポーネント。今回はclassで記述しますが、状態を持たないコンポーネントの
場合はReact Stateless Functional Components の記法の方が良いでしょう。

import React from 'react';

export default HelloWorld extends React.Components {
  render() {
    return (
      <div>
        HelloWorld
      </div>
    )
  }
}

ルーティング

先ほど作成したコンポーネントを読み込んでルーティングを定義します。

import React from 'react';
import { hashHistory, Router, Route, IndexRoute } from 'react-router'
import {render} from 'react-dom';

import HelloWorld from 'HelloWorld.jsx'

const root = document.querySelector('#root');


render((
  <Router history={hashHistory}>
    <Route path='/' component={HelloWorld}>
  </Router>
), root)