React 入門 (1) ~ 基本環境構築 ~

2018年度版、React、webpack、Babelのセットアップ手順をアップデートしてみた - Qiita

これをベースに入門してみる。 そんなに引っかかることがなく入門できた。

プロジェクトの初期化

$ npm init -y

必要パッケージのインストール

$ npm install --save react react-dom
$ npm install --save webpack
$ npm install --save webpack-cli

package.json に build タスク追加

{
  "scripts": {
    "build": "webpack --mode=production"
  },
}

babel のインストール

$ npm install --save babel-loader @babel/core
$ npm install --save @babel/preset-env @babel/preset-react

webpack.config.js の追加

module.exports = {
  module: {
    rules: [
      {
       test: /\.m?js$/,
       exclude: /(node_modules|bower_components)/,
       use: {
         loader: 'babel-loader',
         options: {
           presets: ['@babel/preset-env']
         }
       }
      }
    ]
  }
}

webpack-dev-server のインストール

$ npm i --save webpack-dev-server
$ npm i --save html-webpack-plugin html-loader

webpack.config.js の修正

const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
       test: /\.m?js$/,
       exclude: /(node_modules|bower_components)/,
       use: {
         loader: 'babel-loader',
         options: {
           presets: ['@babel/preset-env']
         }
       }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }

    ]
  },

  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
}

package.json の修正

  "scripts": {
    "build": "webpack --mode=production",
    "start": "webpack-dev-server --open --mode=production"
  },

.babelrc の作成

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

src/index.html の作成

<!DOCTYPE html>
<html lang="ja">
    <head>
       <meta charset="utf-8">
       <title>aaa</title>
   </head>
    <body>
        <div id="root"></div>
    </body>
</html>

src/index.js の作成

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

ReactDOM.render(
  <div>Hello React</div>,
  document.getElementById("root")
)

成果はここにアップした GitHub - bamchoh/react-study

ここから拡張する場合は、上記リポジトリをコピーしたあと

> npm install
> npm run build
> npm start

で復元したあと、拡張していけばいいのかなと思っている。