Настройка среды разработки 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"
  },

Посещение и вы должны увидеть следующее Снимок экрана 30 января 2019 г., 21:39:06.png

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

Вот и все! Хорошо сделано, если вы выполнили все шаги. У вас должен быть хороший шаблон, который вы можете использовать при создании своих собственных приложений для реагирования. Предстоит еще много работы. Мы не устанавливали линтер (EsLint) и не настраивали наше приложение для работы в рабочем режиме. Кроме того, наш экспресс-сервер теперь довольно бесполезен, мы должны заменить webpack-dev-server и вместо этого использовать экспресс для обслуживания нашего приложения. 🤔 🤔. Мы доберемся до этого во второй части!
Весь код живой здесь на гитхабе.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *