React入門 〜 React Router編(1)

PS C:\Users\pera0\react-tutorial> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (react-tutorial)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: omote
license: (ISC)
About to write to C:\Users\pera0\react-tutorial\package.json:

{
"name": "react-tutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "********",
"license": "ISC"
}

Is this OK? (yes) yes

npm install --save-dev　ローカルインストールするためのパラメーターです。

-gがグローバルインストールのパラメーター。

ローカルインストールの場合は、カレントディレクトリにnode_modulesディレクトリが作られ、そこにパッケージがインストールされます。

『Webpack』とは、JavaScriptモジュールを束ねることができるツールのこと。
Webpackはこれらのリソース(HTML、SVG、JSX、CSS、JavaScript、PNG、JPG)を1つに束ねてくれるので、開発する際にリソースを扱いやすくなります。

Webpackを使うと、結合対象のファイルを自動で検出し追加してくれる

手動によるミスの発生や不適切な順序でファイルが実行されてしまう心配がなくなります。
依存関係のあるJavaScriptのモジュールを解決（静的ファイルを生成する）
読み込み順を気にせず、1回のリクエストで済むため効率的

JavaScriptモジュールをブラウザで扱える形に簡単に変換できる

ローダやプラグインなどが豊富

モジュールバンドラー

モジュールを束ねる

『モジュールバンドラー』とは、モジュールを束ねるもの。
JSファイルをひとつにまとめること。
モジュールにはアプリケーションに必要な機能が管理されており、必要な時にそれらを呼び出して別のファイルでそれらの機能を使います。

機能が管理されているファイルをたくさん集めて1つに束ねます。
（モジュールバンドラーを使用することで、ファイルの依存関係を解決することができ、リクエスト回数を減らし、可読性の向上、メンテナンスの効率化といったメリットを獲得することができます。）

ローダやプラグイン

ローダを使えば、HTMLやCSSファイルなど、JavaScript以外の複数ファイルをJavaScriptで扱うことができます。

PS C:\Users\pera0\react-tutorial> npm install --save-dev webpack webpack-cli webpack-dev-server
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN react-tutorial@1.0.0 No description
npm WARN react-tutorial@1.0.0 No repository field.

+ webpack-cli@4.7.2
+ webpack-dev-server@3.11.2
+ webpack@5.40.0
added 493 packages from 321 contributors and audited 494 packages in 46.718s

28 packages are looking for funding
run `npm fund` for details

found 1 moderate severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
PS C:\Users\pera0\react-tutorial> dir

ディレクトリ: C:\Users\pera0\react-tutorial

Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2021/06/23 11:41 node_modules
d----- 2021/06/23 4:50 src
-a---- 2021/06/23 11:41 162504 package-lock.json
-a---- 2021/06/23 11:41 334 package.json

PS C:\Users\pera0\react-tutorial> npm install -g webpack webpack-cli
C:\Users\pera0\AppData\Roaming\npm\webpack-cli -> C:\Users\pera0\AppData\Roaming\npm\node_modules\webpack-cli\bin\cli.js
C:\Users\pera0\AppData\Roaming\npm\webpack -> C:\Users\pera0\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
+ webpack-cli@4.7.2
+ webpack@5.40.0
added 123 packages from 155 contributors in 9.516s
PS C:\Users\pera0\react-tutorial> dir

ディレクトリ: C:\Users\pera0\react-tutorial

Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2021/06/23 11:41 node_modules
d----- 2021/06/23 4:50 src
-a---- 2021/06/23 11:41 162504 package-lock.json
-a---- 2021/06/23 11:41 334 package.json

PS C:\Users\pera0> npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\pera0\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\pera0\package.json'
npm WARN babel-loader@8.2.2 requires a peer of webpack@>=2 but none is installed. You must install peer dependencies yourself.
npm WARN pera0 No description
npm WARN pera0 No repository field.
npm WARN pera0 No README data
npm WARN pera0 No license field.

+ @babel/preset-react@7.14.5
+ babel-loader@8.2.2
+ @babel/core@7.14.6
+ @babel/preset-env@7.14.7
added 185 packages from 89 contributors and audited 185 packages in 13.052s

15 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

PS C:\Users\pera0>

PS C:\Users\pera0> npm install --save-dev react react-dom
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\pera0\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\pera0\package.json'
npm WARN babel-loader@8.2.2 requires a peer of webpack@>=2 but none is installed. You must install peer dependencies yourself.
npm WARN pera0 No description
npm WARN pera0 No repository field.
npm WARN pera0 No README data
npm WARN pera0 No license field.

+ react@17.0.2
+ react-dom@17.0.2
added 5 packages from 2 contributors and audited 303 packages in 3.631s

15 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

PS C:\Users\pera0>

var debug   = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path    = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  entry: "./js/client.js",
  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      use: [{
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-react', '@babel/preset-env']
        }
      }]
    }]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js",
    publicPath: '/'
  },
  devServer: {
    historyApiFallback: true
  },
  plugins: debug ? [] : [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

import React from "react";
import ReactDOM from "react-dom";
class Layout extends React.Component {
  render() {
    return (
   <h1>Welcome!</h1>
  }
}
const app = document.getElementById('app');
ReactDOM.render(<Layout/>, app);

ディレクトリ: C:\Users\pera0\react-tutorial

Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2021/06/23 11:45 node_modules
d----- 2021/06/26 12:12 src
-a---- 2021/06/23 11:45 232708 package-lock.json
-a---- 2021/06/23 11:45 520 package.json
-a---- 2021/06/23 15:33 763 webpack.config.js

ディレクトリ: C:\Users\pera0\react-tutorial\src

Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2021/06/23 15:59 js
-a---- 2021/06/23 16:00 1037703 client.min.js
-a---- 2021/06/26 12:12 405 index.html

PS C:\Users\pera0\react-tutorial\src> type index.js

PS C:\Users\pera0\react-tutorial> type .\package.json
{
"name": "react-tutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "omote",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/preset-env": "^7.14.7",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"webpack": "^5.40.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
}
}

PS C:\Users\pera0\react-tutorial> type .\webpack.config.js
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
context: path.join(__dirname, "src"),
entry: "./js/client.js",
module: {
rules: [{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react', '@babel/preset-env']
}
}]
}]
},
output: {
path: __dirname + "/src/",
filename: "client.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
]
};