react 入門


yarn init
yarn add webpack webpack-dev-server babel-core babel-loader babel-preset-react babel-preset-es2015

start コマンド
node_modules/.bin/webpack-dev-server

コンパイルコマンド
node_modules/.bin/webpack


静的解析
yarn add eslint eslint-plugin-react
node_modules/.bin/eslint --init
npmで消えたフォルダをyarnで入れ直す
yarn install

実行
node_modules/.bin/eslint src/index.js

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


yarn add react@15.6.1 react-dom@15.6.1
(version古いかも)

axiosはGETやPOSTなど、様々なHTTPリクエストを投げることができるメソッド
yarn add axios

PropTypesは非推奨だからこれを使う
yarn add prop-types
import PropTypes from 'prop-types';

ソート用パッケージ
yarn add lodash
import _ from 'lodash';

1.モックをComponentに分割する
2.必要な情報を洗い出す
3.各情報をどのComponentのstateに詰めるか、どういうpropsで渡すか決める
4.ダミーデータでのComponent作成
5.実際のデータを流し込む

Component用ファイルはもらったデータをもとにhtml生成するだけ
Repositoryはデータ生成

ルーティング設定
yarn add react-router-dom
クエリ
yarn add query-string

redux install
yarn add redux react-redux redux-devtools


storeをsubscribeするのがcontainer
viewのパーツがcomponents

react context
一番親のcomponentで定義した変数をグローバル変数のように使える