LoginSignup
3

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-01-27

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3