Создание React-приложения

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 продолжают работать.

Изменение корневой страницы 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. В чем основные преимущества библиотеки?

1. Гибкость. Разработчики могут использовать React для создания UI-компонентов на разных платформах.
2. Возможность установки отдельных компонентов. С помощью React вы сможете установить кнопки, логотипы, текстовые фрагменты и другие элементы сайтов.
3. Удобство в использовании. В среде разработчиков React – одна из лучших веб-библиотек с точки зрения простоты и удобства.
4. Постоянные обновления. Корпорация Meta* продолжает поддерживать React и выпускать для него обновления. А Facebook* и Instagram* используют более 50 тысяч React-компонентов.
5. Совместимость с другими библиотеками и плагинами. Если вам нужно расширить функционал библиотеки, сторонние плагины легко интегрируются в React-компоненты.

Заключение: сила в простоте

React – это решение, которое не требует от разработчика глубоких знаний. Достаточно изучить основные скрипты и команды RCA, чтобы быстро создать React-приложение, а затем использовать его в качестве компонента UI-интерфейса.

Библиотека доступна для развертки на любых серверах. Какой сервер выбрать? Вопрос индивидуальный, но у Timeweb Cloud есть целый спектр отличных решений – мощные и сверхбыстрые серверы, которые справятся со всеми поставленными задачами.

Кстати, в своем официальном канале Timeweb Cloud собрали комьюнити из специалистов, которые говорят про IT-тренды, делятся полезными инструкциями и даже приглашают к себе работать. 

* — Запрещены на территории Российской Федерации.