作ってみるもの
WebでReactの動的サイトを作るのを目標にとりあえず今回は、
React、Babel、Webpackを使って
普通のリストを作ることにしようかと。
もろもろのバージョンは下記
node：7.6.0
npm ：4.4.4
React：15.4.2
Babel：6系
Webpack：2.2.1
Reactとは
Facebookが作っているJSのView部分だけのライブラリ
facebook.github.io
詳しくは本家を。
現在バージョンは１５で、初期と大分変わっているので、記事を参考にする際はお気をつけください。
Babelとは
「BabelはブラウザにまだサポートされていないようなJavaScriptの次世代の標準機能を、現在のブラウザでも使えるようにするNode.js製のトランスパイラ。」
要はJSのコンパイラと考えていただければ。
ECMAScript（JavaScript の標準試用）準拠なのがいいところ。
Webpackとは
設定ファイルを書けば、依存関係を解消し、
ビルドしてくれるツール（つまりコンパイラ）です。
さっそく作ってみよう！
とりあえず今回は、
React、Babel、Webpackを使って
特に動かないリストを作ることにしようかと。
とりあえず動くものはFluxとか使ってからで。
まずは作業用ディレクトリでnpmで初期化して必要なものをインストール
※Babel6になりパッケージの分離が行われ、
必要なもののみインストールする必要あります。
npm init
npm install --save react react-dom
npm install --save-dev webpack babel-core babel-loader babel-preset-es2015 babel-preset-react
このままじゃ使いづらいので
package.jsにwebpackコマンドを登録
"main": "index.js",
"scripts": {
"webpack": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
これでnpm run webpackでwebpackが使えるようになります。
とはいえwebpackが何をするかの設定ファイルが必要なので、
下記を用意します。
※これもBabel6の影響でloaderがbabel-loaderになっています。
webpack.config.js
const path = require('path');
module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: './public',
filename: '[name].js'
},
module: {
loaders: [
{
loader: 'babel-loader',
exclude: /node_modules/,
test: /\.js[x]?$/,
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
}
]
}
};
./publicに、entryでキーに指定した名前の[name].jsが書き出されます。
こうしておけば複数も可能です。
JSは今回はメインの呼び出しとリスト自体の２つ
app.js
import React from 'react';
import ReactDom from 'react-dom';
import List from './list.js';
window.ListApp = {
render: () => {
ReactDom.render(
<List />,
document.getElementById('listapp')
);
}
};
list.js
こっちは今回は適当。
import React, {Component} from 'react'
export default class List extends Component {
constructor() {
super();
}
render() {
var list = [];
var data = [
{ text: "1" },
{ text: "2" }
];
for(var i in data){
list.push(<li key={i}>{data[i].text}</li>);
}
return(
<ul>
{list}
</ul>
);
}
}
で、肝心のHTMLですが。
index.html
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>List書いてみよ</title>
</head>
<body>
<div id="listapp"></div>
<script src="public/app.js"></script>
<script>ListApp.render();</script>
</body>
</html>
これだけ。
最後に
npm run webpack -p
すると、publicディレクトリにapp.jsが出来ているので、
ブラウザからhtmlを開いてみると普通にリストが表示されます。
（ただのリストなので画像は貼りませんが苦笑）
まとめ
とりあえず入門したかなと。
ここから、FluxかRedux使ってデータ持たせたり、
ちゃんとコンポーネント設計したり、
axiosとか使ってAPI呼んでデータ取ってきたり。
お砂場はできれども道は遠き。
