はじめに
create-react-appを用いて，コンパイル環境を構築する例を備忘録としてまとめます．
環境
- Windows 10 Home
- npm 6.12.1
- Git bashでコマンド実行
Reactのツールでビルド
React/JSXを使用するときは，ソースコードをあらかじめコンパイルしておくのが一般的です．
ここでは，React/JSXのコンパイル環境を整える方法を紹介します．
React/JSXのコンパイル環境を作る
create-react-appというアプリを使ってコンパイル環境を構築します．
これはFacebookが用意しているアプリです．
以下のコマンドでcreate-react-appをグローバルインストールします．
$npm install -g create-react-app
次に，このツールを利用したプロジェクト(sample1)を作成します．
作業ディレクトリの直下にsample1というフォルダが生成されます．
$create-react-app sample1
Creating a new React app in C:\Users\Let-create-ReactApp\src\ch2\sample1.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
・・・略・・・
We suggest that you begin by typing:
cd sample1
npm start
Happy hacking!
次に，sample1のディレクトリに移動して，npm startと入力してアプリを起動します．
//作業ディレクトリを表示
$pwd
C:\Users\Let-create-ReactApp\src\ch2\
//sample1というフォルダが直下にあることを確認
$ls
sample1/
$ch sample1
$npm start
> sample1@0.1.0 start C:\Users\Let-create-ReactApp\src\ch2\sample1
> react-scripts start
・・・略・・・
Compiling...
Compiled with warnings.
./src/App.js
Line 2:8: 'logo' is defined but never used no-unused-vars
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
Compiling...
Compiled successfully!
Windowsのネイティブ環境で実行している場合には，Webブラウザが起動し，Reactのひな型が以下のように表示されます．
create-react-app sample1を実行するとき，カレントディレクトリに以下のフォルダが生成されます．
-
node_modules: インストールされたNode.jsのモジュールが存在 -
src:コンパイル前のソースコードが存在 -
public:index.htmlのひな型となるファイルが存在
srcディレクトリにあるファイルを編集して保存すると，ファイルの変更を自動的に検知して，Webブラウザに反映できます．
そのため，リアルタイムで実行結果を確認して，ファイルの編集を行うことができます．
srcの中のApp.jsを下記のように編集して保存すると，自動的にWebブラウザが更新され，以下のような画面が表示されます．
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<h1>こんにちは</h1>
</div>
);
}
export default App;
プログラムが完成し，開発したプログラムをWeb上に公開するためには，以下のコマンドを実行します．
$npm run build
これにより，sample1フォルダ直下にbuildというフォルダが生成されます．
そのフォルダ以下に各種ファイルが圧縮した状態で生成されます．
ローカル環境でうまくビルドされたかを確認するには，Webサーバが必要になります．
以下のようにコマンドを実行してserveコマンドをインストールします．そしてserve -s buildを実行すると，Webサーバが起動するので，指示されたURLにWebブラウザでアクセスすると，実行状態を確認できます．
$npm install -g serve
$serve -s build
INFO: Accepting connections at http://localhost:5000
Webブラウザでhttp://localhost:5000でアクセスします．
まとめ
create-react-appで環境を整えると，リアルタイムで変更が反映され，エラー表示もわかりやく，リソース様にビルドするのも容易です．