公式ツールを利用して簡単にReactの開発環境を構築する

はじめに

Reactの開発環境を構築するとき、
Webpack,Babel等々を個別にインストールする形で
オリジナルの開発環境を整えてもいいけど、
いまは、Facebook公式のCreate React Appが提供されているので、それを利用するととっても簡単。

手順

create-react-appコマンドのインストール

npm install -g create-react-app

これで「create-react-app」コマンドが使えるようになる。

プロジェクト作成

create-react-app xxxx　　　（xxxxは任意の名前）

ちょこっと時間かかるけど、作成完了すると、
以下のようなディレクトリ構成ができあがる。

xxxx
├── README.md
├── index.html
├── node_modules
├── package.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── favicon.ico
    ├── index.css
    ├── index.js
    └── logo.svg

package.jsonはこんな感じ。

package.json

{
  "name": "study-meeting-search",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.4.3"
  },
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

一見、webpackとかbabelとかeslintが無いように見えるけど、
実は「react-scripts」というのがラップしてくれていて、
これらの設定は、「/node_modules/react-scripts/config」の中にある。

/node_modules/react-scripts/config

config
├── babel.dev.js
├── babel.prod.js
├── env.js
├── eslint.js
├── flow
│   ├── css.js.flow
│   └── file.js.flow
├── jest
│   ├── CSSStub.js
│   ├── FileStub.js
│   └── transform.js
├── paths.js
├── polyfills.js
├── webpack.config.dev.js
└── webpack.config.prod.js

参考