react.js
reactjs
webpack
React
babel

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

More than 1 year has passed since last update.


はじめに

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


参考

https://github.com/facebookincubator/create-react-app