Настройка среды разработки React с нуля.
Работать с React — это здорово. Но, к сожалению, создание среды разработки React довольно болезненно для новичка, а постоянно меняющееся сообщество Javascript делает его еще более сложным и громоздким. Вы должны быть знакомы с такими технологиями, как Babel, Webpack, ESLint и некоторыми другими вещами, которые могут быть не очевидны новичку. Попутно мы будем говорить о различных технологиях, которые нам нужны, зачем они нам нужны и как они облегчают нашу жизнь. Очевидно, вы можете просто использовать КРА но я считаю, что каждый реагирующий разработчик должен знать, как создать среду, соответствующую его потребностям и конкретным предпочтениям в разработке.
Эта статья в основном предназначена для начинающих веб-разработчиков, которые имеют опыт создания веб-приложений и хотят научиться реагировать. Чтобы следовать, вы должны быть знакомы с синтаксисом Javascript и ES6. Давайте начнем 
Первые шаги..
Для начала нам нужно правильно установить node и npm. Если у вас его нет, вы можете использовать это ссылка на сайт для установки последней версии долгосрочной поддержки. Следуйте инструкциям по установке, чтобы настроить его.
Откройте терминал (командная строка для Windows) и введите команду node -vвы должны получить номер версии узла, если вы установили его правильно.
Теперь можно создать новый проект с именем React-boilerplate используя следующие команды в вашем терминале mkdir React-boilerplate && cd React-boilerplate. Затем запустите npm init. Это инициализирует новый проект узла и создаст файл package.json с некоторой базовой информацией.
Вавилон
Babel — это просто компилятор javascript, который используется для преобразования кода es6^ в обратно совместимый синтаксис, который может работать в старых средах и браузерах (здесь SRC?).
Чтобы установить babel, выполните следующую команду в своем терминале;
npm i @babel/core @babel/node @babel/preset-env @babel/preset-es2015 @babel/preset-react -D
Нам также нужно установить пару плагинов для Babel, которые значительно упростят нашу жизнь при разработке.
npm i @babel/plugin-syntax-dynamic-import @babel/plugin-proposal-class-properties @babel/plugin-proposal-export-namespace-from @babel/plugin-proposal-throw-expressions -D
Далее нам нужно создать .babelrc файл, который служит конфигурационным файлом для babel.
{
"presets": [
"@babel/env",
"@babel/react",
],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-throw-expressions"
]
}
Чтобы убедиться, что все работает правильно. Давайте настроим базовый экспресс-сервер с синтаксисом ES6. Установить экспресс с помощью npm i express -S и создайте новый файл server.js со следующим кодом.
import express from 'express';
const app = express();
const port = 3000;
app.listen(port, () => { console.log(`App is listening on port ${port}`) });
app.get('/', (req, res) => {
res.send(' Hello World :) ');
});
И измените свои сценарии в своем package.json вот так;
"scripts": {
"start:dev": "babel-node server.js"
},
Посещать и вы должны увидеть Hello World сообщение.
Вебпак и Реакт
Теперь, когда мы правильно настроили babel, мы можем настроить webpack и реагировать. Очень быстро Webpack является сборщиком модулей для javascript-приложений (вы можете прочитать это отличная статья для получения дополнительной информации). По сути, веб-пакет состоит из файла конфигурации, который представляет собой просто объект javascript, состоящий из настраиваемых опции. Во-первых, нам нужно установить webpack и еще пару пакетов.
npm i webpack webpack-cli webpack-dev-middleware webpack-dev-server webpack-hot-middleware node-sass style-loader css-loader babel-loader mini-css-extract-plugin html-webpack-plugin -S
Чтобы двигаться вперед, давайте создадим новый файл webpack.config.js в нашем корневом каталоге. Проверьте аннотации на предмет контекста.
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// HtmlWebpackPlugin is used to inject our created bundles into this html file so // we need to create it.
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body',
});
module.exports = {
target: 'web',
devServer: {
port: 3000,
contentBase: './dist',
},
entry: {
app: ['./src/App.jsx'],
vendor: ['react', 'react-dom']
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].bundle.js'
},
devtool: 'source-map',
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: ['babel-loader'], // we use this to transpile es6 code on the web
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader", "postcss-loader",
],
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "styles.css",
chunkFilename: "styles.css"
}),
HtmlWebpackPluginConfig,
new webpack.NoEmitOnErrorsPlugin(),
],
mode: 'development',
}
Создайте новый каталог с именем src (здесь мы разместим наше реагирующее приложение 
). В этом каталоге создайте новый файл index.html следующим образом.
./src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React Boilerplate</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Теперь мы можем установить react и react-dom. npm i react react-dom -S. После того, как мы создадим новый App.jsx файл в корневом каталоге.
import React from 'react';
import ReactDOM from 'react-dom';
const rootEl = document.getElementById('root');
const App = () => {
return (
<div>
<h1 style={{ 'textAlign': 'center'}}> Hello World :) </h1>
</div>
);
};
const renderApp = () => {
ReactDOM.render(
<App />, rootEl
);
}
renderApp();
// This checks for local changes and automatically refreshes the browser (hot-reloading)
if (module.hot) {
module.hot.accept('./components/App.jsx', () => renderApp());
}
Прежде чем мы сможем просмотреть наше приложение React, нам нужно изменить наш start:dev script (поскольку он все еще указывает на наш экспресс-сервер) для использования нашей недавно созданной конфигурации веб-пакета
"scripts": {
"start:dev": "webpack-dev-server --config webpack.config.js"
},
Посещение и вы должны увидеть следующее 
Следующие шаги..
Вот и все! Хорошо сделано, если вы выполнили все шаги. У вас должен быть хороший шаблон, который вы можете использовать при создании своих собственных приложений для реагирования. Предстоит еще много работы. Мы не устанавливали линтер (EsLint) и не настраивали наше приложение для работы в рабочем режиме. Кроме того, наш экспресс-сервер теперь довольно бесполезен, мы должны заменить webpack-dev-server и вместо этого использовать экспресс для обслуживания нашего приложения. 
. Мы доберемся до этого во второй части!
Весь код живой здесь на гитхабе.
