React を使うにあたり, というか最近の JS の開発を行う場合 WebPack + Babel の環境を用意して, さらに JS フレームワークを追加し設定を書いて…といった煩雑な手続きが必要です。

React の場合 create-react-app という便利コマンドでサクッと開発環境を作ることができます。ただし, create-react-app でプロジェクトを始めた場合, 余計なファイルを同時に作ってしまい練習用にはお節介がすぎる感があります。

そこで create-react-app で採用されている react-scripts を使って必要なところだけ楽をする。をしてみました。

手順

初期化を適当に実行。

$ npm init

npm で必要なパッケージを追加します。

$ npm i -D react-scripts
$ npm i react react-dom

npm に必要なコマンド定義を追加します。

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

react-scripts には特定のディレクトリやファイルが必要らしいので最低限作ります。

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

package.json に追加した start を実行すると public/index.html を index として開発サーバが起動されます。このファイルを編集します。

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

この HTML には JS の読み込み処理は追加しなくていいらしい。react-scripts が面倒を見てくれるようです。

あとは src/index.js に React のコードを追加し開発サーバを起動すれば完了です。

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

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

$ npm start

サンプル

試しに簡単なフォームを作って見ました。 https://github.com/yuya-matsushima/react-form-sample

最後に

react-scripts は結構いろいろやってくれるようで便利です。やってみた結果としては素直に create-react-app を使う方針の方が楽そうです。

React (というか最近のフロントエンド) は環境を作るのが面倒で敬遠しがちだったのですが, 簡単に始める方法があるようなので頑張っていきたいと思います。