Материал подготовлен командой Simple-Server для администраторов VPS и выделенных серверов. Команды и пути проверяйте на тестовой машине перед production.
Создание React – какие задачи решает JavaScript-библиотека?
В компании Facebook* столкнулись с необходимостью создания объемных веб-приложений, использующих данные, которые со временем изменяются. Зачем постоянно проделывать одну и ту же работу, если можно создать шаблоны для повторяющихся элементов?
Джордан Валке (разработчик ПО в Facebook*) подумал так же и создал React, где создавались шаблоны, а из них разработчики могли конструировать полновесный пользовательский интерфейс. В 2013 году компания Facebook* раскрыла исходный код библиотеки.
А два года спустя в корпорации Цукерберга «рассекретили» исходный код React Native – фреймворка для создания мобильных приложений на базе библиотеки React.
Сравнение с конкурентами: почему количество загрузок React растет?
Среди основных конкурентов React.js упоминаются Angular и Vue.js, и статистика говорит в пользу первого, но React – это не фреймворк в традиционном его понимании. Система «разговаривает» языком шаблонов и функционирует только на уровне представления. С другой стороны, вы всегда можете внедрить отдельные элементы React на своем сайте. Нет необходимости юзать сразу весь функционал системы, достаточно выбрать те элементы JS-библиотеки, которые нужны прямо сейчас.
Create React App – как упростить жизнь разработчикам
Как было? Создание приложения React требовало от разработчика погружения в процесс, а там уже предстояло построить систему для сборки, подключить компилятор для создания «всеядного» кода под разные браузеры, создать базовую структуру директорий. В итоге React не сильно облегчал жизнь при создании нового проекта.
Как стало? Увидело свет приложение Create React App , и все необходимые JS-пакеты уже включены в него. А еще данный интерфейс командной строки автоматически обновляет страницу, когда разработчик изменяет код.
Создание проекта React стало намного проще. Настройкой системы сборки, компиляцией кода и его кроссбраузерностью теперь занимается Create React App, позволяя разработчикам создавать проекты даже при базовой подготовке.
Инструмент CRA позволяет получить уже готовый код, а затем развернуть его на сервере. Под эту задачу подойдут как локальные, так и облачные серверы.
Создание проекта React: пошаговое руководство
Шаг 1. Установка Create React App
Для создания и настройки React-приложения потребуется установить Node.js, поскольку установка Create React App выполняется с помощью менеджера пакетов npm, входящего в состав Node.js.
Откройте терминал и введите команду для скачивания приложения:
your_file_path\react>npm install create-react-app -gФлаг -g используется для глобальной установки утилиты, а вместо _your_file_path _укажите свой путь для установки приложения.
Шаг 2. Создание нового React-приложения
Когда установка утилиты завершена, переходите к созданию нового проекта. В терминале пропишите следующую команду:
your_file_path\react>create-react-app new-appВместо new-app разработчик может задавать любое имя проекта.
Команда активирует процесс установки проекта. Вы увидите сообщение об успешном завершении установки нового React приложения:
Success! Created new-app at your_file_path \react\new-app. Inside that directory, you can run several commends.Система информирует разработчика, что внутри директории можно активировать ряд команд и предлагает краткое описание каждой команды (npm start, npm run build, npm test и npm run eject).
Шаг 3. Запуск созданного React-проекта в редакторе
Не спешите активировать предложенные команды, откройте свой new-app (или другое приложение) в редакторе. Вы увидите две папки с файлами:
В папке Public обязательный элемент – это index.html , а в папке Src нельзя трогать файл index.js. Остальные файлы, хранящиеся в этих папках, вы можете переименовать либо удалить без вреда для функционала приложения.
Создание React-приложения завершено, поэтому можно переходить к настройке требуемых параметров. Оставайтесь в редакторе и откройте файл package.json , где отображены все зависимости созданного приложения (devDepencies). По умолчанию зависимости установлены только от скриптов:
“devDependencies”: {
“react-scripts”: “0.8.1”
}В свою очередь, у скриптов уже есть свои зависимости. Настройка приложения начинается с работы с командами.
Откройте терминал и введите команду _npm start_ , чтобы начать работу с приложением. Ваш проект автоматически будет запущен в браузере. Как только вы изменяете файлы из папки Src, страница перезагружается с учетом внесенных изменений. Например, вы открывайте файл App.js и удаляете заголовок h2. Страница в браузере автоматически перезагружается уже без заголовка второго уровня. Аналогичный процесс происходит, когда вы внесете изменения в файл App.css.
Активация скрипта _start_ позволяет разработчику получить приложение React, готовое к дальнейшей настройке.
Команда _npm run build_ активируется, когда разработчик готов к созданию рабочей версии приложения. Данная команда выполняет готовую сборку, группируя все необходимые файлы.
Вы получите сообщение: _The build folder is ready to be deployed_. Это значит, что сборка вашего приложения минифицирована и готова к развертыванию в рабочей среде. При создании минифицированной версии вы увидите, что система предлагает разработчикам развернуть приложение вручную:
npm install -g pushstate-server
pushstate-server build
start http://localhost:9000Также команда run build расскажет вам, какой размер файлов вы получаете после компиляции кода в сборку, готовую для развертывания в рабочей среде. Активация команды добавит к имеющимся папкам еще одну директорию – build.
Команда _npm test _вводится для проверки работы приложения. Скрипт активирует работу Jest, выполняющую поиск файлов spec.js или test.js , а затем запускающую найденные файлы. Результаты проверки имеют такой вид:
Мы видим, что общее количество тестовых наборов, найденных в процессе тестирования, равно одному (1 total). В этом тестовом наборе только один тест. Особенность Jest в том, что работа не прекращается после завершения тестирования. Как только в исходном коде произойдут изменения, тестирование выполняется снова.
Откройте Watch Usage, чтобы посмотреть доступные команды, управляющие тестированием:
- “F” запускает тестирование файлов, обозначенных как failed;
- “O” тестирует файлы, в которые внесены изменения.
Для запуска команды eject наберите в терминале _npm run eject_. Настройка проекта React с помощью приложения React Create App выполняется автоматически. Это значит, что инструменты Babel и Webpack настраиваются по умолчанию.
Интеграция Babel позволяет разработчикам использовать новые стандарты ECMAScript, а инструменты Webpack дают возможность разделять проект на модули, используют новый синтез экспорта и импорта, импортируют изображения и стили напрямую в JS-файлы.
Если же разработчика не устраивает работа встроенных компонентов по умолчанию, изменить это можно с помощью скрипта eject.
Как только вы вписали команду в терминал, система вас предупреждает о необратимости этого процесса:
Are you sure you want to eject? This action is permanent. [y/N]Подтвердите действие, если уверены в своем желании внести корректировки в работу приложения. Когда выполнение команды _eject_ будет завершено, вы увидите новую директорию в редакторе – появляется папка config. А в файле package.json отобразятся все зависимости проекта.
Активация команды eject дает разработчику полный контроль над рабочей средой. В этом режиме скрипты start и test продолжают работать.
Изменение корневой страницы React-проекта
Как только вы активировали команду start, ваше React-приложение отображается в браузере. Вы сможете редактировать корневую страницу, которая выступает основой созданного вами приложения. Настройки корневой страницы вы найдете в папке Public. В этой директории хранятся такие файлы:
- Значки, отображаемые в браузере или в мобильной версии: favicon.ico, logo192.png, logo512.png (подходящий размер выбирается браузером автоматически).
- Свод метаданных для вашего приложения хранится в файле manifest.json.
- В файле robots.txt указаны команды для поисковых роботов – какие страницы индексируются, а какие – нет.
Файл index.html – основа директории Public, поскольку этот файл считывается сервером, и благодаря ему корневая страница отображается в браузере.
Вообще, без необходимости файлы из папки Public рекомендуется не трогать, чтобы не допустить неправильного отображения страницы в браузере.
Файл index.html подсказывает приложению, куда вставляется код. Файл достаточно легковесный, поскольку все HTML-структуры вставляются при помощи JavScript, однако в файле обязательно должны быть корневые элементы, подсказывающие React, куда помещать код.
_< div id="root"></div>_ - как минимум один такой элемент в файле index.html должен присутствовать.
Если корневых элементов в файле не будет, React не найдет, куда вставить сгенерированный код, поэтому браузер выдаст ошибку.
Изменение заголовков и стилей
Изменения в файлах Public касаются главной страницы, а настройки второй директории вносят корректировки в заголовки и стили приложения. Запуск проекта React подразумевает наличие папки Src по умолчанию. Какие файлы вы найдете в этой папке, и какие настройки можно выполнить разработчику?
- ServiceWorker.js – на начальном этапе создания React-приложений применяется редко, нужен для прогрессивных веб-приложений.
- SetupTests.js и App.test.js – нужны для запуска приложения в тестовом формате (через команду test, которую мы разобрали ранее).
- Файлы стилей (App.css, index.css и logo.svg).
- Файлы App.js и index.js для импорта и преобразования элементов в JavaScript.
Приложение использует Webpack, поэтому статические элементы необходимо импортировать как JS-файлы. Кроме того, можно подключить дополнительную библиотеку для стилизации проекта (например, Styled-components).
Сброс заданных стилевых параметров выполняется командой @import-normalize. Когда статических ресурсов слишком много, возможно их перемещение в папку Public:
<img src={process.env.PUBLIC_URL + '/img/logo.png'} />Импорт компонентов с применением абсолютного пути выполняется через файлы jsconfig.json или tsconfig.json (создаются в корневой директории):
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}Подготовка React-приложения к развертке
Создание и настройка проекта React завершается сборкой приложения, которая позволит разработчикам развернуть приложение на сервере.
Сборка активируется командой _run build_ , которая создаст новую директорию build. Там вы найдете файл index.html , где и собран минифицированный код, готовый к развертке на сервере.
Созданный код не предназначается для чтения человеком. Основная задача – минификация, чтобы скомпилированный код занимал как можно меньше места, при этом оставаясь рабочим. Полученный код можно развернуть на сервере, чтобы запустить созданный React-проект.
Дополнительные плагины для React-приложений
Для расширения функционала созданных приложений потребуются дополнительные плагины. В работу React-проекта можно интегрировать сторонние плагины библиотек jQuery и Backbone. Как совместить решение с другими библиотеками? Приведем несколько примеров:
- Интеграция с Chosen (плагин управляет элементами