いつになったらRedux入門できるの?(1)create-react-app

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

React+Reduxが有名らしい。

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

http://redux.js.org/
image

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

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

っていうか、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入門(実装編)」を写経してみる。

(1)create-react-appのインストール

image image

(2)ひながたの作成

だいぶ時間がかかる

image image

(3)アプリの起動確認

image

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

image

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

(4)Reduxのインストール

package.jsonの変更

image

image

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

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

(5)Containerの作成

src/index.js

image

src/containers/CalculatorContainer.js

image

npm start

ドキドキ、、、がっくし

image image

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

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

image image

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

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

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

を写経していきたい。

関連記事
Count per Day
    Popular Posts
    スポンサーリンク

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする