どーもへたれエンジニアです。 お仕事でやっているシステムのフロントエンドがReact / Redux で出来ており、「どーせ知らないでしょ？」みたいに煽られるのが（被害妄想）悔しいため勉強することにしました
Reactとは・・・・
https://reactjs.org/
https://qiita.com/naruto/items/fdb61bc743395f8d8faf
- 必要なだけの再描画（仮想DOMのレンダリング）
- Componentベースの画面構築（再利用性があるね
・・・・みたいなものだと受け取った
Reduxとは・・・・
https://redux.js.org/
https://qiita.com/mpyw/items/a816c6380219b1d5a3bf
これ、ある程度Reactをやっていかないと分からなかった
ざっくり状態みたいなものはいろんなところにあるとつらたんだから集約管理しデータの流れを１方向にしていくよみたいな話で抑えている
周辺準備
前提
- Atomをエディタとして使う
- node.jsとGitはインストール済
構成管理のためにyarnをインストール
[shell]
yarn
brew install yarn
yarn –version
[/shell]
コンパイル用のwebpack(dev-serverはローカルサーバー） トランスコンパイルのためのbabel などをいれる
[shell]
yarn init
yarn add webpack webpack-dev-server babel-core babel-loader babel-preset-react babel-preset-es2015
./node_modules/.bin/webpack-dev-server #これでサーバーが動く
[/shell]
静的解析がないとしょーもないミスをするのでLintをいれる
[shell]
yarn add eslint eslint-plugin-react
#./node_modules/.bin/eslint src/index.js ←こんな感じでファイルを指定して利用するだけだと面倒なのでAtomで自動で見れるようにする
#atomのプラグインをコマンドでインストールする apmコマンドのインストールはAtom apmでググれば腐るほどでるので割愛
apm install es6-javascript intentions busy-signal linter-ui-default linter linter-eslin
[/shell]
scssを使えるようにすると何かとCSSを書く時に便利なのでもろもろ必要なものをいれる
[shell]
yarn add node-sass style-loader css-loader sass-loader import glob-loader extract-text-webpack-plugin
[/shell]
ここでReactをいれる
[shell]
yarn add react react-dom
[/shell]
これでAtomですいすい書ける感じになりました
最後に
いやぁ・・・・jsのエコシステムは日進月歩で変わっていく上に、ダイナミックに構造が変わるのでついていくのが辛いです・・・・orz
