create-react-appでReactの開発環境を構築する

React/JSXのコンパイル環境を構築するために「create-react-app」というアプリを使います。
以下のコマンドでインストールすることができます。

npm install -g create-react-app

create-react-appを使ってサンプルプロジェクトを作ってみます。
以下のコマンドを実行します。
create-react-app example

すると、必要なモジュールが一気にインストールされます。
インストールすると、ちょっと前まではnpm startのコマンドが表示されてた気がするのですが、yarn startに変わっていました。

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd example
  yarn start

Happy hacking!

Weblioで読み方を調べてみたのですが、カタカナにすると「ョアーン」って感じで発音してて、ちょっとわかりづらいですね。「ヤーン」でいい気がします。

Yarnとnpmの違いについてはこちらの記事がわかりやすいです。
https://www.webprofessional.jp/yarn-vs-npm/

cd example
yarn start

とコマンドを打つと、ブラウザが立ち上がります。

ファイルを編集すると自動的に検知して、ブラウザに反映してくれるため非常に便利です。

たとえば、デフォルトのApp.jsを修正すると、、、

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className='App'>
        <h2>Hello React first App!</h2>
      </div>
    );
  }
}

export default App;

以下のように、ブラウザに反映されます。

次に、yarn buildを実行してみます。
コマンドを実行すると以下のようなbuildディレクトリが作られます。

The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Done in 8.87s.

メッセージにしたがって
serve -s build
を実行すると、URLが表示されます。

 serve -s build

   ┌──────────────────────────────────────────────────┐
   │                                                  │
   │   Serving!                                       │
   │                                                  │
   │   - Local:            http://localhost:5000      │
   │   - On Your Network:  http://192.168.1.10:5000   │
   │                                                  │
   │   Copied local address to clipboard!             │
   │                                                  │
   └──────────────────────────────────────────────────┘

表示されたURLを開くと、Reactアプリケーションがブラウザに表示されました。

次にWebpackを導入していきます。
Webpackとは、複数のモジュールを一つにまとめたファイルを出力するモジュールバンドラです。

GitHubのcreate-react-appにも書かれているように、create-react-appで作られた環境にはWebpackがプリインストールされています。

Get Started Immediately
You don’t need to install or configure tools like Webpack or > Babel.
They are preconfigured and hidden so that you can focus on the code.
https://github.com/facebookincubator/create-react-app

Just create a project, and you’re good to go.

自分でインストールしたい人は

npm install -g webpack

でインストールできます。

create-react-appで作られるdefaultの環境を変更したい人は、

npm run eject

を実行します。
すると、以下のようにログが出力され、configファイルが作成されます。

Copying files into /Users/XXX/Documents/git_repo/examples/react/modern/example
  Adding /config/env.js to the project
  Adding /config/paths.js to the project
  Adding /config/polyfills.js to the project
  Adding /config/webpack.config.dev.js to the project
  Adding /config/webpack.config.prod.js to the project
  Adding /config/webpackDevServer.config.js to the project
  Adding /config/jest/cssTransform.js to the project
  Adding /config/jest/fileTransform.js to the project
  Adding /scripts/build.js to the project
  Adding /scripts/start.js to the project
  Adding /scripts/test.js to the project

(略)

Updating the scripts
  Replacing "react-scripts start" with "node scripts/start.js"
  Replacing "react-scripts build" with "node scripts/build.js"
  Replacing "react-scripts test" with "node scripts/test.js"

Configuring package.json
  Adding Jest configuration
  Adding Babel preset
  Adding ESLint configuration

Ejected successfully!

Please consider sharing why you ejected in this survey:
  http://goo.gl/forms/Bi6CZjk1EqsdelXk1

ここでできたファイルを編集することで、自分なりの開発環境を設定することができます。

試しにconfig/webpack.config.dev.jsを指定してwebpackを実行してみます。

$ webpack --config config/webpack.config.dev.js
/Users/xxx/Documents/git_repo/examples/react/modern/example/config/env.js:12
  throw new Error(
  ^

Error: The NODE_ENV environment variable is required but was not specified.
    at Object.<anonymous> (/Users/xxx/Documents/git_repo/examples/react/modern/example/config/env.js:12:9)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/xxx/Documents/git_repo/examples/react/modern/example/config/webpack.config.dev.js:12:30)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)

「Error: The NODE_ENV environment variable is required but was not specified.」
のように、NODE_ENVが設定されていないことを指摘されたので、確認してみます。

$ node
> process.env.NODE_ENV
undefined

どこにNODE_ENVを定義するのがベストプラクティスなのかわからないので、とりあえずコンソール上で

export NODE_ENV=development

を実行しました。

以下のStackoverflowによると、package.jsonに書くのが正しそうなのですが...。

package.json

"scripts": {
  "start": "set NODE_ENV=development && node app.js"
 }

「process.env.NODE_ENV is undefined」
https://stackoverflow.com/questions/11104028/process-env-node-env-is-undefined

NODE_ENVを指定してから再び

webpack --config config/webpack.config.dev.js

を実行すると、プロジェクトのルートディレクトリ/static/js配下にbundle.jsができました。

yarn startを実行すると、修正した内容が反映されたアプリケーションが立ち上がります。