Автор оригинала: Valentin Radulescu.

Реагирование стало отраслевым стандартом на данный момент. Это первый JavaScript Framework, что многие новые разработчики будут изучаться и вариант по умолчанию для многих других опытных.

Также легко познакомиться. Яркое сообщество произвело тонны материала о том, как встать и бежать. Начинающие могут писать и отображать свой первый компонент в течение нескольких минут, используя инструмент, похожий на CodeSandbox Отказ

В этой статье мы посмотрим на следующий шаг в процессе: Местное развитие Отказ Мы сделаем удар при создании собственной среды развития реагирования и к концу, у нас должна быть установка, которая:

1. Компилирует Jsx в JS, Sass в CSS и выводит их как один файл (пучок).
2. Убедитесь, что наш код работает в любом современном браузере.
3. Позволяет нам локально просмотреть изменения через горячую перезагрузку.
4. Готов развернуть с Воспитание Отказ

Если вы хотите следовать, весь код, представленный здесь, также можно найти в github.com/radvalentin/tiny-react-env.

Создание развязки реагирования

Давайте создадим папку для размещения нашего будущего проекта и инициализируйте его с Package.json файл. Мы также добавим React, так как мы знаем, что нам понадобится позже.

mkdir tiny-react-env
cd tiny-react-env

# this will ask you a bunch of questions
# enter as much or as little info as you want
npm init

npm install --save react
npm install --save react-dom

Нам также понадобится какой-то компонент – давайте добавим его в SRC/Компоненты/App.js Отказ

/* src/components/App.js */
import React, {Component} from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  render() {
    return 
Hello World!
;
  }
}

ReactDOM.render(
  , 
  document.getElementById('root')
);

Наш компонент находится просто куча текста на данный момент. Если мы запустим его через узел (или Chrome), он не узнает, что Импорт Ссылается, а также не может понять синтаксис JSX.

Это где инструмент, как WebPack Входит. Он может объединить все наши исходные файлы в один комплект, который можно загрузить в браузере.

Что еще более важно, если мы указываем на корневой компонент, он будет в свою очередь, построить внутренний график зависимости. Каждый Импорт В нашем коде будет сопоставлен на либо NPM Пакет или другой актив в нашем проекте (компонент, библиотека, изображение и т. Д.). Мы можем использовать Погрузчики разбираться в анализе дополнительных типов синтаксиса, таких как JSX или SASS.

Давайте установим WebPack и дайте ему простой конфиг.

npm install --save webpack
touch webpack.config.js

/* webpack.config.js */
const path = require('path');

module.exports = {
  // Tell webpack to begin building its 
  // dependency graph from this file.
  entry: path.join(__dirname, 'src', 'components', 'App.js'),
  // And to place the output in the `build` directory
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
  }
}

Cool, теперь наш импорт будет прекрасно работать, но нам все еще нужно понять способ разбора JSX. Для этого нам нужно Бабел – Давайте добавим его в наш проект.

# base of the Babel ecosystem, parses JS code,
# very powerful with the right plugins
npm install --save babel-core

# allows Webpack to transpile JS code via Babel
npm install --save babel-loader

# allows transpilation from latest ES2015+ 
# features to ES5
npm install --save babel-preset-env

# and finally, JSX to ES5 transpilation
npm install --save babel-preset-react

Теперь мы можем обновить наше webpack.config.js с модуль поле. Это говорит WebPack, что любые файлы с JS или jsx Расширения должны быть проанализированы с Вавилом.

/* webpack.config.js */
module.exports = {
  /* ... */
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        /* We'll leave npm packages as is and not 
           parse them with Babel since most of them 
           are already pre-transpiled anyway. */
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
}

Последняя часть настройки Babel рассказывает ей, чтобы использовать предустановки, которые мы установили ранее. Все, что вам нужно сделать, это добавить Бабел поле для вашего Package.json Отказ

"babel": {
  "presets": [
    "env",
    "react"
  ]
}

Теперь, когда это сделано, мы, наконец, можем скомпилировать наш код в пакет. Для этого вы могли бы запустить WebPack из node_modules каталог ./node_modules/.bin/webpack Отказ Тем не менее, это немного боли, чтобы набрать, и мы будем работать в этом много Отказ Вместо этого мы собираемся добавить ярлык для него в Package.json под Сценарии Отказ

"scripts": {
  "start": "webpack"
}

Все, что осталось сделать, это запустить NPM запустить начало или даже лучше, NPM начать и VOILà, сообщение успеха и скомпилированного комплекта можно найти в build/bundle.js Отказ

Hash: b5a8448c403cf555a5de
Version: webpack 3.8.1
Time: 1033ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  729 KB       0  [emitted]  [big]  main
  [14] ./src/App.js 2.31 KB {0} [built]
    + 26 hidden modules

Откройте этот файл, чтобы увидеть, что он содержит все зависимости, которые были импортированы (реагировать и реагировать), а также исходный код для App.js … за исключением того, что это выглядит много разных!

Хотя немного неприглядно, это на самом деле результат, который мы хотим. Как и обещал, Бабел повернул наш причудливой класс ES2015 + в функцию старой школы, а метки JSX были заменены вызовами, чтобы отреагировать творчество Отказ

var App = function (_Component) {
  _inherits(App, _Component);

  function App() {
    _classCallCheck(this, App);

    return _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).apply(this, arguments));
  }

  _createClass(App, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'h1',
        null,
        'Hello World!'
      );
    }
  }]);

  return App;
}(_react.Component);

Следующим шагом является запустить наш код в браузере. В каждом сборке мы создадим файл HTML из шаблона и автоматически добавлять соответствующие