React js настройка node js webpack babel react js
В видео рассказывается о настройке 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"]
}
Watch video React js настройка node js webpack babel react js online without registration, duration hours minute second in high quality. This video was added by user htmllab 11 February 2019, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4,924 once and liked it 201 people.