Reactの環境構築記事は沢山存在しているが、数年前の記事そのままでやっても、どこかしらでエラーがでてしまい上手くいかなかったりする。
自分用に最新版を作ってみた。
参考記事(2018年)：https://qiita.com/olt/items/11eb99a8961007ceb52f
ファイル構成は以下の通り
react_app/
├ package.json
├ webpack.config.js
├ index.html
├ App.js
アプリケーションディレクトリの作成
react_appという名前のディレクトリ上で作業を行う
mkdir react_app
react_appへ移動する
cd react_app
package.jsonを作成
npm init -yで、多くの項目がデフォルト値に設定された状態のpackage.jsonが作成できる。
package.jsonファイルを作成
package.json
{
"name": "react_app",
"version": "1.0.0",
"description": "",
"main": "App.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"html-webpack-plugin": "^5.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@babel/preset-env": "^7.18.6",
"@babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
},
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
}
package.jsonファイルでdependencyとdevDependency内に書いたパッケージをnpm installコマンドでまとめてインストールする。
terminal
npm install
webpackの作成
webpack.config.jsファイルを作成する
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'App.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
devServer: {
port: 3000,
static: {
directory: path.resolve(__dirname, "./dist"),
}
},
resolve: {
modules: [path.resolve(__dirname, "src"), "node_modules"],
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({template: './index.html'})
]
};
webpack-dev-serverのバージョンによってdevServerの部分の書き方が違ってくるので注意。（実際v3以前ではcontentBaseが使えるのに対して最新版のv4では使えない）
index.html, App.jsの作成
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
</body>
</html>
App.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
アプリケーションのビルド
npm run build
成功すれば、webpack 5.73.0 compiled successfully in 1298 msというメッセージが表示され、distフォルダにindex.htmlとbundle.jsが作成されている。
アプリケーションの実行
npm start
webpack 5.73.0 compiled successfully in 1565 msというメッセージが表示されていたら成功。
http://localhost:3000/にアクセスしてHello, world!と表示される。
