React + Redux + ES6のプロジェクトをwebpackで環境構築してみる

このエントリーをはてなブックマークに追加

react

最近のフロントエンジニアの流行といえば・・・React + Redux + ES6ですね。今回はとりあえずwebpackを使って「Hello World」までやってみたいと思います。

環境構築

webpackとは

webpack で始めるイマドキのフロントエンド開発

上記でもあるようにGulpやGruntでも環境構築できます。ですが、webpackの圧倒的にビルド&コンパイルが早いです!!!!僕も仕事でReactプロジェクトで最初はGulpを使っていたのですがものすごくコンパイルに時間がかかります。SassだけとかならGulpでも全く問題ならないのですが、React + ReduxになるとどうしてもJSファイルが多くなってしまうので時間がかかってしまうんですね。Gulpだとだいたい一回の保存ごとに1,2分かかります。

ですがwebpackの場合は数秒で出来ます。React + Reduxのプロジェクトにはwebpackで環境構築するのがいいでしょう。

インストール

React + Redux + ES6で作るプロジェクトをwebpackでビルドして「Hello World」までやってみます。まずは下記コマンドで必要なパッケージをインストールします。

mkdir react-sample
cd react-sample
npm init
npm install --save-dev webpack
npm install --save-dev webpack-init
npm install --save react react-dom redux react-redux
npm install --save-dev webpack-dev-server babel-loader babel-core babel-preset-es2015 babel-preset-react
touch .babelrc

.babelrc

変換を行う際のバージョン指定をします。package.jsonと同じ場所に設置してください。

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

package.json

"start": "webpack-dev-server --port 4000",になっていますが、ブラウザでhttp://localhost:4000で見ることができます。

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --port 4000",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Takumi0901/react-redux-webpack.git"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-init": "^0.1.1"
  },
  "dependencies": {
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2"
  }
}

webpack.config.js

module.exports = {
  entry: './src/index.js',
  output: {
    path: './public',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
  },
  devServer: {
    contentBase: 'public'
  }
}
entry: './src/index.js',

これでコンパイルしたいファイルを指定します。

output: {
    path: './public',
    filename: 'bundle.js',
  },

outputの部分で出力先を出力時のファイル名を指定します。

contentBaseについて

contentBase: 'public'となっていますが、これは簡単にいうとブラウザで閲覧時のルートディレクトリをさしています。先ほどhttp://localhost:4000で見ることができるディレクトリですね。

今回はプロジェクトのディレクトリ以下のようにしています。

- /public // 出力先
- /src // 開発するところ
- .babelrc
- .gitignore
- package.json
- webpack.config.js

Hello Worldしてみる

とりあえずReactでHello Worldをやってみます。

index.html

index.htmlは基盤となるファイルです。こちらはpublicディレクトリに作成をしてください。ブラウザで閲覧時にはこのファイルをみることになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Hello React!</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>

index.js

/src内に作成します。

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import App from './App'

render(
  <Provider>
    <App />
  </Provider>,
  document.getElementById("root")
)

App.js

こちらも/src内に作成します。

import React from 'react'

const App = () => (
    <div>
      hello, world
    </div>
)

export default App

あとは以下のコマンドを叩けばコンパイルされます。そしたらブラウザ上で
http://localhost:4000で閲覧して「Hello World」が表示されていれば成功です。

npm start

エラー

ブラウザのコンソールをみるとWarningが出ています。Providerはstoreを呼ぶ必要があるよーっていう意味なので一旦は放置で大丈夫です。

Warning: Failed prop type: Required prop `store` was not specified in `Provider`.in Provider
Warning: Failed childContext type: Required child context `store` was not specified in `Provider`.in Provider

ビルドしたファイルは出力されない

ビルドをしても、publicディレクトリに
bundle.jsは出力されません。ですが、ビルドしたファイルはメモリ上に保存されるため、正しく動作します。

.gitignore

gitで管理するなら必要です。なぜかというとビルドされるファイルやnodeファイルが管理対象だといちいち変更された対象に入ってしまうんです。ですので、gitの管理対象から外します。

# npm
node_modules/

# web
bundle.js

参考

react-redux+es2015+babel+webpackなプロジェクトを新規作成する(コピペ用)

オススメの本



WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

イチからわかる!Reactの仕組みと使い方UIコードの再利用化と速度向上を図る!Reactのコンセプト、コンポーネント、JSX、活用テクニック、一歩進んだ使い方を解説!

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

このエントリーをはてなブックマークに追加

同じカテゴリーの記事

ページの先頭へ