Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Настраиваем React среду, часть 4

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Set Up a React Environment.
Set Up a React Environment, Part 3

Russian (Pусский) translation by Anton Lisovsky (you can also view the original English article)

Раньше React был известен тем, что на нём было проблематично начать создавать приложение, так как вам нужно понимать, как настроить инструменты сборки самостоятельно. Всё это необходимо было сделать, до того как вы напишите хотя бы одну строку React кода.

Инструмент create-react-app значительно помог с решением данной проблемы, теперь любой может создать полностью рабочее React приложение, без каких-либо знаний конфигурации инструментов сборки. create-react-app подойдёт для большинства приложений, особенно если вы новичок в React.

Как только вы станете более опытным при работе с React, у вас могут появиться свои потребности для приложения и следовательно кастомная конфигурация файлов настройки. В этом случае, следует знать как настроить инструменты сборки самостоятельно, однако create-react-app по умолчанию прячет данные инструменты.

В этом туториале я покажу вам, как настроить приложение React, самостоятельно сконфигурировав инструменты сборки. Надеюсь после это у вас появится желание экспериментировать с более сложными настройками.

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

Вы готовы создать ваше первое React приложение с нуля? Давайте приступим.

Создаём файловую структуру приложения

Чтобы продемонстрировать как настроить инструменты сборки React, мы создадим такое же, очень простое, React приложение, как в предыдущий туториалах этой серии.

Начните с создания папки под названием my-first-components-build, после чего откройте командную строку и переместитесь в данную папку.

Запустите команду npm init для создания package.json. Данный файл содержит информацию о инструментах сборки нашего приложения, а также некоторые дополнительные настройки. При создании файла продолжайте нажимать Enter (примерно десять раз) пока процесс инициализации не будут завершён.

Если вы выбрали все опции по умолчанию, package.json будет выглядеть следующим образом:

Теперь нам надо добавить React и ReactDOM скрипты в наш проект. Мы сделаем это с помощью npm, пакетный менеджер Node.js.

В той же директории, введите:

Это установит как React так и ReactDom, а также зависимости необходимые для обоих модулей. Вы заметите директорию node_modules, в которую и были установлены все модули.

Node modules folder

Если посмотреть на файл package.json, новое свойство dependencies было добавлено, содержащие информацию о каждом node модуле, который был установлен.

Это Благодаря опции --save, указанную во время выполнения команды npm install. Данная опция сообщает npm что мы хотим отслеживать зависимости нашего проекта. Очень важно, на тот случай если планируете распространять, переносить свой проект.

Чаще всего папка node_modules довольно большая и вы не хотите перемещать её. Проект распространяется без данной папки. Когда кто-то скачает проект, всё что им нужно это запустить npm install, чтобы поставить все зависимости из package.json.

Обратите внимание: в npm 5.x, установленные модули автоматически сохраняются в pcakge.json. Вам больше не нужно в ручную указывать опцию --save.

Внутри папки my-first-components-build, создайте новую папку src, и добавьте туда файл index.js. Мы вернёмся к этому позже, когда начнём создавать React приложение, как только закончим с файлами конфигурации проекта.

Добавьте файл index.html, со следующим кодом в эту же папку:

Нам нужно скомпилировать наше приложение в один JavaScript файл и использовать при этом JSX, ES6 классы и модули. Для этого установим модули Webpack и Babel, посредством npm.

Давайте сперва поставим Babel. Напишите следующее в окне командной строки:

Будут установлены все необходимые модули для Babel, чтобы компилировать ES6 и JSX код, в обычный JavaScript.

Теперь давайте установим Webpack, с помощью командной строки, как обычно:

Будут установлены все модули для Webpack, локальный веб-сервер, можно создать динамически файл index.html с помощью Webpack, в папке public, которую мы создали в каталоге src. Также могут быть созданы динамические ссылки для необходимых HTML файлу, файлов JavaScript, каждый раз во время сборки приложения.

После этого будут установлены новые модули, наш package.json файл будет выглядеть следующим образом:

Однако на этот раз, Webpack и Babel зависимости будут сохранены в package.json, в качестве dev dependencies.

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

Конфигурация Webpack

Чтобы Webpack собрал приложение и сделал из него один файл, нам нужно сконфигурировать настройки. Внутри корневого каталога приложения, создайте webpack.config.js, который будет использоваться для хранения настроек необходимых Webpack.

Webpack нам нужен, чтобы делать три вещи

  • Компилировать ES6/JSX код в JavaScript (с помощью Babel).
  • Для сборки приложения в один JavaScript файл.
  • Создания файла index.html, добавления необходимых JavaScript файлов, внутри index.html.

Внутри webpack.config.js, добавьте:

Не стоит слишком беспокоиться о синтаксисе на данный момент; просто осмотритесь и попытайтесь понять, что происходит.

Всё что мы делаем, так это экспортируем JavaScript объект с определёнными свойствами, которые отвечают за то, как Webpack будет собирать приложение. Свойство entry указывает начальный файл React приложения, который в нашем случае является index.js. Свойство output указывают путь и название файла, который мы получим после сборки.

Касательно самого процесса сборки, мы хотим, чтобы Webpack обрабатывал все JavaScript файлы компилятором Babel, для трансформации JSX/ES6  в обычный JavaScript. Мы делаем это с помощью свойства module. Указывается регулярное выражение, которое запускает Babel трансформации только для JavaScript файлов.

Для завершения настройки Babel, необходимо добавить вхождение в package.json, которое указывает какие Babel трансформации мы хотим совершить над JavaScript файлами. Откройте package.json и добавьте туда свойство babel:

Тем самым будут запускаться трансформации на каждом JavaScript файле нашего проекта. Трансформация env сконвертирует ES6 JavaScript в стандартный JavaScript, который будет совместим со всеми браузерами. Трансформация react будет компилировать JSX код в вызовы функции createElement(), которые являются валидными функциями обычного JavaScript.

Теперь, вернёмся к нашему файлу webpack.config.js.

Последнее свойство - plugins, содержит специальные операции, которые мы хотим выполнить во время процесса сборки. В нашем случае, нам нужен Webpack для создания index.html, со ссылками на JavaScript файлы. Мы также указываем на существующий файл index.html (который мы создали ранее), данный файл будет использоваться в нашем шаблоне, для создания итогового index.html.

Сборка и тестирование

Теперь давайте добавим свойство script в наш package.json. Кстати, вы можете добавить сколько угодно скриптов, для выполнения различных задач. В нашем случае, нам нужно только запускать Webpack, так что в package.json удалите скрипт "test" и замените его на: 

Прежде чем начать тестировать процесс сборки, добавьте компонент React в index.js, тем самым у нас будет что отображать.

Должно быть уже знакомо, если вы до этого читали туториалы из этой серии.

Из командной строки, запустите:

Немного подождав, вы должны увидеть новую директорию public внутри my-first-components-build, содержащую index.html и index.js. Откройте index.html, чтобы увидеть как выглядит результат работы React приложения.

Test React app

Обратите внимание на JavaScript файл, который был добавлен для нас и как компонент был отображён для корректного DOM элемента.

Автоматизация процесса компиляции

После того как вы начнёте делать множество изменений в приложении, вы заметите, как утомительно вручную редактировать файл, сохранять его, запускать снова команду сборки и перезагружать страницу браузера, чтобы увидеть изменения.

Наконец, мы можем использовать мини сервер Webpack, который был установлен ранее для автоматизации данного процесса. Добавьте скрипт в package.json, так чтобы свойство 'scripts' выглядело следующим образом:

Теперь запустите:

После нескольких секунд, откроется новая вкладка в браузере с работающим приложением. URL указывает на локальный сервер, вместо определённого локального файла. Сделайте небольшие изменения в index.js, который располагается в папке src и сохраните его. Обратите внимание, что приложение автоматически обновится в браузере, практически мгновенно и вы увидите сделанные вами изменения.

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

Обратите внимание: сервер Webpack не собирает приложение по новой, изменения хранятся в кэше, поэтому браузер обновляется так быстро. Это означает, что изменения не будут влиять на папку public. По факту, вы можете удалить полностью данный каталог, в то время как работает Webpack сервер.

Когда вам нужно собрать приложение, вы можете просто запустить npm run build для создания папки public, на тот случай если вам нужно перемещать готовое приложение.

Финальные штрихи для нашего приложения

Чтобы всё было готово. Давайте добавим два небольших компонента, которые мы использовали в предыдущих туториалах.

Добавьте две новые строки в корень проекта, под названием MyFirstComponent.js и MySecondComponent.js. В MyFirstComponent.js добавьте следующий код:

А в MySecondComponent.js, добавьте:

Для использования данных компонентов в нашем приложении, обновите index.js, добавив код:

Мы получим тот же результат что и раньше, за исключением того, что на этот раз мы вручную настроили сборку React приложения.

Finished React app

Шаблоны настройки React для повторного использования

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

Вы можете даже создать набор определённых сборок с которыми можно начать работу над различными React приложениями, после чего сохранить их на GitHub. Затем клонировать репозиторий с начальной конфигурацией проекта, после чего запустить npm init для установки необходимых Node.js модулей.

Скачайте и установите проект

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

Нажмите ссылку Download Attachment в правом сайдбаре, будут загружен .zip файл проекта. После того как загрузка завершится, распакуйте данный архив, откройте командную строку. Убедитесь, что находитесь в директории my-first-components-build

Введите следующие команды, для установки и компиляции React приложения.

Первая команда скачает модули Node.js, необходимые проекту, на это потребуется минута или две. Следующая команда скомпилирует React приложение и запустит мини сервер, показав вам результат в браузере.

Попробуйте сделать изменения в React приложении. Каждый раз сохранив их, ваше приложение повторно скомпилируется и окно браузера автоматически обновится, отобразив новую версию приложения.

Когда вы хотите собрать проект для распространения, запустите команду.

Заключение

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

Как только вы освоитесь с настройкой сборки React, я думаю процесс разработки приложение порадует вас. Я буду рад услышать ваши комментарии. Дайте мне знать какой проект вы хотите создать с React!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.