react-calendarがnpmなので、npmで環境を作ります。
$ npm init
$ npm install –save-dev webpack webpack-cli webpack-dev-server
$ npm install –save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
ここまでは、これまでやってきた通り
$ npm install –save-dev react react-dom
npm ERR! code ENOSELF
npm ERR! Refusing to install package with name “react” under a package
？？ package.jsonのnameがreactで同じだからインストールできないとのこと
“name”: “react1” に変更して、再度実行
$ npm install –save-dev react react-dom
続いてwebpackの設定
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context:math.josin(__dirname, "src"),
entry: "./js/client.js",
module: {
rules: [{
text: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'babel-loader',
options: {
presents: ['@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}),
]
};
./src/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React</title> <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cosmo/bootstrap.min.css" type="text/css" rel="stylesheet"/> </head> <body> <div id="app"></div> <script src="client.min.js"></script> </body> </html>
ここまでで、Reactの環境構築完了！？
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);
[vagrant@localhost react]$ webpack –mode development
Hash: 12eaf7dc67869ad64caf
Version: webpack 4.41.2
Time: 1874ms
Built at: 2019-11-20 15:39:17
Asset Size Chunks Chunk Names
client.min.js 1.08 MiB main [emitted] main
Entrypoint main = client.min.js
[./js/client.js] 2.69 KiB {main} [built]
+ 11 hidden modules
何言いいいいいいいいいいいいいい