React を Create React App から使う方法

cliをinstall

create-react-appを使ってするのかな？

npm i -g create-react-app
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
+ create-react-app@3.0.1
added 91 packages from 45 contributors in 8.604s

フォルダ作成

~/development
❯ npx create-react-app my-app

Creating a new React app in /Users/tobashunsuke/development/my-app

~~中略~~

~/development 35s
❯ cd my-app

Serve

サーブしてみる。

~/development/my-app master
❯ yarn start

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.53.28:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

react
react

できた！

package.json

reactとreact-domは見たことあったけど、react-scriptsは何だろう？

"dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },

react-scriptsは、Create React Appを動かすためのコマンド集なんだね。@vue/cli-serviceのような感じかな。

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

それにしてもejectって何これ？？？
とりあえずやってみる。

~/development/my-app master
❯ yarn eject help
yarn run v1.9.2
$ react-scripts eject help
NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

? Are you sure you want to eject? This action is permanent. Yes
Ejecting...

package.jsonを見てみるとめっちゃ増えてる！！！使うときは気をつけたい。

"dependencies": {
    "@babel/core": "7.4.3",
    "@svgr/webpack": "4.1.0",
    "@typescript-eslint/eslint-plugin": "1.6.0",
    "@typescript-eslint/parser": "1.6.0",
    "babel-eslint": "10.0.1",
    "babel-jest": "^24.8.0",
    "babel-loader": "8.0.5",
    "babel-plugin-named-asset-import": "^0.3.2",
    "babel-preset-react-app": "^9.0.0",
    "camelcase": "^5.2.0",
    "case-sensitive-paths-webpack-plugin": "2.2.0",
    "css-loader": "2.1.1",
    "dotenv": "6.2.0",
    "dotenv-expand": "4.2.0",
    "eslint": "^5.16.0",
    "eslint-config-react-app": "^4.0.1",
    "eslint-loader": "2.1.2",
    "eslint-plugin-flowtype": "2.50.1",
    "eslint-plugin-import": "2.16.0",
    "eslint-plugin-jsx-a11y": "6.2.1",
    "eslint-plugin-react": "7.12.4",
    "eslint-plugin-react-hooks": "^1.5.0",
    "file-loader": "3.0.1",
    "fs-extra": "7.0.1",
~~省略~~

参考文献