元記事
- まんま流用です。自分のメモ用に投稿しただけです。
babelとwebpackを使ってES6でreactを動かすまでのチュートリアル
http://qiita.com/akirakudo/items/77c3cd49e2bf39da79dd
用語
- nodebrew:node.jsのバージョン管理(mac用)
- nodist:node.jsのバージョン管理(windows用)
- npm:node.jsのパッケージ管理
- babel:新しいJavaScriptの仕様で書かれたソースコードを現状のブラウザで使用できるように変換してくれるツール
- webpack:WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール
手順
for mac
brew install nodebrew
nodebrew ls-remote
nodebrew install-binary stable
nodebrew use stable
node -v
for windows
todo
プロジェクト作る
mkdir sample-project
cd sample-project
git init
npm init
mkdir src dist
babel入れる
# babelのインストール
npm i -D babel-core babel-loader babel-preset-es2015 babel-preset-react
# .babelrcファイルの設定
touch .babelrc
-Dは--save-devで、package.jsonにdevDependenciesとして入れる
-Sは--saveで、package.jsonにdependenciesとして入れる
.babelrc
{
"presets": [
"es2015", "react"
]
}
webpack入れる
npm i -D webpack
touch webpack.config.js development.js
webpack.config.js
require('babel-core/register'); // development.jsでES6を使えるようにする
module.exports = require('./development');
development.js
import path from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin'
const src = path.resolve(__dirname, 'src')
const dist = path.resolve(__dirname, 'dist')
export default {
entry: src + '/index.jsx',
output: {
path: dist,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: 'babel'
}
]
},
resolve: {
extensions: ['', '.js']
},
plugins: [
new HtmlWebpackPlugin({
template: src + '/index.html',
filename: 'index.html'
})
]
}
reactパッケージ入れる
npm i -S react react-dom
index.jsxを作成
touch src/index.jsx
index.jsx
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return <p> Hello React!</p>;
}
}
render(<App/>, document.getElementById('app'));
webpack-dev-server入れる
npm i -D webpack-dev-server html-webpack-plugin
index.htmlを作る
touch src/index.html
- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Test</title>
</head>
<body>
<div id="app" />
</body>
</html>
package.jsonに追記する
"scripts": {
"start": "webpack-dev-server"
}
npm startでwebpack-dev-serverを起動
npm start
npm startした状態で、ソースを修正すると、即座に反映する
index.jsx
import React from 'react'
import { render } from 'react-dom'
class App extends React.Component {
constructor(props) {
super(props)
this.state = { message: 'something' }
}
onChange(e) {
this.setState( {message: e.target.value} )
}
render() {
return (
<div>
<input type="text" onChange = { this.onChange.bind(this) } />
<p>{ this.state.message }</p>
</div>
)
}
}
render(<App/>, document.getElementById('app'))