React js настройка node js webpack babel react js HD

В видео рассказывается о настройке node.js, webpack, babel вместе с библиотекой UI - react.js. После просмотра вы сможете работать с React.js компонентами без обновления HTML-страницы в браузере. Вручную запускать команды сборки или транспиляции нужно будет только при начале работы с проектом, а не после внесения каждого изменения. Содержимое App.js - https://pastebin.com/jBBkpPJy App.css - https://pastebin.com/ib2jB47c index.html - https://pastebin.com/kT7D6r46 index.js - https://pastebin.com/fLrr8w6p /*************************************************************** * Команды npm, используемые в видео: ****************************************************************/ npm install webpack webpack-cli --save-dev npm install react react-dom --save npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev npm install css-loader style-loader --save-dev npm install html-webpack-plugin --save-dev npm install webpack-dev-server --save-dev /*************************************************************** * Содержимое webpack.config.js: ****************************************************************/ const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/index.js", output: { path: path.join(__dirname, "/dist"), filename: "bundle.js" }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: ["babel-loader"] }, { test: /.css$/, use: ["style-loader", "css-loader"] } ] }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html" }) ] }; /*************************************************************** * Содержимое package.json: ****************************************************************/ { "name": "react-startkit", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "webpack-dev-server --mode development --open --hot", "build": "webpack --mode production" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.2.2", "@babel/preset-env": "^7.3.1", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.5", "css-loader": "^2.1.0", "html-webpack-plugin": "^3.2.0", "react": "^16.8.1", "react-dom": "^16.8.1", "style-loader": "^0.23.1", "webpack": "^4.29.3", "webpack-cli": "^3.2.3", "webpack-dev-server": "^3.1.14" } } /*************************************************************** * Содержимое .babelrc: ****************************************************************/ { "presets": ["@babel/preset-env","@babel/preset-react"] }