初心者の方がReactを学習し始めてから、必ず最初に躓くポイントは開発環境の設定です。
しかし、Facebookが提供しているCreate React Appを使用すれば、誰でも簡単にReactの環境構築をすることが可能です。

今回は、react-scriptsで環境構築からブラウザへの表示までの方法を解説しています。

ReactのScriptsコマンドとは？

Reactを「出来るだけシンプル かつ簡単に環境構築」してくれる便利なコマンドです。

create-react-appと比べて、最低限のファイルだけを生成します。
そのため、直ぐに環境構築が完了するメリットがあります。

create-react-app

Reactの環境構築を簡単に行う方法として「create-react-app」が代表的なコマンドとして用意されています。
しかし、「create-react-app」は必須箇所以外に、自動的に大半の方には使わないファイルを大量に自動生成してしまいます。

※用途によっては無駄となるファイルが生成される意味になります。必ずしも無駄とは限りません。使用目的にあった方法を最終的には選択してください。
もし、Reactを練習用に環境構築を行いたいのであれば「react-scripts」にて構築する方法も視野に入れておくとよいでしょう。

操作手順

Reactを構築したいディレクトリに移動してreact-scriptsコマンドを入力します。

npmの場合
$ npm i react-scripts
$ npm i react react-dom

yarnの場合
$ yarn add react-scripts

npmの操作に必要な下記のコマンドを「package.json」に追記します。
package.jsonに追記してください。

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "test": "react-scripts test"
  }

次に、htmlファイルとjsファイルを作成します。下記コマンドをターミナルで実行してください。

$ mkdir -p public src
$ touch public/index.html 
$ touch src/app.js

package.jsonに追記した「npm start」をターミナル実行すると開発サーバが起動されます。

次にブラウザに表示するための準備を行います。
先程作成したindex.htmlに下記を追記します。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>sample</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

ここでポイントなのは、HTMLにJSを読み込む記述は必要ありません。
react-scriptsが自動的に読み込む処理を行ってくれるためです。

次に、JSファイルに下記を追記します。
これでReactを使えるように呼び出しています。

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <p>TEST・TEST</p>,
  document.getElementById('root')
);

最後に開発サーバを起動して「TEST・TEST」がブラウザに表示されていれば完成です。

$ npm start