Автор оригинала: Seyi Adeleke.

Работа с реакцией отлично. Но, к сожалению, создание среды развития реагирования вполне больно для новичка, и постоянно меняющееся сообщество JavaScript делает его еще более сложным и громоздким. Вы должны быть знакомы с такими технологиями, как Babel, WebPack, Eslint и пару других вещей, которые могут не быть немедленно очевидны для новичка. По пути мы будем говорить о различных технологиях, которые нам нужны, почему мы им нужны и как они облегчают нашу жизнь. Очевидно, вы можете просто использовать CRA Но я считаю, что каждый разработчик реагирования должен знать, как создать среду, специфичную для их потребностей и конкретных предпочтений развития.

Эта статья в основном предназначена для начинающих веб-разработчиков, у которых есть опыт создания веб-приложений и ищут изучение реагирования. Чтобы следовать по вам должно быть знакомы с синтаксисом JavaScript и ES6. Давайте начнем

Первые шаги..

Для начала нам нужно правильно установить узел и NPM. Если у вас нет его, вы можете использовать это ссылка Для установки последней длительной версии поддержки. Следуйте инструкциям по установке, чтобы получить его настройку. Откройте терминал (командная строка для Windows) и введите команду Узел -в , вы должны получить номер версии узла, если вы установили его правильно.

Теперь, может создать новый проект под названием React - Boilerplate Используя следующие команды в вашем терминале MKDIR React - Boilerplate && CD React - Boilerplate Отказ Затем запустите NPM init Отказ Это будет инициализировать новый проект узла и создать файл package.json с какой-то основной информацией.

Варить

Babel – это просто компилятор JavaScript, который используется для конвертации Code 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"
    ]
}

Чтобы убедиться, что все работает правильно. Давайте установим базовый Express Server с помощью синтаксиса ES6. Установите Express Использование 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"
  },

Посетить http://localhost: 3000/ И вы должны увидеть Здравствуйте, мир сообщение.

УБПАК И РЕАКТ

Теперь, когда у нас есть настройка Babel правильно, мы теперь можем настроить WebPack и реагировать. Очень быстро WebPack – это модуль Bundler для приложений JavaScript (вы можете прочитать это Отличная статья для получения дополнительной информации). По сути, WebPack состоит из файла конфигурации, который просто объект 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 (Это где мы будем размещать наше приложение React Application ). В этом каталоге создайте новый файл index.html так.

./src/index.html.

Теперь мы можем установить React и React-Dom. NPM I Rect React-DOM -S Отказ После того, как мы создадим новый App.jsx файл в корневом каталоге.

import React from 'react';
import ReactDOM from 'react-dom';


const rootEl = document.getElementById('root');


const App = () => {
    return (
        

            
 Hello World :) 
        
        );
};

const renderApp = () => {
    ReactDOM.render(
        , 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, нам нужно изменить наше Старт: Dev скрипт (как его все еще указывает на наш экспресс-сервер), чтобы использовать наш недавно созданный конфигурацию WebPack

"scripts": {
    "start:dev": "webpack-dev-server  --config webpack.config.js"
  },

Посещение http://localhost: 3000/ и вы должны увидеть следующее

Следующие шаги..

Вот и все! Хорошо сделано, если вы следите за всеми шагами. Вы должны знать, есть хорошая котельная, которую вы можете использовать при наращивании собственных приложений RACT. Там еще больше работы. Мы не настроили Linter (Eslint) или настроить наше приложение для запуска в режиме производства. Также наш экспресс-сервер теперь довольно бесполезно, мы должны заменить WebPack-dev-сервер и использовать Express, чтобы служить нашему приложению вместо этого Отказ Мы доберемся до этого в части 2! Весь код живой здесь на Github.