React開発環境を作る1

reactを勉強するときに開発環境を作るところでいろいろ躓いたのでまとめていきます。

使用ツール

• webpack4
• babel
• eslint
• css-loader
• style-loader

ツールインストール

npm install

まずはこれを叩いてpackage.jsonを作る。

npm install --save react react-dom

reactとreact-domのインストール

npm install --save-dev webpack webpack-dev-server
npm install --save-dev babel-cli babel-loader babel-preset-env babel-preset-react
npm install --save-dev eslint eslint-loader eslint-plugin-react 
npm install --save-dev css-loader style-loader babel-loader

開発をサポートするツールのインストール
開発で依存するパッケージを使うときは--saveで、開発をサポートするパッケージを使うときは--save-devを使うらしい。

package.json

package.json

{
  "name": "react_",
  "version": "1.0.0",
  "description": "react_",
  "private": true,
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack-dev-server",
    "webpack": "webpack -d"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.13.0",
    "react-dom": "^16.13.0"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.8.7",
    "@babel/preset-react": "^7.8.3",
    "@babel/register": "^7.8.6",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^3.4.2",
    "eslint": "^6.8.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-react": "^7.19.0",
    "style-loader": "^1.1.3",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

できたpackage.jsonにいろいろ付け足したのがこれ
scriptsはnpm startとnpm run buildコマンドを叩いたときにwebpack-dev-serverを起動してくれっていうことを書いている。
npm run webpackを叩いたときはwebpack -dが起動する。
--saveでインストールしたものはdependenciesに--save-devでインストールしたものはdevDependenciesに書かれている。

とりあえず、今日はここまで、
次はそれぞれのツールの解説をしていきます。