React+Babel+WebpackでHello World
2016年01月11日 19時16分
流れが速すぎてWebの情報がすぐ古くなる界隈なので環境構築に手こずったのでメモ。
オフィシャル見るのが確実なんだろうけど…
1.必要パッケージをインストール
|
1 2 3 4 |
npm init npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 npm install --save-dev webpack npm install -g webpack-dev-server |
2.ファイル一覧
.
..
package.json
webpack.config.js
src/
src/main.js
src/hello.jsx
src/world.jsx
dist/
dist/bundle.js
dist/index.html
node/modules/省略
3.ソース記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// webpack.config.js module.exports = { entry: __dirname + "/src/main.js", output: { path: __dirname + "/dist", filename: "bundle.js" }, module: { loaders: [ { test: /\.jsx?$/, loader: "babel-loader", exclude: /node_modules/, query: { presets: ["es2015", "stage-0", "react"] } } ] } }; |
|
1 2 3 4 5 6 7 8 9 10 |
// src/hello.jsx import React from 'react'; class Hello extends React.Component { render() { return <h1>Hello</h1> } } React.render(<Hello/>, document.getElementById('hello')); |
|
1 2 3 4 5 6 7 8 9 10 |
// src/world.jsx import React from 'react'; class World extends React.Component { render() { return <h1>World</h1> } } React.render(<World/>, document.getElementById('world')); |
|
1 2 3 4 |
// src/main.js import Hello from './hello.jsx'; import World from './world.jsx'; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- dist/index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello React</title> </head> <body> <div id="hello"></div> <div id="world"></div> <script src="bundle.js"></script> </body> </html> |
4.実行
|
1 |
webpack-dev-server |
下にアクセス。
※ 最後のスラッシュが必須なことに注意
http://localhost:8080/webpack-dev-server/
ファイルを編集すると勝手にリロードされる。とても便利。
- BABEL
- https://babeljs.io/
- webpack
- https://github.com/webpack/webpack
- webpack-dev-server
- https://webpack.github.io/docs/webpack-dev-server.html