Рубрики
Без рубрики

Настройка ECOSYSTEM RACT – пошаговая прохождение

Понять, что реагируют, WebPack и Babel делают и как настроить их самостоятельно.

Автор оригинала: Arnav Aggarwal.

Понять, что реагируют, учебный папак и бабел делают и как настроить их самостоятельно

Эта статья была первоначально опубликована на Средний Отказ

Реагируют, возможно, самая горячая каркас, в настоящее время используется сообществом веб-разработки в данный момент. К сожалению, для новичков и еще более опытных разработчиков, создание отраслевой стандартной среды развития реагирования впервые сложно, пугающим и расстраивает. Есть котлы, такие как Create-React-App легко доступен для людей, которые хотят пропустить конфигурацию и начать, но использование их не дает понимание того, что на самом деле происходит.

Эта статья предназначена для того, чтобы взять вас через процесс установки, в то время как учить вас как можно больше о том, что вы и инструменты, которые вы используете. Технологии, которые мы обсудим, состоит в том, что сообщество React решило принять участие в передней экосистеме и то, что вы увидите профессиональные разработчики и лидеры отрасли. Это также то, что вы увидите в большинстве примеров онлайн. Существует целая тонна большего количества инструментов и конфигурации, ориентированная, поскольку это предназначено, чтобы быть руководством новичков голых костей.

Чтобы увидеть, что мы будем работать или, если вы просто хотите бойную табличку, перейдите к:

Arnav-Aggarwal/Reactup-Учебное пособие

Эта статья требует элементарного мастерства с HTML, JavaScript (включая очень базовый синтаксис ES6), CSS, узел и предпочтительно экспресс. Если вы можете сделать приложение To-Do, вы готовы к этому. Давайте начнем.

Я использую NPM V 5 и NODE V 8. Если вы используете более старую версию узла, вы должны быть в порядке. NPM 5 Сохраняет зависимости к вашу Package.json по умолчанию без необходимости флага, поэтому если использовать NPM 4 или ниже, убедитесь, что используйте --save При установке производственных зависимостей. Я бы порекомендовал обновление до NPM 5. Это быстрее и блокирует ваши зависимости с помощью файла package-lock.json, обозначая каждую версию каждой зависимости. Вы можете использовать WebPack 2 или 3 – оба должны работать.

Начальная конфигурация

Давайте создадим очень базовую файловую систему. Беги NPM init и получить Package.json Отказ В корневом каталоге нашего проекта давайте создадим файл под названием server.js и папка называется Dist Отказ Dist Где мы будем хранить весь код с клиентом. В Dist Создать app.html файл. Убедитесь, что ваша файловая структура выглядит так.

project_root
|
|---dist
|    |
|    |---app.html
|
|---package.json
|---server.js

Структура файла также может быть просмотрена здесь Отказ

Базовый HTML-файл

Давайте напишем нашему dist/app.html файл. Обратите внимание, что у нас есть div с идентификатором Контейнер В теле, содержащее только слово «реагировать».





    
    
    
    React - Basic Setup


    
React

Базовый экспресс-сервер

Беги NPM Install Express Отказ Вы получите Package-lock.json При использовании NPM 5. В server.js , мы напишем некоторый код, чтобы получить базовый экспресс-сервер вверх и запущен. Если вы настроили экспресс-сервер раньше, это не должно быть новым. Если вы не использовали экспресс, это не имеет решающее значение для изучения реагирования. Просто знайте, что это создает сервер на порту 8080 и служит dist/app.html Отказ

const express = require('express');
const path = require('path');

const app = express();
const port = process.env.PORT || 8080;

app.set('port', port);
app.use(express.static(path.join(__dirname, './dist')));

app.get('*', (req, res) => {
    console.log('Serving ', req.url);
    res.sendFile(__dirname + '/dist/app.html');
});

app.listen(port, () => console.log('Listening on port', port));

Беги NPM начать (псевдоним для Node Server.js ). Вы должны увидеть что-то вроде этого.

start-server.png.png.

Убедитесь, что сервер работает, собираясь на localhost: 8080 Отказ Вы должны увидеть слово «реагировать» на странице. Удивительно, у нас есть базовый HTML-файл и сервер!

Вы должны иметь Эти изменения Отказ

WebPack

webpack.png.png

Обычная практика в экосистеме RACT в ECOSYSTEM состоит в том, чтобы объединить все файлы JavaScript и CSS, которые мы пишем в один большой файл. WebPack – это инструмент для работы. Во время объединения у нас будет WebPack выполнять еще несколько действий.

  • Это разрешает наши зависимости, переходя в модули, которые мы импортируем и объединяем их, вытягивая их из наших node_modules и положить их в верхнюю часть нашего файла. Это рекурсивно проходит через каждую зависимость и зависимости зависимостей, разрешающую весь путь вниз.
  • Это будет траншировать нашу ферму-свежую, передовую ES6 + до ES5, чтобы он будет работать практически на каждом браузере.
  • Это заметят наш код, удаляя пробеловые пространства и укорачивающие имена переменной, уменьшая окончательный размер файла.

В конце концов, мы сможем написать модульный, современный JavaScript и CSS, которые мы можем легко работать и использовать лучшие практики.

Начиная

Давайте создадим папку с именем SRC в нашем корневом каталоге. Это будет содержать все JavaScript и CSS нашего сайта. Мы начнем с JavaScript. Поместите файл под названием index.js в SRC Отказ В SRC/index.js Поместите одну линию кода:

console.log('Testing our bundle');

С WebPack, SRC/index.js будет нашей отправной точкой или точкой входа. WebPack начнется с этого файла и генерирует наш пакет. Давайте установим WebPack:

npm install -D webpack

WebPack требует файла конфигурации под названием webpack.config.js Отказ Давайте создадим этот файл в нашем корневом каталоге. Исключая node_modules Наша структура файлов теперь выглядит так.

project_root
|
|---dist
|    |
|    |---app.html
|
|---src
|    |
|    |---index.js
|
|---package.json
|---package-lock.json
|---server.js
|---webpack.config.js

webpack.config.js Необходимо экспортировать объект конфигурации, который говорит ему, где начать пакет и куда поставить пучок. Добавьте это в файл.

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
    output: {
    	path: path.resolve(__dirname, './dist'),
    	filename: 'app.bundle.js'
    }
};

Какой объект нашей конфигурации рассказывает WebPack сделать, это начать в точке входа, SRC/index.js Отказ Это зайдет в этот файл, разрешит все зависимости, и связывайте их в выходной путь, папку Dist Отказ Это название нового подключенного файла app.bundle.js Отказ

Идти вперед и беги

webpack

На командной строке и посмотрите, что происходит.

Сделанный? Хорошо. Вы должны увидеть app.bundle.js волшебным образом появляются в вашем Dist папка. Идти вперед и беги

node dist/app.bundle.js

Вы должны увидеть « Тестирование нашего пучка «Войти на узел консоли. Поздравляем, вы создали свой первый пакет WebPack!

Если использовать Git, вы захотите добавить dist/app.bundle.js к вашему .gitignore Отказ Мы только хотим отслеживать исходные файлы, а не сгенерированный пакет.

В конце концов, мы хотим запустить код в этом файле, чтобы сделать наше приложение к DOM. Давайте добавим тег скрипта в dist/app.html Отказ





    
    
    
    React - Basic Setup


    
React

Если вы откроете dist/app.html В браузере вы теперь увидите « Тестирование нашего пучка «Заявление журнала в консоль браузера.

На данный момент вы должны были добавить Эти изменения Отказ

Флаги

Прямо сейчас ничего не добывается. Откройте dist/app.bundle.js и посмотрите, что внутри, если вам нравится. Чтобы сделать WebPack помините свой код, используйте производственный флаг, -П Отказ Введите WebPack -P И посмотрите на файл комплекта. Вы увидите одну длинную линию нечитаемого кода со всеми ненужными удаленными пробелами. Это будет выглядеть что-то подобное.

minified.png.png

Давайте вернемся к нашему невыписанному коду на секунду. Введите WebPack генерировать не добываемый пучок. Проблема с использованием пакета вместо нашего исходного кода состоит в том, что он делает отладку более сложным, потому что трассировка стека теперь относится к нашему файлу пучка. Если мы открываем наш файл HTML в браузере сейчас, мы увидим это:

no-sourceMap.png.

Трассировка стека для console.log Заявление говорит нам пойти в App.Bundle.js, линия 73. Это не очень полезно. Мы хотим правильно отображать наши файлы.

Нам нужна источник-карта – способ сказать браузеру отображать ошибки и журналы в соответствии с Источник И не окончательный пакет. Карта исходности добавляет значительный объем кода, поэтому размер файла будет больше. Это нормально для производства. Использование флага разработки, -d , скажут WebPack для создания исходной карты для нашего кода. Идти вперед и беги

 webpack -d

Теперь мы получаем лучший журнал. Мы можем увидеть, что это происходит от линии 1 в index.js Отказ

sourcemap.png.png.

При разработке, это не весело, чтобы набрать WebPack снова и снова. Используя - Удар Флаг во время разработки означает WebPack посмотрит наши файлы и повторно создает пакет каждый раз, когда мы сохраняем изменения. Во время разработки мы захотим использовать как флаг развития, так и флаг часов, поэтому наша команда будет

 webpack -d --watch

Каждый раз, когда вы меняете webpack.config.js Вам нужно будет убить процесс наблюдения и перезапустить WebPack для изменений, чтобы повлиять на ваш пакет.

Варить

babel.png.png

Ранее я упоминал, что мы хотим иметь возможность использовать новый, блестящий код ES6 при создании наших сайтов Cross-Browser совместимым. Babel – это библиотека, которую мы будем использовать, чтобы транспортировать наш код, и мы настроим WebPack, чтобы сделать это, когда мы запускаем WebPack Отказ

Продолжайте и установите эти три зависимости.

npm install -D babel-core babel-loader babel-preset-env
  • Babel-Core это библиотека, которая принимает код как строка и транкирует ее.
  • Babel-Loader Это позволяет нам завязать ядро Babel-Core в WebPack и позволяет конфигурации WebPack знать использовать библиотеку Babel-Core.
  • Babel-Preset-Env По сути, конфигурация для Babel, которая позволяет нам пройти варианты. Без вариантов он использует по умолчанию, что означает, что он поймет код до стандартов ES2017 и транпилирует его до ES5.

Есть несколько способов настроить WebPack с Babel, и мы просто выберем легко. Вам нужно добавить код в webpack.config.js Отказ

const path = require('path');

const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, './src/index.js'),
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'app.bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [/node_modules/],
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            }
        ]
    }
};

Этот код сообщает WebPack проверить файлы в нашем каталоге и искать имена файлов, соответствующих Regex в Тест имущество. /\.js$/ ищет файлы, заканчивающиеся с .js Так что все наши файлы JavaScript. Мы говорим об этом, чтобы исключить наш node_modules Папка, потому что мы не хотим транпилировать это, так как все наши зависимости уже должны быть написаны в ES5. Наконец, мы говорим, что мы хотим использовать Babel-loader, который ссылает библиотеку Babel-Core в WebPack. Мы хотим использовать env Preset, которая работает с кодом ES2015, 2016 и 2017, поэтому мы можем использовать новейшие функции.

Теперь мы можем использовать код ES6, и пучок, генерируемый WebPack, будет содержать только код ES5.

Изменения – это здесь Отказ

Реагировать

Давайте настроим реагируем. Запустите следующие две команды. Нам понадобится реагировать, реагировать на реагирование на реакцию реагирование.

npm install react react-dom
npm install -D babel-preset-react

Нам придется добавить срок нашего webpack.config.js Файл, чтобы сказать, что мы пишем React Code.

const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, './src/index.js'),
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'app.bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [/node_modules/],
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['react', 'env']
                    }
                }
            }
        ]
    }
};

Мы говорим Babel использовать специальную реакцию. Это преобразует наш реагированный код в стандартный JavaScript. Но не реагирует просто JavaScript ?? Не совсем. Мы доберемся до этого.

Вы должны быть здесь Отказ

Наш первый комментарий реагирования

В SRC/index.js Удалить console.log Заявление и напишите следующий код.

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

const container = document.getElementById('container');
const myDiv = 
My First React Component!
;

ReactDOM.render(myDiv, container);

Запустите свой сервер и WebPack (используйте WebPack -d --watch ), чтобы увидеть, что происходит в вашем браузере. Пусть WebPack работает на заднем плане, чтобы мы могли продолжать видеть наши изменения.

Здесь происходит куча вещей, так что давайте сломаемся.

  • Мы можем использовать Импорт заявления, потому что WebPack будет разрешать для нас. Это захватит реагировать и реагировать из нашего node_modules И бросить их в верхнюю часть нашего пакета, с остальной частью нашего кода под ним.
  • Мы обращаемся к DIV с ID Контейнер для рендеринга нашего компонента. Это элемент DOM, который мы разместим наши элементы реагирования в.
  • Следующая строка, создавая переменную Мидив , самый захватывающий. Мы пишем что-то, что выглядит как HTML в нашем JavaScript. Мидив Это переменная, которая содержит то, что мы можем думать о том, что мы только что создали DOM.
  • Последняя строка использует библиотеку взаимодействия для визуализации наших Мидив элемент на доме.

Обратите внимание, что мы импортируем реагирование, но на самом деле не используйте его нигде. Это потому, что во время транспиляции, WebPack и Babel преобразуют наш код. Этот преобразованный код нуждается в доступе к реакции.

Чтобы увидеть, что он, наконец, превращается в после того, как WebPack запускает свою магию, мы можем пойти в babeljs.io Отказ Ниже приведена код транспортированной версии нашего пятистрочного блока выше.

'use strict';
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var container = document.getElementById('container');
var myDiv = _react2.default.createElement(
  'div',
  null,
  'My First React Component!'
);

_reactDom2.default.render(myDiv, container);

Нам нужно реагировать в области применения, потому что наш транспилованный код нуждается в доступе к нему, даже если мы не используем это самим собой. Также обратите внимание, что все функции ES6 были удалены – Импортные операторы и постоянные объявления переменных преобразуются до ES5.

Запустите Север, запустите WebPack и перейдите в localhost: 8080 Отказ Вы должны увидеть, что вы ожидаете. Если мы открываем инструменты разработки вашего браузера и проверьте текст, мы видим наш Div вложенный внутри # Container Div присутствует в нашем оригинальном HTML.

my_first_component.png.png.png

Jsx.

jsx.png.png.

Я сказал, что мы пишем вещи, что выглядит как HTML. Это не на самом деле HTML. Это что-то называемое Jsx Отказ JSX – это что-то созданное Facebook, что обеспечивает простой, в основном простой синтаксис, чтобы помочь нам написать компоненты реагирования. По большей части он очень похож на HTML, с несколькими ключевыми отличиями.

Начните с написания компонента JSX, написав что-то вроде, что вы бы в HTML. Вместо использования слова Класс Чтобы обозначить класс, который мы хотим дать нашему элементу, нам нужно использовать классное значение Отказ Если мы хотим использовать JavaScript при создании нашего элемента, мы можем использовать пару кудрявых кронштейнов для обозначения кода, который должен быть оценен. Давайте введем еще несколько кода в Babel REFL и посмотрим, как это работает.

const out = 'outer';
const inn = 'inner';
const div = 'Div';


  

    
JSX

    Creating a JSX Div

Это превращается в:

'use strict';

var out = 'outer';
var inn = 'inner';
var div = 'Div';

React.createElement(
  'div',
  { className: out + div },
  React.createElement(
    'div',
    { className: inn + div },
    React.createElement(
      'h1',
      null,
      'JSX'
    ),
    React.createElement(
      'span',
      null,
      'Creating a JSX Div'
    )
  )
);

На доме это выглядит как:


    

        
JSX

        Creating a JSX Div
jsx-2.png.png.

Рефакторинг компонента

Во-первых, давайте пойдем вперед и удалите «реагировать» из нашего Контейнер ДИВ в dist/app.html Отказ После этого вы должны иметь Эти изменения Отказ

Давайте сделаем это так SRC/index.js Содержит логику, которая имеет дело только с рендерингом нашего приложения на страницу. Мы хотим абстрагировать все JSX в отдельные файлы. Давайте создадим Компоненты Папка в SRC Отказ Там давайте создадим файл под названием app.js Это будет содержать логику, занимающуюся созданием нашего сайта. Все SRC/index.js должен сделать, это сделать наше приложение к DOM.

project_root
|
|---dist
|    |
|    |---app.html
|
|---src
|    |
|    |
|    |---components
|    |    |
|    |    |---app.js
|    |
|    |---index.js
|
|---package.json
|---package-lock.json
|---server.js
|---webpack.config.js

Давайте начнем с изменения SRC/index.js совсем немного. Во-первых, давайте будем расти нашему деволюту немного. Мы добавим H1 и а промежуток Внутри нашего Div и мы переименем Мидив к приложение Отказ

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

const container = document.getElementById('container');
const app = (
    

        
JSX

        My first JSX span!
    

);

ReactDOM.render(app, container);

Теперь мы собираемся переместить приложение переменная в отдельный файл. Экспортируйте это из SRC/Компоненты/App.js Отказ SRC/index.js теперь должен выглядеть так:

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

import App from './components/app';
const container = document.getElementById('container');

ReactDOM.render(App, container);

SRC/Компоненты/App.js теперь должен иметь:

import React from 'react';

export default (
    

        
JSX

        My first JSX span!
    

);

Опять же, нам нужно реагировать по объему, хотя мы не применяем его напрямую. Без этого JSX не будет работать. Если вы опускаете Импорт Заявление, вы получите ошибку, говоря, Rection не имеет возможности.

Если вы обновите свою страницу, вы должны увидеть, что ничего не изменилось.

Экспорт компонента

Мы собираемся повернуть приложение в функцию, что Возвращает JSX мы хотим. Мы объясним, почему через секунду. Изменить SRC/Компоненты/App.js в это.

import React from 'react';

export default function app() {
    return (
        

            
JSX

            My first JSX span!
        

    );
}

Изменить SRC/index.js в это.

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

import App from './components/app';
const container = document.getElementById('container');

ReactDOM.render(, container);

Когда мы импортируем функцию, которая возвращает JSX, мы можем использовать эту функцию в качестве нового элемента, как мы используем то, с чем мы уже знакомы. Мы существенно определили новый элемент. Мы относимся к этому, как будто мы бы Div , промежуток , H1 – H6 и т. Д., С открытием и закрывающим тегом. Использование этих тегов открывания и закрытия вызывает соответствующую функцию и вставляет возвращенный элемент в их месте.

Пустой тег может быть самозакрывается. Другими словами,

 === 

 ===

Мы будем использовать это сокращение. Вы должны быть здесь Отказ

Это основы основы. Вы на пути к изучению реагирования.

CSS.

Мы хотим иметь возможность использовать таблицы стилей для нашего сайта. Нам нужно добавить некоторую конфигурацию Babel.

npm install -D style-loader css-loader

CSS-погрузчик будет разрешать Импорт Заявления, которые мы используем и объединяем CSS в наш пакет. Стиль-погрузчик на самом деле нанесет это CSS, поэтому мы видим, что он работает на странице.

Нам также нужно обновить webpack.config.js Чтобы сообщить ему импортировать и преобразовывать наши файлы CSS, используя эти погрузчики.

const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, './src/index.js'),
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'app.bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [/node_modules/],
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['react', 'env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
};

Довольно распространена практика для создания отдельного файла CSS для каждого компонента, причем только CSS, необходимый для этого компонента, присутствующего в этом файле. В SRC добавить Стили папка. Мы создадим SRC/стили/index.csss и добавьте наши основные CSS в этот файл. Давайте также создадим SRC/Styles/app.css Чтобы сохранить CSS, специфичные для этого компонента.

project_root
|
|---dist
|    |
|    |---app.html
|
|---src
|    |
|    |---index.js
|    |
|    |---components
|    |     |
|    |     |---app.js
|    |
|    |---styles
|          |
|          |---app.css
|          |---index.css
|
|---package.json
|---package-lock.json
|---server.js
|---webpack.config.js

В SRC/стили/index.csss Мы добавим то, что мы хотим подать заявку на весь документ.

html, body {
    font-family: sans-serif;
    background-color: #dddddd;
}

В SRC/Styles/app.css Мы добавим CSS, специфичные для компонента.

h1 {
    color: #31416D;
}

С нашим настроек WebPack мы можем напрямую импортировать стилы. Добавьте это прямо ниже Импорт заявления в SRC/index.js Отказ

...
import App from './components/app';
import './styles/index.css';
...

И аналогично, в рамках оператора импорта в SRC/Компоненты/App.js :

import React from 'react';import '../styles/app.css';
...

С помощью WebPack работает, если мы обновляем нашу веб-страницу, мы должны увидеть в стиле изменения.

styled.png.png

Последние изменения являются здесь Отказ Полный репозиторий находится в:

Arnav-Aggarwal/Reactup-Учебное пособие

Флаг Вот и все.

Теперь вы можете сосредоточиться на самом деле изучение реагирования. Теперь вы должны понять достаточно WebPack, чтобы иметь возможность изменить конфигурацию самостоятельно в будущем, если это нужно. Существует тонна дополнительных инструментов, которые мы можем добавлять – CSS Preprocessors, Frameworks, Linters, другие библиотеки, такие как Redux и React-Router. Если интересно, см. Мой более тщательный репозиторий Rect Reach Boilerplate Отказ Но это поможет вам начать.

Если это было полезно, пожалуйста, не стесняйтесь проверить мои другие статьи.

Арнав Аггарваль – средний

Master JavaScript новый, передовый оператор распространения объекта

Простые правила «это» в JavaScript

Вот и все. Иди научиться реагировать.

Читайте ещё по теме: