DOMJSXコンポーネントpropsprop-typesReactのインストールソース構成Reactコンポーネント作成HTMLファイル作成ReactとReduxを学ぶために、開発環境というかプロジェクトテンプレートをスクラッチから作っている。(最終的な成果はGitHubに置いた。)前回はNode.jsとYarnとBabelとwebpackをセットアップした。(2018/11/21更新)Reactとは以前にも同じような事を書いたけど、改めてReactについて書く。コーディングの詳細にも触れながら。DOMでUIを記述してやると、それが実DOMに効率的に反映されるようになっている。DOMはJSXというHTMLみたいな言語で記述できる。world!</h1>がレンダリングされる。world!</h1>の部分がJSX。コンポーネントJSXではコンポーネントを定義して新たなタグとして使うことができるので、再利用できるコンポーネントを作って、それらを組み合わせてUIを構築することで、効率的な開発ができる。document.getElementById('root'));上記コードではコンポーネントをfunctionで定義しているが、アロー関数で書いても全く一緒。World</h1>;);関数の代わりにclassで定義することもできる。}}関数による定義とclassによる定義はおおむね変わらないが、stateとライフサイクルメソッドを使いたいときはclassにする必要がある。Componentと呼ぶ。Componentと呼ばれていた。Componentの方が適切な呼び方だろう。)propsコンポーネントはレンダリングの際にpropsというパラメータを受け取って使うことができるので、上手く設計すれば汎用的なコンポーネントが書ける。コンポーネントをpureにする)のが定石。prop-typesprop-typesを使うと、コンポーネントに渡されるpropsに期待する型を定義することができる。前節で作ったWelcomeコンポーネントのpropsのnameはStringオブジェクトを受け取ることを期待するので、prop-typesを以下のように定義する。PropTypes.string.isRequired,};こうしておくと、実行時に型チェックが走り、型が合わないとコンソールに警告がでるようになる。Reactのインストール上記のコードを実行するためのライブラリを一通りプロジェクトに追加する。prop-typesReactはv16.6.3が入った。ソース構成ソースを入れるsrcディレクトリの構成は、Qiitaの記事を参考に以下のようにする。react-redux-scaffold/src/actions/components/containers/reducers/sagas/services/index.jsx今のところ使うのはindex.jsxとcomponentsだけ。index.jsxは前回書いた通り、webpackが初めにロードするファイル。componentsにはReactのコンポーネントを入れる。その他のディレクトリについては追って説明する。最初のReactコンポーネントとして、適当なものを作る。App;で、これをindex.jsxでインポートしてレンダリングしてやる。buildするとdist/bundle.jsが生成される。Reactが参考になる。HTMLファイル作成bundle.jsを読み込むHTMLファイルを作る。HTMLファイルを書くときは、「普通のHTMLの書き方」の1~3章とか、「フロントエンドチェックリスト」のHead、HTML辺りが参考になる。開発時にしか使わないだろうから実際は適当でいいし、なんならHtmlWebpackPluginで自動生成してもいい。作るファイルは、webpackの設定に書いた通り、public/index.html。</body></html>ポイントは2点。UIがレンダリングされることになる。src="./bundle.js"></script>を書くこの<script>要素により、bundle.jsがWebサーバからダウンロードされて実行される。以上でReactは一通り。startしてブラウザでhttp://localhost:3000にアクセスするとHOGEと表示されるはず。次回はフォーマッタとリンタを導入する。