Настройка React для ES6 с использованием Webpack и Babel

ReactJS произвел революцию в мире фронтенд-разработки. Описываемый на своей главной странице как V в MVC, React позволяет создавать переиспользуемые компоненты интерфейса и упрощает поддержку изменений в состоянии данных, абстрагируя DOM. В сочетании с утилитой сборки, такой как Webpack, React значительно облегчает создание и поддержку одностраничных приложений.

*Попробуйте библиотеку Twilio для JavaScript здесь*

Команда Facebook проделала отличную работу, поддерживая React в актуальном состоянии, и даже сделала его совместимым с новыми функциями ECMAScript 6 (ES6) — значительным обновлением языка JavaScript, которое наконец-то стало доступно для использования. К сожалению, поддержка ES6 в браузерах не так широка, как хотелось бы многим, и здесь на помощь приходят такие утилиты, как Babel. Babel позволяет писать код с использованием новых возможностей ES6, а затем транспилирует его в стандартный код ES5, который может выполняться в более старых средах JavaScript.

В этой статье мы пройдем шаги настройки двух базовых React-компонентов с использованием возможностей ES6, транспиляции их в ES5 с помощью Babel и сборки с использованием Webpack. Это будет интересно, потому что React, ES6, Babel и Webpack отлично работают вместе.

Прежде чем начать писать код, нам нужно установить необходимые инструменты. Сначала убедитесь, что у вас установлены NodeJS и npm, так как мы будем использовать их для установки нужных пакетов.

После установки Node и npm откройте терминал, перейдите в директорию, где будет располагаться ваш проект, и выполните команду:

Пройдите все шаги, заполняя необходимую информацию, и будет создан файл package.json. Это позволит нам отслеживать, какие модули Node нам понадобятся в будущем.

Теперь установим React и React DOM:

Нам также потребуется установить Webpack и сервер разработки Webpack для обслуживания нашего собранного JavaScript-приложения. Возможно, вам понадобится использовать «sudo» для глобальной установки пакета сервера разработки.

Теперь, когда наш инструмент сборки установлен, нам нужен транспилятор для интерпретации нашего кода ES6. Здесь на помощь приходит Babel. Установим пакеты babel-loader и babel-core, которые мы будем использовать с Webpack, а также пресеты ES2015 и React для загрузки кода, который мы будем писать.

В React компоненты являются отдельными строительными блоками для отображения ваших данных. Вы пишете компоненты, чтобы определить, как должны выглядеть ваши данные и автоматически отображать изменения состояния. При создании компонента вы определяете все это, переопределяя функцию render в React.Component.

Давайте начнем с написания нашего первого компонента, задача которого — отобразить слово «Hello» в браузере.

Откройте новый файл с именем «hello.jsx» в вашем текстовом редакторе и введите следующий код:

Есть несколько моментов, на которые стоит обратить внимание в синтаксисе. Во-первых, у нас есть операторы импорта ES6 и определения классов, что делает наш код более лаконичным, избавляя от необходимости вызывать React.createClass. Также в определении класса компонента в функции render присутствует странный HTML-подобный код. Этот XML-подобный синтаксис, возвращаемый из функции, называется JSX. Он был разработан для упрощения создания React-компонентов, так как он краток и привычен для определения древовидных структур с атрибутами.

Весь этот новый синтаксис может выглядеть немного непривычно, но не волнуйтесь, потому что совсем скоро мы используем Babel для транспиляции как синтаксиса ES6, так и JSX в JavaScript ES5, который может выполняться в браузере.

Вот как выглядит наш компонент Hello React без использования ES6 и JSX:

Когда мы используем JSX, мы можем более лаконично определять элементы виртуального DOM, не вызывая `React.createElement` и не передавая атрибуты, которые должен иметь элемент. Наш простой компонент Hello может иметь такое же количество строк кода, но JSX значительно упрощает работу по мере увеличения количества компонентов и их объединения.

Теперь, когда у нас есть класс компонента, нам нужно добавить код для «монтирования» этого компонента к элементу DOM. Это позволит взять наш React-компонент и отобразить его внутри элемента HTML-страницы. Для этого мы импортируем React DOM и вызовем его функцию render, передав объект компонента и реальный элемент DOM для привязки.

Откройте файл «hello.jsx» еще раз и добавьте следующие строки:

Теперь создадим второй компонент, задача которого — отобразить слово «world». Создайте новый файл с именем «world.jsx» и добавьте следующий код. Обратите внимание, что он очень похож на код, который мы написали для нашего первого компонента:

У нас есть два React-компонента, но пока негде их использовать. Давайте исправим это, написав простую HTML-страницу, содержащую элемент `