新しく React、Redux のプロジェクトを作ろうとしたが、ビルドがうまく行かなかった

調査した結果、なんとか動くものにはなったので、Babel、React、Redux、Webpack の組み合わせで使うためのパッケージについて残す

使用するパッケージ

新規でプロジェクトを立ち上げることもあり、主要技術のバージョンは以下になる

Babel

babel は v7 から指定されたパッケージの書き方に変わったものがある

What is the difference between babel-core and @babel/core?
Upgrade to Babel 7 · Babel

今回使う babel 関連のパッケージに関しては以下のものを使う

• 最新版の babel
  • @babel/core
• 出力する ECMAScript のバージョン、polyfill の指定のためのプリセット
  • @babel/preset-env
• React 用のプリセット
  • @babel/preset-react

webpack と Babel の基本を理解する(2) ―Babel 編― - Qiita
@babel/preset-env · Babel

npm でインストールする場合、以下のコマンドになる

npm i -D @babel/core @babel/preset-env @babel/preset-react

インストールが終わったらプロジェクトのルートに .babelrc を生成して以下のように設定する

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

Webpack

• Babel 使って、JavaScript ファイルをトランスパイリングするためのパッケージ
  • babel-loader
• webpack で生成下 JavaScript/CSS などを埋め込んだ HTML を生成するために使うパッケージ
  • html-webpack-plugin
• webpack を使うためのパッケージ
  • webpack
• webpack をコマンドライン上で使うためのパッケージ
  • webpack-cli
• ローカルで開発用のサーバーを立ち上げるために使うパッケージ
  • webpack-dev-server

babel-loader | webpack
HtmlWebpackPlugin | webpack
webpack で html ファイルも出力する - emahiro/b.log
Command Line Interface | webpack
DevServer | webpack

npm でインストールする場合、以下のコマンドになる

npm i -D babel-loader html-webpack-plugin webpack webpack-cli webpack-dev-server

インストールが終わったらプロジェクトに webpack.config.js を生成して以下のように設定する

const HtmlWebPackPlugin = require("html-webpack-plugin")
const path = require("path")

const htmlWebpackPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html",
})

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve("dist"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  plugins: [htmlWebpackPlugin],
}

React、Redux

• React を使うためのパッケージ
  • react
• React と DOM をつなげるためのパッケージ
  • react-dom
• React と Redux をバインディングするためのパッケージ
  • react-redux
• React のルーティング用のパッケージ
  • react-router-dom
• Redux を使うためのパッケージ
  • redux

ReactDOM の render()と React.Component の render()の違いを理解する - Qiita
reactjs - React vs ReactDOM? - Stack Overflow
ReactDOM – React

ちなみに、 react-router-dom は、 v4 から react-router で使っていたコアな機能を使いつつ、Link や BrowserRouter のような新しい API が使える

react-router と react-router-dom の違い - Qiita
what’s the diff between react-router-dom & react-router? · Issue #4648 · ReactTraining/react-router

npm でインストールする場合、以下のコマンドになる

npm i -S react react-dom redux react-redux react-router-dom

後は、React、Redux で開発をしていく