2016年12月20日

2016年12月現在、Javascriptによるフロントエンド開発では、どうやら、

React+Reduxが有名らしい。

https://facebook.github.io/react/

http://redux.js.org/

以下の本を写経してみようと試みたが、挫折。

なんかうまくいかない。ソースコードはダウンロードできないの？

っていうか、Reduxは、開発環境構築するのに手間がかかりすぎ。

こんなの流行るわけないじゃん！って思っていたら、やっぱりありました。

一発でReact+Reduxの環境構築。

create-react-app

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

使い方は、以下にあった！

Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する
chibicode 2016年07月24日に更新
http://qiita.com/chibicode/items/8533dd72f1ebaeb4b614

電卓アプリで学ぶReact/Redux入門(実装編)
nishina555
2016年11月22日に更新
http://qiita.com/nishina555/items/9ff744a897af8ed1679b

（環境）
Windows8.1
Node.js v6.9.1
Visual Studio Code

上記のサイト「電卓アプリで学ぶReact/Redux入門(実装編)」を写経してみる。

（１）create-react-appのインストール

npm install -g create-react-app

 

（２）ひながたの作成

create-react-app redux-calculator

だいぶ時間がかかる

　

（３）アプリの起動確認

cd redux-calculator
npm start

自動的にブラウザが起動し、 http://localhost:3000 が開かれる

なんか、Welcome to React の上の青いマークがくるくるまわっている。。。

（４）Reduxのインストール

package.jsonの変更

npm install

ここから電卓アプリを作成

containers
components
actions
utils
reducers 　　　何それ、おいしいの？

（５）Containerの作成

src/index.js

src/containers/CalculatorContainer.js

npm start

ドキドキ、、、がっくし

　

あ、<CalculatorContainer />  の後の、「,」を書き忘れていた。これ、よく忘れます。。。

index.js を書き換えて保存すると、自動的に、

　

一応、電卓っぽいのが表示された。

とりあえず、ここまで。次回は、引き続き、

http://qiita.com/nishina555/items/9ff744a897af8ed1679b

を写経していきたい。