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"]
}
On this page of the site you can watch the video online React js настройка node js webpack babel react js with a duration of hours minute second in good quality, which was uploaded by the user htmllab 11 February 2019, share the link with friends and acquaintances, this video has already been watched 4,924 times on youtube and it was liked by 201 viewers. Enjoy your viewing!
