React環境構築【for mac】

## こんな人向け
- とりあえずReactを触ってみたい人

## 前書き
- この記事は__【mac】__におけるReact環境構築について記載しています
- この記事は[「作りながら学ぶReact入門」](https://www.amazon.co.jp/dp/B07BB96LXJ/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)を参考にしています
- 著者様が最新の導入手順をgithubで更新してくださっているため、もし本記事でうまく行かない場合は、以下のgithubリポジトリも確認してみてください
- https://github.com/yuumi3/react_book

#### それでは、環境構築をやっていきましょう！

## 1 - Node.jsインストール
- Homebrewを使って、Node.jsをインストール

```terminal

$ brew -v
  # Homeberwが入っているか確認、バージョンが表示されればOK

$ brew update
$ brew install nodejs

$ node -v
  # Node.jsが入っているか確認、バージョンが表示されればOK
```

## 2 - npmの確認
- Node.jsをインストールした際に、npmを入っているが念の為確認

```terminal
$ npm -v
  # バージョンが表示されればOK
```
## 3 - Reactインストール用のプロジェクト作成

- Reactをインストールするためのプロジェクトを作成します
- プロジェクト名(フォルダ名)は適当でも問題ないです

```terminal
$ mkdir react_drill
  # react_drillというフォルダを作成

$ cd react_drill
  # react_drillフォルダに移動

$ npm init -y
  # react_drillに、対話形式の答えを全部yesで「package.json」を生成する
```

## 4 - package.jsonを編集する
- 3で作ったpackage.jsonの中身を以下の内容に編集してください

```json
{
  "name": "react_drill",
  "version": "1.0.0",
  "description": "React Drill",
  "private": true,
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "webpack": "webpack -d"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```

## 5 - 必要なnpmパッケージをインストール
- 必要なnpmパッケージをインストールしていきます
- react_drillのディレクトリで以下のコマンドを実行してください

```terminal
$ npm install react react-dom
$ npm install webpack webpack-cli webpack-dev-server --save-dev
$ npm install @babel/core @babel/preset-env @babel/preset-react @babel/cli --save-dev
$ npm install eslint babel-eslint eslint-loader eslint-plugin-react --save-dev
$ npm install css-loader style-loader babel-loader --save-dev
```
## 6 - インストール確認用にReactコードを作成
- 5で一通りReactを動かすためのパッケージをインストールできました
- 6では、簡単なReactコードを作成して実際に動かしてみます

```terminal
# 「react_drill」内に以下のフォルダを作成する

$ mkdir src
$ mkdir public
```
- 次に以下の設定ファイルを作成します

|No|ファイル名と配置場所|
|---|---|
|1|.babelrc|
|2|.eslintrc.json|
|3|webpack.config.js|
|4|public/index.html|
|5|src/index.js|

###### .babelrc

```json
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
```
###### .eslintrc.json

```json
{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "es6": true
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true,
      "jsx": true
    }
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "plugins": ["react"],
  "rules": {
    "no-console": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}
```
###### webpack.config.js

```js
module.exports = {
  entry: {
    app: "./src/index.js"
  },
  output: {
    path: __dirname + '/public/js',
    filename: "[name].js"
  },
    devServer: {
    contentBase: __dirname + '/public',
    port: 8080,
    publicPath: '/js/'
  },
  devtool: "eval-source-map",
  mode: 'development',
  module: {
    rules: [{
      test: /\.js$/,
      enforce: "pre",
      exclude: /node_modules/,
      loader: "eslint-loader"
    }, {
      test: /\.css$/,
      loader: ["style-loader","css-loader"]
    }, {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
     }]
  }
};
```
###### public/index.html

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1" />
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <script type="text/javascript" src="js/app.js" charset="utf-8"></script>
</body>
</html>
```
###### src/index.js

```js
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <h1>Hello, world!!</h1>,
  document.getElementById('root')
)
```
#### これで終了です！いよいよ動かしてみましょう！

## 7 - ブラウザでReactを動かしてみる
- react_drillディレクトリで以下のコマンドを実行してください
- 以下のコマンドで、webpack開発サーバを実行します

```terminal
$ npm start
  # 一番下に「Compiled successfully.」が表示されていれば無事に成功です！
```
#### [http://localhost:8080/](http://localhost:8080/)にアクセスして __Hello, world!!__ が表示されていれば無事成功です！