アプリの描画にReactを使ってみましょう。
まず、ReactとReactDOMをインストールします:
yarn add react react-domを実行します
この2つのパッケージは"devDependencies"ではなく"dependencies"に追加されます。ビルドツールと異なり、クライアントバンドルは本番環境用に使われるためです。
src/client/app.jsをsrc/client/app.jsxにリネームし、ReactとJSXのコードを書いてみましょう:
import 'babel-polyfill';
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import Dog from '../shared/dog';
const dogBark = new Dog('Browser Toby').bark();
const App = props => (
<div>
The dog says: {props.message}
</div>
);
App.propTypes = {
message: PropTypes.string.isRequired,
};
ReactDOM.render(<App message={dogBark} />, document.querySelector('.app'));注意: もしReactとそのPropTypesをよく知らないのであれば、まずReactについて学習してからこのチュートリアルに戻ってきてください。後の章ではReactが多用されるため、よく理解しておく必要があります。
Gulpfile内のclientEntryPointの値に.jsx拡張子を追加します:
clientEntryPoint: 'src/client/app.jsx',ここではJSXの構文を使うため、BabelにJSXを変換するよう伝える必要があります。BabelにJSX構文の処理方法を教えるReact用のBabelプリセットをインストールします: yarn add --dev babel-preset-react そしてpackage.jsonファイルのbabelエントリを次のように変更します:
"babel": {
"presets": [
"latest",
"react"
]
},これでyarn start実行後、index.htmlを開くと、Reactが"The dog says: Wah wah, I am Browser Toby"と出力するのを確認できるはずです。
(原文: 8 - React)
次章: 9 - Redux