ページ

2016年9月3日土曜日

Reactを使う 1 - 開発環境と簡単なサンプル -


今更感もありますが、最近仕事でフロントエンド周りをやっていた為、
色々勉強していこうと今回は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拡張子のファイルが対象です。実際に動作させる場合は
$ npm run lint
で実行できますが、今回は使いません。
次に以下構成でファイルを作成していきます。
.
├── README.md
├── index.html
├── package.json
├── src
│   ├── container.js
│   └── hello.jsx
└── webpack.config.js
  • 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を読み込むようにしています。
  • container.js
import './hello.jsx';
  • hello.jsx
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'));
  • index.html
<!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と表示されとけば成功です。



By -
ラベル:

1 件のコメント:

登録: コメントの投稿 (Atom)