今更感もありますが、最近仕事でフロントエンド周りをやっていた為、
色々勉強していこうと今回はReactに手を出してみます。
Reactとは?
Facebookが開発しているJavascriptのライブラリで
UIをコンポーネントベースで構築していきます。
開発環境構築
Reactが登場して、いろいろ周りの環境などが落ち着いて来たので
以下の組み合わせで進めて行こうかと思います。
- Babel
- webpack
- ESLint
- Mocha
それぞれどんなものかというと・・・
Babel
2015年にECMAScript(ES6)が登場しました、何かというと・・・
Javascriptの標準化されたものがECMAScriptでEcmaインターナショナル
の元で標準化が行われています。
そして、2009年に発表されたものがES5で、現在のモダンなブラウザは
ほとんど実装されています。ただES6はまだ対応中です。。
そこでBabelを使うとES6や次期のバージョンのソースコードから
旧バージョンのES5などに変換します。
webpack
Webアプリケーションに必要なリソースや依存関係などを解決する
ビルドツールです。
今回はwebpackでbabelなどの必要なものを取り入れてビルドします。
ESLint
Javascriptの静的検証ツールです。
検証ルールを設定できES6の構文やjsxもチェックできます。
Mocha
Unitテスト用フレームワークです。
簡単なサンプル作成
今回はただHelloと表示させるだけの簡単なサンプルを作成するので
MochaとESLintは使いませんが、とりあえずインストールだけしています。
早速もろもろインストールします。
$ npm init
$ npm install -g webpack
$ npm install -g webpack-dev-server
$ npm install -g mocha
$ npm install --save react
$ npm install --save react-dom
$ npm install --save-dev babel-core
$ npm install --save-dev babel-loader
$ npm install --save-dev babel-preset-es2015
$ npm install --save-dev babel-preset-react
$ npm install --save-dev eslint
package.jsonに関しては今回はこんな感じで作成しました。
{
"name": "Sample",
"version": "1.0.0",
"description": "React sample.",
"main": "container.js",
"scripts": {
"lint": "aslant src --ext .js --ext .jsx"
},
"author": "XXXXXXXX",
"license": "MIT"
}
scriptsにてeslintを起動できるようにしています。
src配下のjs, jsx拡張子のファイルが対象です。実際に動作させる場合は
で実行できますが、今回は使いません。
次に以下構成でファイルを作成していきます。
.
├── README.md
├── index.html
├── package.json
├── src
│ ├── container.js
│ └── hello.jsx
└── webpack.config.js
var path = require('path');
module.exports = {
entry: './src/container.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /(node_modules|bower_components)/,
query: {
presets: ['es2015', 'react']
}
}
]
},
};
上記設定ではbabelを使用して、container.jsとhello.jsxから
bundle.jsを作成しています。
最終的にindex.htmlはbundle.jsを読み込むようにしています。
import React from 'react';
import ReactDOM from 'react-dom'
class Hello extends React.Component {
render() {
return <h1>Hello</h1>
}
}
ReactDOM.render(<Hello/>, document.getElementById('container'));
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>React Sample</title>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/javascript" src="bundle.js"></script>
</html>
それでは早速実行して確認してみたいと思います。
↓のwebpack-dev-serverコマンドで色々よろしくやってくれます。
$ webpack-dev-server --progress --colors
起動後、
http://localhost:8080/webpack-dev-server/index.html
を確認して↓このようにHelloと表示されとけば成功です。
Evernote - メモ、Web ページ、文書、名刺などをまとめて記憶
