ITに頼って生きていく

1. React中途半端

Reactを触ってはみたものの、Component間の通信とは状態管理とか、そのままでは使いづらい。 Reduxを合わせて一緒に使わないと、ちょっと複雑なApplicationは作りづらい。。。

ってことで、React+Reduxを使ってみたいと思います。

2. 用意するもの

2.1 開発実行環境

1. Node.js
   • 説明不要
2. npm
   • 説明不要
3. create-react-app
   • Facebook謹製の、React環境構築パッケージ

ってことで、globalにインストール。

# npmとyarnのglobal install
npm install yarn npm -g
# Facebook謹製のプロジェクトテンプレート開始ツール(?)
npm install -g create-react-app

2.2 開発デバッグ環境

1. Visual Studio Code
   • plug-in : Debugger for Chrome
2. Google Crome
   • plug-in : React Developer Tools

2.3 ReactとReduxの環境

1. Reactのひな形を作成
   • create-react-appコマンドで作成する
2. Reduxなどを追加
   • module追加

# Reactひな形作成：結構時間がかかる
create-react-app react_project
# 開発作業用のリポジトリディレクトリへ移動
cd react_project
# redux用のモジュールインストール
npm install react-redux redux

以上！

念のため、nodeによるwebサーバが立ち上がるかどうか確認しておく。

# webサーバ起動（webappと言ってもよい）
yarn start
# デプロイするときに実行
# yarn build

4. チュートリアル開始

基本的には、ここを読みました。 わかりやすかったと思います。

さらなる練習問題として、去年、Vue.jsで開発した義理チョコ判定AIのフロントエンドを、React+Reduxで実装しなおしてみようと思います。

X. 参考にしたサイト

• 電卓アプリで学ぶReact/Redux入門(実装編)
  • 以前のversionと記述方法などが結構違うため、今はこんなだよ！と教えてくれました。

以上！