HTMLでReactのライブラリを読み込んでReactでコーディングすることは可能だが、コンパイルに時間がかかり、コンテンツが大規模になればそれなりに描画に時間がかかってしまいます。そこで、React/JSXを利用して事前にコンパイルすることが推奨されています。
本記事では、React/JSXのコンパイル環境を備忘録として書きます。
crate-react-appのインストール
create-react-appをグローバルインストールします。
npm install -g create-react-app
プロジェクトの作成
例: react-jsx-appプロジェクトを作成する場合
create-react-app react-jsx-app
Reactアプリの雛形が作成される。
webpackのインストール(任意)
webpackとは、JavascriptやCSSなどのリソースファイルを一つにまとめたり、JSXのような特殊な記法て書かれたファイルを変換するツールです。Webサイトは、様々なリソースファイルで構成されているので、webpackを利用することで、最適な形で作り変えることができます。
npmでグローバルインストールします。
npm install -g webpack
webpackでReact/JSXをビルドする場合は以下のモジュールをインストールした方が良い
- babel-loader
- babel-core
$ npm i --save-dev babel-loader babel-core
- babel-preset-react: これインストールしないとwebpackコマンドでSyntax Errorになるらしい
$ npm i --save-dev babel-preset-react