React Hands-on

目的

Create React Appを使ったハンズオン

前提

ソフトウェア	バージョン	備考
node	8.10.0
docker	17.06.2
docker-compose	1.21.0
vagrant	2.0.3

構成

1. 構築
2. 配置
3. 運用
4. 開発

構築

開発用仮想マシンの起動・プロビジョニング

• Dockerのインストール
• docker-composeのインストール

vagrant up
vagrant ssh

開発パッケージのインストール

• nvmのインストール
• Node.jsのインストール

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.3/install.sh | bash
source ~/.bashrc 
nvm install v8.10
nvm alias default v8.10

⬆ back to top

配置

AWS認証設定

cd /vagrant/sam-app
cat <<EOF > .env
#!/usr/bin/env bash
export AWS_ACCESS_KEY_ID=xxxxxxxxxxxx
export AWS_SECRET_ACCESS_KEY=xxxxxxxxxx
export AWS_DEFAULT_REGION=us-east-1
EOF

アクセスキーを設定したら以下の操作をする

source .env
aws ec2 describe-regions

サイトのデプロイ

package.jsonにnpm-scriptを追加する

"config": {
  "s3BucketName": "react-hands-on",
  "region": "us-east-1"
},
"scripts": {    
    "web:create": "aws s3 mb s3://$npm_package_config_s3BucketName --region $npm_package_config_region && aws s3 website s3://$npm_package_config_s3BucketName/ --index-document index.html --error-document error.html",
    "web:deploy": "npm run build && aws s3 sync build/ s3://$npm_package_config_s3BucketName --region $npm_package_config_region --grants full=uri=http://acs.amazonaws.com/groups/global/AllUsers",
    "web:site": "echo http://$npm_package_config_s3BucketName.s3-website-$npm_package_config_region.amazonaws.com",
    "web:open": "open http://$npm_package_config_s3BucketName.s3-website-$npm_package_config_region.amazonaws.com",
    "web:destroy": "aws s3 rb s3://$npm_package_config_s3BucketName --region $npm_package_config_region --force",
  },

以下のスクリプトを実行する

npm run web:create
npm run web:deploy
npm run web:site

⬆ back to top

運用

サイトのデプロイ

npm run web:deploy

サイトの削除

npm run web:destroy

⬆ back to top

開発

アプリケーションのセットアップ

create-react-appをインストール

npm install -g create-react-app

新規アプリケーションの作成

cd /vagrant
create-react-app react-app
cd react-app
npm start

http://192.168.33.10:3000に接続して確認する

ESLintのセットアップ

cd /vagrant/react-app
npm install eslint --save-dev
npm install --dev eslint-plugin-compat

eslint-config-airbnbのセットアップ

cd /vagrant/react-app
npx install-peerdeps --dev eslint-config-airbnb
npx eslint --init
cat <<EOF > .eslintrc.json
{
  "extends": [
    "airbnb",
    "plugin:flowtype/recommended"
  ],
  "plugins": [
    "flowtype",
    "compat"
  ],
  "rules": {
    "react/jsx-wrap-multilines": 0,
    "eol-last": 0,
    "function-paren-newline": 0,
    "jsx-a11y/no-redundant-roles": 0,
    "jsx-a11y/anchor-is-valid": 0,
    "react/jsx-filename-extension": 0
  },
  "env": {
    "browser": true,
    "jest": true
  },
  "settings": {
    "polyfills": ["fetch"]
  }
}
EOF

package.jsonにnpm-scriptを追加する

"scripts": {
    "lint": "eslint src --ext .js,.jsx"
  },

lintコマンドを実行する

npm run lint

StyleLintのセットアップ

npm install --dev stylelint stylelint-scss stylelint-config-standard
cat <<EOF > .stylelintrc.json
{
  "plugins": [
    "stylelint-scss"
  ],
   "extends": "stylelint-config-standard"
}
EOF

package.jsonにnpm-scriptを追加する

"scripts": {
    "lint:css": "stylelint ./src"
  },

lintコマンドを実行する

npm run lint:css

Flowのセットアップ

npm install --dev flow-bin babel-preset-flow babel-eslint eslint-plugin-flowtype flow-typed
npx flow init
npx flow-typed install
cat <<EOF > .flowconfig
[ignore]
.*/node_modules/.*

[include]

[libs]
/type-def-libs

[lints]

[options]
suppress_comment= \\(.\\|\n\\)*\\flow-disable-next-line

[strict]
EOF

package.jsonにnpm-scriptを追加する

"scripts": {
    "flow": "flow ./src"
  },

flowコマンドを実行する

npm run flow

コードカバレッジのセットアップ

package.jsonにnpm-scriptを追加する

"scripts": {    
    "coverage": "npm test -- --coverage"
  },

Enzymeのセットアップ

npm install -D enzyme react-test-renderer

Reduxのセットアップ

npm install -S redux react-redux

React Routerのセットアップ

npm install -S react-router-dom react-router

React Bootstrapのセットアップ

npm install -S react-bootstrap react-router-bootstrap

Redux middlewareのセットアップ

npm install --save redux-logger redux-thunk

⬆ back to top

参照

• nvmを使ったNode.jsのインストール&バージョンアップ手順
• Create React App
• ESLint
• stylelint
• Deploying create-react-app to S3 and CloudFront
• TypeScript React Starter
• React Router
• React Bootstrap
• Redux Thunk
• Reduxさわってみたのでメモ 【middleware, ログ、非同期処理】
• 21 Creative & Easy To Customize Free Error Page Templates 2018
• Handling 404 pages (catch all routes) with React Router v4