はじめに
React流行ってるみたいだけど
なにから手を付けていいかよく分からないひと(＝完全に自分)向け
newtriks/generator-react-webpackなるものを見つけたので
readmeなど見ながら調べ調べやっていきます。
導入
何も考えずに下記を実行
npm install -g generator-react-webpack
アプリケーションの作成
何も考えずに下記を実行
yo react-webpack sample
react-routerrを含むか聞かれる
アーキテクチャの有無を聞かれるので分からないままFluxを選択
その後スタイルの形式(SCSS、LESSなど)を聞かれる
色々あってアプリが吐き出される
├─node_modules
│ reactはじめいろいろ
├─src
│ ├─components
│ │ main.js
│ │ SampleApp.js ←デフォルトのコンポーネントファイル
│ ├─dispatcher
│ │ SampleAppDispatcher.js
│ ├─images
│ └─styles
│ favicon.ico
│ index.html
└─test
├─helpers
│ └─react
└─spec
└─components
SampleApp.js
.editorconfig
.gitignore
.jshintrc
.yo-rc.json
Gruntfile.js
karma.conf.js
package.json
webpack.config.js
webpack.dist.config.js
Componentの追加
何も考えずにｒｙ
yo react-webpack:component menu
styles/Component
create src\components\Menu.js
create test\spec\components\Menu.js
create src\styles\Menu.scss
テストとスタイルも作ってくれる
これがコンポーネントベースの開発というものか、、、
ビルド
webpackのビルドタスクがGruntにバンドルされているので下記を実行
grunt build
するとdistという公開層のディレクトリが生成され、
src以下のすべてのファイルがバンドルされる
│ favicon.ico
│ index.html
│
├─assets
│ 42092f929161dae9c08a21bfb46ece4d.png
│ main.js
│
└─images
yeoman.png
まとめ
actionやstoreもジェネレータがあるので、
とりあえず公式見ながら探り探りやってくと雰囲気はつかめてくるんじゃないかと思います(たぶん)
案の定ごく簡単な紹介にとどまってしまいましたが
私もこれで何か作ってみようと思います(＾＾；