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

Опубликовано: 11 Февраль 2019
на канале: htmllab

4,924

201

В видео рассказывается о настройке 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"]
}

Смотрите видео React js настройка node js webpack babel react js онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь htmllab 11 Февраль 2019, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 4,924 раз и оно понравилось 201 людям.

1,651