Читайте также: Какой облачный сервис выбрать для бизнеса
React – это декларативная, эффективная и гибкая JavaScript-библиотека для создания пользовательских интерфейсов.
React.js увидел свет в 2013 году, разработанный как open-source проект компании Facebook*. Система очень быстро стала популярной и к 2020 году уже занимала второе место в рейтинге самых востребованных веб-фреймворков. Популярность React подтверждают и данные Google Trends – библиотека заметно оторвалась от конкурентов.
Количество интернет-ресурсов, использующих JavaScript-библиотеку React активно растет – в 2022 году «React-сообщество» насчитывает более 100 тысяч сайтов.
Чем отличается React от конкурентов? Каковы основные преимущества этой JS-библиотеки? Как создать и настроить React-приложение? В этой статье вы найдете ответы на все перечисленные вопросы.
Создание React – какие задачи решает JavaScript-библиотека?
В компании Facebook* столкнулись с необходимостью создания объемных веб-приложений, использующих данные, которые со временем изменяются. Зачем постоянно проделывать одну и ту же работу, если можно создать шаблоны для повторяющихся элементов?
Джордан Валке (разработчик ПО в Facebook*) подумал так же и создал React, где создавались шаблоны, а из них разработчики могли конструировать полновесный пользовательский интерфейс. В 2013 году компания Facebook* раскрыла исходный код библиотеки.
А два года спустя в корпорации Цукерберга «рассекретили» исходный код React Native – фреймворка для создания мобильных приложений на базе библиотеки React.
Сравнение с конкурентами: почему количество загрузок React растет?
Среди основных конкурентов React.js упоминаются Angular и Vue.js, и статистика говорит в пользу первого, но React – это не фреймворк в традиционном его понимании. Система «разговаривает» языком шаблонов и функционирует только на уровне представления. С другой стороны, вы всегда можете внедрить отдельные элементы React на своем сайте. Нет необходимости юзать сразу весь функционал системы, достаточно выбрать те элементы JS-библиотеки, которые нужны прямо сейчас.
Статистика скачивания библиотеки React в сравнении с Angular и Vue.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;
- src.
В папке Public обязательный элемент – это index.html, а в папке Src нельзя трогать файл index.js. Остальные файлы, хранящиеся в этих папках, вы можете переименовать либо удалить без вреда для функционала приложения.
Скрипты проекта React
Создание React-приложения завершено, поэтому можно переходить к настройке требуемых параметров. Оставайтесь в редакторе и откройте файл package.json, где отображены все зависимости созданного приложения (devDepencies). По умолчанию зависимости установлены только от скриптов:
“devDependencies”: {
“react-scripts”: “0.8.1”
}
В свою очередь, у скриптов уже есть свои зависимости. Настройка приложения начинается с работы с командами.
Скрипт start
Откройте терминал и введите команду npm start, чтобы начать работу с приложением. Ваш проект автоматически будет запущен в браузере. Как только вы изменяете файлы из папки Src, страница перезагружается с учетом внесенных изменений. Например, вы открывайте файл App.js и удаляете заголовок h2. Страница в браузере автоматически перезагружается уже без заголовка второго уровня. Аналогичный процесс происходит, когда вы внесете изменения в файл App.css.
Активация скрипта start позволяет разработчику получить приложение React, готовое к дальнейшей настройке.
Скрипт run build
Команда 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.
Скрипт test
Команда npm test вводится для проверки работы приложения. Скрипт активирует работу Jest, выполняющую поиск файлов spec.js или test.js, а затем запускающую найденные файлы. Результаты проверки имеют такой вид:
Мы видим, что общее количество тестовых наборов, найденных в процессе тестирования, равно одному (1 total). В этом тестовом наборе только один тест. Особенность Jest в том, что работа не прекращается после завершения тестирования. Как только в исходном коде произойдут изменения, тестирование выполняется снова.
Откройте Watch Usage, чтобы посмотреть доступные команды, управляющие тестированием:
- “F” запускает тестирование файлов, обозначенных как failed;
- “O” тестирует файлы, в которые внесены изменения.
Скрипт eject
Для запуска команды 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 продолжают работать.
Кстати, в своем официальном канале Timeweb Cloud собрали комьюнити из специалистов, которые говорят про IT-тренды, делятся полезными инструкциями и даже приглашают к себе работать.
Изменение корневой страницы 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 (плагин управляет элементами <select>). Каждый элемент <select> нужно обернуть в пустой <div>, чтобы в процессе обновления React не конфликтовал с дополнительными узлами. Возвращение <select> будет происходить внутри пустого компонента render ().
- Замена строковых шаблонов. Проект React используется для преобразования строковых шаблонов jQuery в React-компоненты:
$('#container').html('<button id="btn">Сказать «Привет»</button>'); $('#btn').click(function() {
alert('Привет!');
});
преобразуется в
function Button() {
return <button id="btn">Сказать «Привет»</button>;
}
$('#btn').click(function() {
alert('Привет!');
});
Когда строковый шаблон преобразован, к нему можно применять свойства React-проекта.
- Интеграция Backbone-моделей. Простейший способ интеграции моделей и коллекций Backbone – обработать различные события и вручную обновить компоненты. Используются компоненты change, add, remove и т.д.
Распространенные ошибки при работе с React-приложениями
Как настроить локальную среду в проекте React? Несмотря на простоту создания и настройки, разработчики часто допускают одни и те же ошибки:
- Использование больших компонентов. В случае с React лучше использовать не многозадачные компоненты, а отдельные, для каждой функции. Такой подход облегчит редактирование проекта в случае появления ошибок.
- Изменение состояния. Не используйте изменения состояния напрямую, чтобы избежать проблем с производительностью. Вносить такие изменения лучше с помощью setState метода или useState ловушки.
- Строчная передача числа. Если вы укажите числовое значение для реквизита, React получит отображение вида first/last. Заключите число в фигурные скобки, чтобы исключить данную проблему.
- Частое использование Redux. Воздержитесь от использования дополнительной библиотеки, если в вашем приложении отсутствуют компоненты параллельного уровня, между которыми нужно настроить обмен информацией.
- Нарушение структуры папок. Когда вы создаете проект React, помните, что использовать вы будете его не только для текущей задачи, но и для будущих разработок, поэтому следите за правильностью структуры дирекций.
Ошибки в работе с React допускают не только новички, но и опытные разработчики, и полностью исключить их сложно. Полезно начать с того, чтобы не попадаться на распространенные уловки.
Основные преимущества использования React
Статистика говорит о постоянном росте количества загрузок React. В чем основные преимущества библиотеки?
- Гибкость. Разработчики могут использовать React для создания UI-компонентов на разных платформах.
- Возможность установки отдельных компонентов. С помощью React вы сможете установить кнопки, логотипы, текстовые фрагменты и другие элементы сайтов.
- Удобство в использовании. В среде разработчиков React – одна из лучших веб-библиотек с точки зрения простоты и удобства.
- Постоянные обновления. Корпорация Meta* продолжает поддерживать React и выпускать для него обновления. А Facebook* и Instagram* используют более 50 тысяч React-компонентов.
- Совместимость с другими библиотеками и плагинами. Если вам нужно расширить функционал библиотеки, сторонние плагины легко интегрируются в React-компоненты.
Заключение: сила в простоте
React – это решение, которое не требует от разработчика глубоких знаний. Достаточно изучить основные скрипты и команды RCA, чтобы быстро создать React-приложение, а затем использовать его в качестве компонента UI-интерфейса.
Библиотека доступна для развертки на любых серверах. Какой сервер выбрать? Вопрос индивидуальный, но у Timeweb Cloud есть целый спектр отличных решений – мощные и сверхбыстрые серверы, которые справятся со всеми поставленными задачами.
* — Запрещены на территории Российской Федерации.
Статья оказалась полезной? Подписывайтесь, ставьте лайки и поделитесь ссылкой с друзьями.