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
で復元したあと、拡張していけばいいのかなと思っている。