Create React App 読解特急

Create React App 読解特急 @mqtsuo02 date: 2017-06-03

自己紹介 Matsuo Obu @mqtsuo02 http://46times.lol

Create React App はいいぞ！

もくじ » Create React Appとは？ » インストールからビルドまで » package.jsonを見てみる »
react-scriptsの中身 » 追加したいライブラリ » 所感

Create React App とは？ » Reactプロジェクトの雛形を作成してくれるツール » 公式が提供している (Facebook製) »
Webpack, Babel, ESLint, Jest 等が入る (๑•﹏•) < いい感じに素早く環境構築できる！ ※ちなみに、create-react-native-app というのもある

インストールからビルドまで (๑•﹏•) < npm install -g create-react-app (๑•﹏•) < create-react-app
<project-name> (๑•﹏•) < cd <project-name> (๑•﹏•) < npm start (๑•﹏•) < npm test (๑•﹏•) < npm run build ➔ ツールのインストール ➔ プロジェクト作成 ➔ change directory ➔ ローカルサーバ起動 ➔ Jest (テスト)の実行 ➔ ビルド

package.json を見てみる "dependencies": { "react": "^15.5.4", "react-dom": "^15.5.4" }, "devDependencies":
{ "react-scripts": "1.0.7" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } ➔ React, React DOMはインストール時最新版 ➔ react-scriptsに便利なライブラリがまとめられている ➔ すぐに使えるscript

react-scripts の中身 "autoprefixer": "7.1.0", "babel-core": "6.24.1", "babel-eslint": "7.2.3", "babel-jest": "20.0.3",
"babel-loader": "7.0.0", "babel-preset-react-app": "^3.0.0", "babel-runtime": "6.23.0", "case-sensitive-paths-webpack-plugin": "1.1.4", "chalk": "1.1.3", "css-loader": "0.28.1", "dotenv": "4.0.0", "eslint": "3.19.0", "eslint-config-react-app": "^1.0.4", "eslint-loader": "1.7.1", "eslint-plugin-flowtype": "2.33.0", "eslint-plugin-import": "2.2.0", "eslint-plugin-jsx-a11y": "5.0.3", "eslint-plugin-react": "7.0.1", "extract-text-webpack-plugin": "2.1.0", "file-loader": "0.11.1", "fs-extra": "3.0.1", "fsevents": "1.0.17", "html-webpack-plugin": "2.28.0", "jest": "20.0.3", "object-assign": "4.1.1", "postcss-flexbugs-fixes": "3.0.0", "postcss-loader": "2.0.5", "promise": "7.1.1", "react-dev-utils": "^3.0.0", "react-error-overlay": "^1.0.7", "style-loader": "0.17.0", "sw-precache-webpack-plugin": "0.9.1", "url-loader": "0.5.8", "webpack": "2.6.1", "webpack-dev-server": "2.4.5", "webpack-manifest-plugin": "1.1.0", "whatwg-fetch": "2.0.3"

react-scripts の中身 (実現していること) » Webpack + Babel を使用したビルド » モダンなJS,
CSSのトランスパイル » CSS in JS » ESLint, Jest を使用した検証 » ファイル操作 » etc ...

追加していきたいライブラリ » Redux系ライブラリ » Material UI » React Helmet »
React Router » Prettier ➔ Redux使う ➔ UIパーツのセット ➔ <head>をJSで動的に書く ➔ ルーティング ➔ コード整形

所感 » Create React App はいいぞ！ » ビルド関連のライブラリで悩まない » 公式がサポートしている安心感
» 英語を読むいい機会 » ライブラリの最新情報を追うスタンス大事 (๑•﹏•) < カスタマイズしていく楽しさ！

おわり。

Create React App 読解特急

Create React App 読解特急

Matsuo Obu

More Decks by Matsuo Obu

Other Decks in Programming

Featured

Transcript