エンジニアリング

へたれエンジニアがReact使うための周辺準備をしてみた

どーもへたれエンジニアです。 お仕事でやっているシステムのフロントエンドが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をやっていかないと分からなかった
ざっくり状態みたいなものはいろんなところにあるとつらたんだから集約管理しデータの流れを1方向にしていくよみたいな話で抑えている

周辺準備

前提

  • Atomをエディタとして使う
  • node.jsとGitはインストール済

構成管理のためにyarnをインストール

yarn
brew install yarn
yarn --version

コンパイル用のwebpack(dev-serverはローカルサーバー) トランスコンパイルのためのbabel などをいれる

yarn init
yarn add webpack webpack-dev-server babel-core babel-loader babel-preset-react babel-preset-es2015
./node_modules/.bin/webpack-dev-server #これでサーバーが動く

静的解析がないとしょーもないミスをするのでLintをいれる

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

scssを使えるようにすると何かとCSSを書く時に便利なのでもろもろ必要なものをいれる

yarn add node-sass style-loader css-loader sass-loader import glob-loader extract-text-webpack-plugin

ここでReactをいれる

yarn add react react-dom

これでAtomですいすい書ける感じになりました

スクリーンショット 2018-12-24 14.58.15

最後に

いやぁ・・・・jsのエコシステムは日進月歩で変わっていく上に、ダイナミックに構造が変わるのでついていくのが辛いです・・・・orz