JavaScript
React

React/JSXのコンパイル環境を構築

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