【React】新しくReactプロジェクトを使うためにインストールしたパッケージ

01-23-2021

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

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

使用するパッケージ

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

パッケージ バージョン
@babel/core 7.12.10
@babel/preset-env 7.12.11
@babel/preset-react 7.12.10
babel-loader 8.2.2
html-webpack-plugin 4.5.1
react 17.0.1
react-dom 17.0.1
react-redux 7.2.2
react-router-dom 5.2.0
redux 4.0.5
webpack 5.16.0
webpack-cli 4.4.0
webpack-dev-server 3.11.2

Babel

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

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 で使っていたコアな機能を使いつつ、LinkBrowserRouter のような新しい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で開発をしていく