Как запустить реакт приложение в браузере
Используйте React в том объеме, в котором вам это необходимо.
React с самого начала был разработан для постепенного внедрения. Вы можете использовать React в том объеме, в котором вам это необходимо. Возможно, вы просто хотите добавить немного интерактивности на существующую страницу, в этом случае компоненты React - отличный способ это осуществить.
Большинство веб-сайтов не являются или не должны быть одностраничными приложениями. С несколькими строками кода и без инструментов для сборки попробуйте использовать React в небольшой части вашего сайта. Затем вы можете либо постепенно расширить его присутствие, либо сохранить в нескольких динамических виджетах.
1.2.1 Добавить React за одну минуту
В данном разделе мы покажем, как добавить компонент React в существующую HTML-страницу. Вы можете использовать как свой собственный веб-сайт, так и создать пустой HTML-файл для практики.
Не будет никаких сложных инструментов или требований к установке - чтобы освоить данный раздел, вам нужно только подключение к Интернету, и минута времени.
1.2.1.1 Шаг 1. Добавьте DOM-контейнер в HTML
Сначала откройте HTML-страницу, которую вы хотите редактировать. Добавьте пустой тег , чтобы отметить место, где вы хотите что-либо отобразить с помощью React. Например:
Мы дали данному тегу уникальный HTML-атрибут id . Позже это позволит нам найти его из кода JavaScript и отобразить внутри него компонент React.
Вы можете поместить контейнер в любом месте внутри тега . На одной странице может быть любое количество независимых контейнеров DOM. Обычно они пусты - React заменяет любой существующий контент внутри DOM-контейнеров.
1.2.1.2 Шаг 2. Добавьте теги script
Затем добавьте на страницу HTML три тега прямо перед закрывающим тегом :
Первые два тега загружают React. Третий загрузит код вашего компонента.
1.2.1.3 Шаг 3. Создайте компонент React
Создайте файл с именем like_button.js рядом с вашей HTML-страницей.
Откройте этот стартовый код и вставьте его в созданный вами файл.
Данный код определяет компонент React с именем LikeButton . Не беспокойтесь, если он вам непонятен - мы расскажем о строительных блоках React позже в нашем практическом руководстве и основных концепциях. А пока давайте просто покажем его на экране!
Эти две строки кода находят , который мы добавили в наш HTML на первом шаге, а затем отображают React-компонент-кнопку «Like», внутри него.
1.2.1.4 Вот и всё!
Четвертого шага нет. Вы только что добавили первый компонент React на свой сайт.
В следующих разделах вы найдете дополнительные советы по интеграции React.
1.2.1.5 Подсказка: используйте компонент повторно
Часто вам может потребоваться отобразить компоненты React в нескольких местах на странице. Здесь представлен пример, который отображает кнопку «Like» три раза и передает ей некоторые данные:
Такая стратегия в основном полезна в тех случаях, когда части страницы, использующие на React, изолированы друг от друга. Однако внутри кода React проще использовать композицию компонентов.
1.2.1.6 Подсказка: минимизируйте JavaScript для продакшен
Перед развертыванием вашего веб-сайта на продакшене, имейте в виду, что не минимизированный JavaScript может значительно замедлить страницу.
Если вы уже минимизировали код, ваш сайт будет готов к продакшену, если вы убедитесь, что развернутый HTML загружает версии React, заканчивающиеся на production.min.js:
Если у вас пока нет шага минимизации вашего кода JavaScript, вот один из способов его настройки.
1.2.2 Дополнительно: попробовать React с JSX
Однако React также предлагает вариант использования JSX:
Эти два фрагмента кода эквивалентны. Хотя JSX не является обязательным, многие считают его полезным для написания кода UI - как с React, так и с другими библиотеками.
Вы можете поиграть с JSX, используя данный Код
Теперь вы можете использовать JSX в любом теге , добавив к нему атрибут type="text/babel" . Вот пример HTML-файла с JSX, который вы можете скачать и поиграться.
Такой подход хорош для изучения и создания простых демонстраций. Тем не менее, он делает ваш сайт медленным и не подходит для продакшен. Когда вы будете готовы двигаться дальше, удалите этот новый тег и добавленные вами атрибуты type="text/babel" . Вместо этого в следующем разделе вы настроите препроцессор JSX для автоматического преобразования всех ваших тегов .
1.2.2.2 Добавить JSX в проект
Для добавления JSX в проект не требуются сложные инструменты, такие как сборщик или сервер разработки. По сути, добавление JSX очень похоже на добавление препроцессора CSS. Единственное требование - наличие Node.js на вашем компьютере.
Перейдите в папку вашего проекта в и вставьте эти две команды:
Шаг 1: выполните npm init -y (если не сработает, здесь исправление)
Здесь мы используем npm только для установки препроцессора JSX, ни для чего больше. И React, и код приложения могут оставаться в виде тегов без изменений.
Поздравляем! Вы только что добавили в свой проект готовую к продакшену настройку JSX.
1.2.2.3 Запустить JSX препроцессор
Создайте папку с названием src и выполните следующую команду терминала:
Не ожидайте её завершения - эта команда запускает автоматический наблюдатель для JSX.
Если теперь вы создадите файл с названием src/like_button.js с этим стартовым кодом JSX, наблюдатель создаст предварительно обработанный like_button.js с нативным кодом JavaScript, понимаемым браузером. Когда вы редактируете исходный файл с JSX, преобразование будет перезапущено автоматически.
В качестве бонуса это преобразование также позволяет вам использовать современные функции синтаксиса JavaScript, такие как классы, не беспокоясь о поломке старых браузеров. Инструмент, который мы только что использовали, называется Babel, и вы можете узнать о нем больше из документации.
Если вы почувствовали, что хорошо ознакомились с инструментами сборки и хотите получить от них больше, в следующем разделе описаны некоторые из самых популярных и доступных наборов инструментов. Если нет - представленные script теги также являются отличным решением!
В настоящее время React является самой популярной библиотекой JavaScript для создания пользовательских интерфейсов, и в обозримом будущем эта тенденция сохранится. В этой статье мы рассмотрим способы быстрой и безболезненной настройки React. Так что мы можем погрузиться прямо в программирование!
Почему React?
Для непосвященных React позволяет нам создавать чрезвычайно быстрые веб-приложения с помощью Virtual DOM - по сути, он отображает только то, что ему нужно. Предоставление легкой альтернативы традиционному способу работы напрямую с DOM.
React также продвигает рабочий процесс на основе компонентов, что означает, что ваш пользовательский интерфейс - это просто набор компонентов. Поскольку вы будете строить с применением модульности, ваш код будет состоять из аккуратных отдельных частей. И это также очень полезно при работе в командах, люди могут работать над частями проекта, продолжая при этом работать вместе над большим проектом.
Установка и настройка
Есть несколько способов начать работу с React. Во-первых, мы взглянем на CodeSandbox и CodePen. Если вы хотите сразу начать играть с кодом, это хороший способ!
Затем мы сосредоточимся на установке проекта React с помощью Create React App - которое дает вам отличную отправную точку для ваших проектов без необходимости тратить время на настройку среды сборки.
React в CodeSandbox
CodeSandBox - это онлайн-редактор кода, который вы можете использовать для быстрого запуска и запуска проекта React.
Мгновенно вы окажетесь в среде React, которая была настроена с помощью create-react-app. Мы рассмотрим этот метод далее в статье! Если вы хотите начать программирование без настройки локальной установки, это отличный способ! Такие задачи, как сборка, преобразование и управление зависимостями, все автоматизированы, и вы можете легко поделиться ссылкой на все, над чем вы работали!
React в CodePen
Альтернативой CodeSandBox является CodePen . Многие разработчики используют CodePen для демонстрации своей работы, создавая «прототипы» для быстрых демонстраций кода или «проекты», когда задействовано несколько файлов. CodeSandbox, безусловно, более многофункциональный для работы с React, однако CodePen также является хорошим решением.
Создаем приложение React
Create React App - это инструмент (созданный разработчиками из Facebook), который даст вам огромное преимущество при создании приложений React. Он обрабатывает все настройки, поэтому вам не нужно знать ни Babel, ни Webpack. Вы просто запускаете первоначальную установку, и вы сразу же окажетесь в локальной среде разработки!
Установка с помощью Create React App
Все, что нам нужно сделать, это открыть наш терминал и запустить следующую команду:
Мы используем npx для загрузки и запуска команд Node.js без их установки. Если у вас не установлен Node, вы можете скачать его здесь .
Запустите указанную выше команду, чтобы начать установку! Дайте ему любое имя, которое вам нравится..
Установка может занять несколько минут. Прямо сейчас он устанавливает все зависимости, необходимые для построения вашего проекта. И это также генерирует вашу первоначальную структуру проекта.
Успех! Теперь вы можете открыть папку вашего проекта и проверить созданную файловую структуру.
Несколько команд были добавлены в файл package.json :
- npm start запускает сервер разработки, включая автоматическую перезагрузку страницы при внесении изменений
- npm run build связывает приложение в статические файлы для производства в папку build
- npm test запускает тестов с помощью Jest
- npm run eject выводит настройки вашего приложения из create-react-app, которые позволяет вам настроить конфигурацию вашего проекта
Запуск вашего приложения
Теперь давайте запустим наш локальный сервер! Из папки вашего приложения запустите:
Ваше приложение запустится в браузере на localhost:3000
Каждый раз, когда вы начинаете новый проект с помощью create-react-app, вы будете иметь последнюю версию React, React-DOM и React-Scripts. Теперь давайте кратко рассмотрим некоторые функции create-react-app.
Возможности Create-React-App
Как вы увидите в сгенерированном package.json , есть ряд команд, которые доступны для использования в ваших приложениях - давайте поговорим о них немного подробнее.
Прод сборка
Когда приходит время перейти от разработки к публикации в сети, вы можете сделать это, запустив npm run build . Будет сгенерирована папка build , содержащая все статические файлы, которые будут использоваться на сервере.
Сама команда build преобразует ваш код React в код, который понимает браузер (используя Babel). Он также оптимизирует ваши файлы для лучшей производительности, объединяя все ваши файлы JavaScript в один файл, который будет минимизирован для сокращения времени загрузки.
Тестирование вашего приложения
В комплекте с create-react-app поставляется JEST, который позволяет проверить ваш код с помощью команды npm test . Он будет запускаться аналогично npm start , он будет перезапускать ваши тесты каждый раз, когда вы вносите изменения.
Для тех, кто заинтересован в тестировании компонентов с помощью Jest, все, что вам нужно, это либо добавить суффиксы к нужным файлам, .spec.js либо .test.js , либо переместить файлы с тестами в папку __tests__ . Jest запустит ваши тесты для указанных вами файлов.
Ejecting
Всякий раз, когда вы создаете приложение с помощью create-react-app, ваши параметры сборки не могут быть изменены, так как они были предварительно настроены в react-scripts. Тем не менее, запустив npm run eject , вы можете получить полный контроль над конфигурацией вашего приложения.
Конфиг будет скопирован в каталог вашего приложения в папку config , а скрипты - в папку scripts . Затем вы можете отредактировать настройки Webpack, Babel и ESLint в соответствии с вашими пожеланиями.
Опечатки и синтаксические ошибки приведут к ошибке компиляции. И если у вас есть куча ошибок, вы получите оверлей, разбивающий каждую, например так:
Заключение
Мы видели, как начать играть с React в CodeSandbox и CodePen. И мы рассмотрели, как настроить локальную среду разработки с помощью create-react-app. Вам не нужно тратить время на установку зависимостей или настройку процесса сборки - вы можете сразу перейти к написанию кода!
Если вы просто хотите побаловаться с React, то можете использовать онлайн-площадку для кода. Попробуйте пример Hello World на CodePen или CodeSandbox .
1.2.1.2 Минимальный HTML-шаблон
Если вы предпочитаете использовать собственный текстовый редактор, вы также можете загрузить этот HTML-файл , отредактировать и открыть его из локальной файловой системы в своем браузере. Он выполняет медленное runtime-преобразование кода, поэтому мы рекомендуем использовать его только для простых демонстраций.
Если вы хотите использовать React для полноценного приложения, то переходите к изучению следующих разделов «Создание приложения на React» и «Добавление React в существующее приложение».
1.2.2 Следующие шаги
1.2.2.1 Быстрый старт
- Перейдите к разделу «Быстрый старт» для пошагового ознакомления с концепциями React.
- Перейдите к разделу «Для продвинутых» для более глубокого изучения.
1.2.2.2 Полноценная среда разработки
Более легкие решения выше подходят, если вы новичок в React или просто экспериментируете.
Когда вы будете готовы создать свое первое приложение с помощью React, ознакомьтесь с руководствами по установке ниже. Эти настройки предназначены для того, чтобы вы могли работать, используя богатый опыт разработчиков и были готовы к продакшену. Они включают в себя встроенный линт, тестирование и оптимизацию, однако для их установки и конфигурации требуется больше времени и места на диске.
- Добавление React в новое приложение: создайте новое приложение с полнофункциональным стартовым комплектом.
- Добавление React в существующее приложение: добавьте React в систему сборки или большее приложение.
1.2.3 Добавить React в новое приложение
Самый простой способ начать работу над новым проектом React - это использовать стартовый комплект.
На данной странице описывается настройка одностраничного приложения со всем необходимым для удобного процесса разработки, включая линт, тестирование, оптимизацию продакшен и многое другое. Полнофункциональные инструменты, такие как эти, для установки требуют некоторое время и место на диске.
Если вы не создаете одностраничное приложение, вы можете либо добавить React в существующий конвейер сборки, либо использовать его из CDN без стадии сборки.
1.2.3.1 Создание React-приложения
Пример Create React App - это лучший способ начать разработку нового одностраничного приложения React. Он настраивает вашу среду разработки, чтобы вы могли использовать новейшие функции JavaScript, предоставляет хороший опыт разработки и оптимизирует ваше приложение для продакшен. Вам понадобится Node >= 6 на вашем компьютере.
Если у вас установлен npm 5.2.0+, вы можете использовать npx .
Когда ваше приложение готово для разворачивания на продакшене, нужно запустить команду npm run build . Она создаст оптимизированный билд вашего приложения в папке build. Больше информации можно получить по ссылкам Read Me и User Guide .
1.2.3.2 Создание React-приложения
Они немного отличаются своим фокусом, но все они готовы к продакшену, хорошо поддерживаются и не требуют настройки для начала работы.
Вы также можете просмотреть список других комплектов , предоставленных сообществом.
1.2.4 Добавление React в существующее приложение
Нет необходимости переписывать существующее приложение, чтобы начать использовать React. Вместо этого можно добавить React в маленькую часть существующего приложения, например, в какой-нибудь виджет. Таким образом, можно наблюдать за правильностью его работы.
React рекомендуется использовать вместе с инфраструктурой сборки проекта для повышения продуктивности разработки. Типичная современная инфраструктура сборки включает:
- Менеджер пакетов, такой как Yarn или npm . Он позволяет получить преимущество огромной экосистемы сторонних пакетов, позволяющей устанавливать или обновлять их.
- Сборщик. Например webpack , Browserify или gulp . Он позволяет разбивать код на модули и затем связывать их в небольшие пакеты для оптимизации времени загрузки.
- Компилятор. Такой как Babel . Он позволяет писать современный JS код, который будет работать в старых браузерах.
1.2.4.1 Установка React
Установив React, рекомендуется выставить production режим построения проекта. Это гарантирует использование быстрой версии React в production-версии проекта.
Для управления front-end зависимостями рекомендуется использовать Yarn или npm . Если вы впервые сталкиваетесь с такими инструментами, можете изучить соответствующие документации.
Для того, чтобы установить React с помощью Yarn, необходимо выполнить следующие команды в командной строке:
Для того, чтобы установить React с помощью npm, необходимо выполнить:
Данные менеджеры скачивают необходимые пакеты из реестра npm .
Чтобы предотвратить потенциальные несовместимости, все React пакеты должны использовать одну и ту же версию. (Сюда входят react , react-dom , react-test-renderer и т.д.)
1.2.4.2 Возможность использования ES6 и JSX
Чтобы иметь возможность использовать в JS коде JSX и ES6, рекомендуется использовать Babel. ES6 содержит в себе множество современных JavaScript возможностей, которые упрощают разработку. В свою очередь JSX – это расширение языка JavaScript, которое работает с React и также упрощает разработку на нём.
Инструкции установки Babel объясняют как сконфигурировать этот компилятор в нескольких различных средах построения проекта. Убедитесь, что вы установили babel-preset-react и babel-preset-env и разрешили их в вашей .babelrc конфигурации .
1.2.4.3 Hello World с ES6 и JSX
Рекомендуется использовать бандлер, такой как webpack или Browserify, чтобы вы могли писать модульный код и объединять его в небольшие пакеты для оптимизации времени загрузки.
Наименьший пример кода на ReactJS выглядит примерно так:
Данный код отрисовывается в DOM-элемент с атрибутом id="root" . Поэтому все, что необходимо сделать - это разместить где-нибудь в HTML-файле.
Таким же образом вы можете отрисовывать React-компонент внутри DOM-элемента где-нибудь внутри существующего приложения, написанного с помощью какой-либо другой JavaScript UI библиотеки.
Дополнительно об интеграции React с существующим кодом можно изучить здесь .
1.2.4.4 Development и Production версии проекта
По умолчанию React содержит много полезных предупреждений, которые очень помогают в разработке.
Тем не менее, они делают development-версию React-проекта больше и медленнее. Поэтому для развертывания приложения на сервере следует использовать production-версию проекта.
Изучите как узнать использует ли ваше приложение правильную версию React и как сконфигурировать production-сборку наиболее эффективно:
- Создание production-сборки с Create React App
- Создание production-сборки с Single-File Builds
- Создание production-сборки с Brunch
- Создание production-сборки с Browserify
- Создание production-сборки с Rollup
- Создание production-сборки с Webpack
1.2.4.5 Использование CDN
Если вы не хотите использовать npm для управления пакетами клиента, то react и react-dom npm пакеты также предоставляют единые файлы-дистрибутивы в папках umd , которые размещены на CDN:
Версии выше подходят только для разработки, но не для production-версии проекта. Минифицированные и оптимизированные production-версии React находятся здесь:
Чтобы загрузить специфические версии react и react-dom , нужно поменять 16 на номер необходимой версии.
1.2.4.5.1 Что такое crossorigin атрибут?
Если вы подключаете React из CDN, разработчики рекомендуют установить значение атрибута crossorigin :
Это обеспечивает улучшенную обработку ошибок в React , начиная с 16 версии.
React – это очень популярная JavaScript библиотека для создания пользовательских интерфейсов. Она была выпущена в мае 2013 года и в настоящее время используется не только для создания веб-интерфейсов, но также для разработки мобильных (React Native) и настольных приложений (React с Electron).
Популярность React связана с тем, что он позволяет значительно упростить разработку сложных и динамичных интерфейсов. При этом разрабатываемый код получается понятным и структурированным, его очень просто поддерживать и обновлять. Если такой же интерфейс программировать на чистом JavaScript, то без достаточной практики, код такого проекта будет очень быстро усложняться. В результате, завершить такой проект будет довольно затруднительно.
React является проектом с открытым исходным кодом, который расположен на Github.
Что такое React-компоненты?
Одной из ключевых особенностей React является его компонентный подход к разработке (component-based). Компоненты являются основой любого React-приложения.
Разработка интерфейса на React осуществляется посредством деления его на отдельные части (компоненты). Каждый из них содержит определённую разметку и связанную с ней логику. Компоненты значительно упрощают разработку пользовательского интерфейса, т.к. над каждым из них мы можем работать независимо. При этом компоненты можно включать в другие компоненты и тем самым определять структуру разрабатываемого приложения.
Таким образом React-приложение можно представить как набор различных компонентов, вложенных друг в друга.
При этом в качестве компонентов может выступать любая часть пользовательского интерфейса: форма, поле ввода, кнопка и т.д.
Например, если взять форму, то она может состоять из меток, полей ввода и кнопок. Каждый этот элемент внутри формы можно представить в виде React-компонента. А затем в компоненте более высокого уровня, который будет определять, например, структуру формы, включить каждый из них.
Пример на React
Понять, как работает React лучше всего на примере.
Для этого создадим HTML файл со следующим содержимым:
Это страница представляет собой приложение на React.
С помощью тега мы подключаем три скрипта, необходимые для запуска React.
React («react.development.js») и React DOM («react-dom.development.js») – это основные библиотеки (ядро) React.
Третий скрипт («babel.min.js») не относится напрямую к React. Это библиотека Babel, которая используется для компилирования синтаксиса JSX, используемого React, в JavaScript, понятный браузеру.
Чтобы это сообщить Babel, необходимо к элементу добавить атрибут type="text/babel" . После этого Babel будет знать, что перед тем как запустить этот скрипт, его сначала нужно будет скомпилировать:
В начале кода выполняется создание React-компонента MyApp , используется для этого обычная функция:
С помощью return мы возвращаем то, что необходимо отобразить. В этом примере мы используем XML-подобный синтаксис под названием JSX.
C использованием него мы можем описывать HTML прямо внутри JavaScript. Мы его не заключаем в кавычки, т.к. по факту JSX = это JavaScript, а не HTML.
Такой код нативно в браузере не запуститься. Поэтому здесь у нас подключается Babel, который преобразует данный код в JavaScript, понятный браузеру.
JSX является одной из ключевых особенностей React, которая отличает его от других похожих инструментов.
После этого мы получаем элемент с идентификатором root с помощью JavaScript метода getElementById . Этот элемент будет определять место, в которое будет выводиться всё приложение React.
С помощью метода createRoot создаём корень приложения:
Вызываем рендеринг с помощью render() :
Метод render() возвращает описание того, что нужно отрисовать. В этом примере отобразим компонент MyApp , который записан с помощью JSХ синтаксиса.
Простой пример React-компонента
React-компоненты, как уже знаем, это строительные блоки, из которых состоит React-приложение. Другими словами, это фрагменты интерфейса из которых состоит шаблон всего нашего приложения.
Компоненты в React можно повторно использовать, а также вкладывать в другие компоненты.
В этом разделе мы познакомимся с самой идеей компонентов, а для этого сначала создадим в HTML следующую карточку:
Эта карточка состоит из элемента , внутри которого расположен заголовок и параграф
.
Для оформления карточки добавим стили с помощью :
В результате на странице карточка отобразится следующим образом:
Создадим ещё две точно таких же карточки, но с другим контентом:
Обратите, что каждая из карточек содержит одинаковую структуру, а, следовательно, её можно называть компонентом.
Самый простой способ создать компонент в React - это написать функцию JavaScript. Такие компоненты называются функциональными.
В теге напишем функцию для создания React компонента PersonCard :
Эта функция получает свойства props и возвращает в качестве результата React-элемент.
Возвращаемый функцией код написан с помощью синтаксиса JSX. С ним мы уже познакомились выше. Несмотря на то, что он очень похож на HTML, это JavaScript. С помощью него мы описали структуру компонента.
Т.к. этот код не является HTML, то вместо class следует писать className . class - это ключевое слово в JavaScript, которое используется для создания классов.
С помощью props мы можем передать в React-компонент некоторые свойства. Обращение к свойству name осуществляется посредством {props.name} , а к description - {props.description} .
Создадим ещё один компонент, например App . Он будет представлять шаблон всего нашего приложения и включать в себя компоненты PersonCard :
Компоненты в React следует обозначать с заглавной буквы. Т.к. React принимает элементы, которые начинаются с маленькой буквы, например , за обычные DOM-элементы. В данном случае за . А элементы с заглавной буквы, например, , за React-компоненты. В данном случае за PersonCard .
Установка свойств React-компонентам осуществляется аналогично атрибутам HTML-элементам.
При вызове первого компонента PersonCard ему передаётся в качестве props значение:
В качестве результата этот компонент будет возвращать:
Вызовы следующих компонентов PersonCard будет осуществляться аналогичным образом.
Создадим корень приложения, используя метод createRoot() :
Выполним рендиринг компонента App в корень приложения:
Если React-элемент уже был ранее отрендерен в root , то повторный вызов произведёт его обновление и изменит соответствующую часть DOM, чтобы она содержала последние изменения.
В этой статье изучим, как с помощью инструмента Create React App создать новое одностраничное приложение на React. После этого подробно разберём файловую структуру созданного проекта и команды для управления им.
Инструмент Create React App
Для полноценного создания пользовательских интерфейсов на React или каком-нибудь другом инструменте перед веб-разработчиком в большинстве случаев стоит задача в выборе необходимых средств для этого (webpack, Babel, ESLint, и т.д.) и корректной их настройки.
К счастью, разработчики React подготовили для нас готовый инструмент, который позволяет всё это сделать автоматически. Называется он Create React App.
Итак, Create React App (сокращенно CRA ) – это инструмент, который позволяет нам настроить среду для создания одностраничных веб-приложений на основе React, посредством выполнения всего одной команды. Также можно отметить, что этот инструмент официально поддерживается командой React.
Одностраничное приложение ( Single Page Application или сокращённо SPA ) – это приложение, содержащее всего одну единственную HTML-страницу, контент которой динамически обновляется с помощью JavaScript. Т.е. SPA состоит из одной страницы, контент для которой загружается и изменяется посредством JavaScript без её полной перезагрузки.
Это программа имеет открытый исходный код и расположена она на Github.
Требования
Чтобы использовать Create React App , необходимо убедиться, что у вас на компьютере установлена программа Node.js.
Для проверки её наличия, можно запросить версию:
Для разработки на локальном компьютере необходим «Node.js» версии не ниже 14 и npm не ниже 5.6. При установке «Node.js» также устанавливает программу npm .
npm (сокращенно от Node Package Manager ) – это пакетный менеджер, который позволяет нам устанавливать и удалять JavaScript пакеты, управлять их версиями и зависимостями. Проверить установленную версию npm можно так:
В качестве альтернативы вы можете использовать пакетный менеджер Yarn . Yarn – это инструмент аналогичный npm , т.е. он также предназначен для установки пакетов и управления ими. Причём он их берёт из того же репозитория, что npm .
Чтобы использовать Yarn , его необходимо установить:
Создание нового React-приложения
Для создания нового проекта посредством create-react-app необходимо перейти в нужную папку и ввести в терминале следующую команду:
npx – это инструмент, который появился в npm , начиная с версии 5.2.0. С его помощью мы можем, например, запустить пакет create-react-app без необходимости его глобальной установки:
Команда npx create-react-app my-app создаст нам новое React-приложение .
В результате у нас появится каталог внутри текущей папки и в нём все необходимые файлы. В данном случае каталог my-app . Он будет содержать всё необходимое для разработки этого проекта на React.
Откроем только что созданный проект в редакторе коде, например, Visual Studio Code, и рассмотрим его структуру.
Структура проекта
В корне проекта расположены следующие файлы и папки:
- node-modules – это папка, которая содержит пакеты (зависимости), которые требуются нашему приложению. Их загружает и обновляет npm .
- public – это папка, в которой находится страница index.html , определяющая HTML шаблон всего нашего приложения; кроме этого она ещё содержит некоторые другие файлы для нашего приложения ( favicon.ico , manifest.json , robots.txt и т.д.), а также в неё при необходимости можно поместить любые другие файлы, которые должны быть скопированы в папку build нетронутыми, т.е. без обработки их с помощью webpack.
- src (сокращенно от source) – каталог, содержащий исходный код приложения. Разработка проекта практически ведётся здесь.
- .gitignore – нужен для скрытия файлов и папок от системы контроля версий GIT. Этот файл содержит все необходимые записи, каким-то определённым образом его настраивать не нужно.
- package.json – это набор метаданных о вашем приложении: название проекта, версия, пакеты от которых зависит проект и т.д. package.json является ключевым файлом для любых приложений, основанных на Node.js.
- package-lock.json – файл, который создаёт npm автоматически при установке зависимостей. Он содержит в себе полную информацию обо всех установленных зависимостях, включая их точные версии. Кроме package-lock.json у вас может быть ещё yarn.lock , если вы используете Yarn для установки пакетов.
- README.md - это краткая справочное руководство по использованию инструмента create-react-app .
В файле package.json в ключе dependencies перечислены зависимости, т.е. библиотеки, которые необходимы приложению. Среди основных:
- react и react-dom – ядро проекта на React (в предыдущей теме мы их подключали через CDN);
- react-scripts – набор скриптов, которые используются для разработки, сборки и тестирования приложения. Они выполняют настройку среды разработки, запуск сервера с живой перезагрузкой, подключают необходимые зависимости, модули и т.д.
Команды для управления проектом
В файле package.json в свойстве script определены ключи для запуска различных команд, посредством которых мы можем определённым образом управлять нашим приложением.
1. Запуск проекта. Осуществляется с помощью команды start :
Эту команду можно ввести прямо в терминале Visual Studio Code , если вы его используете в качестве текстового редактора:
2. Сборка приложения:
Эту команду обычно запускают после завершения разработки проекта. Она выполняет сборку приложения из исходных файлов для продакшена. Полученные оптимизированные файлы помещаются в папку build и они отвечают за функционал всего приложения. После сборки вы можете приступать к развертыванию приложения.
3. Запуск тестов:
4. Команда, которая позволяет извлечь все файлы конфигурации и зависимости непосредственно в проект :
Эту команду можно ввести только один раз. После этого поддержание всей этой конфигурации и сценариев вы выполняете самостоятельно. Обычно это используется, когда вы хотите настроить конфигурацию проекта так как вам это нужно.
Содержимое папки public
В папке public находятся:
- favicon.ico , logo192.jpg , logo512.jpg – иконки;
- index.html – HTML шаблон страницы;
- manifest.json – манифест веб-приложения;
- robots.txt – текстовый файл, который содержит указания для роботов поисковых систем;
Кроме этого, в эту папку можно поместить другие файлы, которые необходимо скопировать в каталог build нетронутыми (т.е. без обработки).
Чтобы ссылаться на ресурсы в public , необходимо использовать переменную с именем PUBLIC_URL :
При запуске npm run build инструмент Create React App заменит %PUBLIC_URL% правильным абсолютным путем, чтобы ваш проект работал, даже если вы используете маршрутизацию на стороне клиента или размещаете его по некорневому URL-адресу.
index.html
Инструмент create-react-app , как мы уже отмечали выше, выполняет генерацию проекта для разработки одностраничных приложений на React. В нём файл index.html как раз является той единственной страницей, которая будет входной для всего нашего приложения. Изменить название этого файла нельзя.
Содержимое файла index.html :
В этом файле устанавливаются некоторые базовые настройки для нашего приложения: язык, кодировка, favicon, viewport, заголовок, manifest, title, description и т.д.
С помощью тега отображается контент на странице, который сообщает пользователю, что в браузере необходимо включить JavaScript для запуска этого приложения.
Но самое важное на что необходимо обратить внимание – это на тег . Это корневой элемент , в который будет выводиться весь контент нашего приложения. Здесь нам необходимо запомнить его id , т.к. в JavaScript мы будем использовать его для получения этого элемента.
Как можете заметить здесь нет подключённых скриптов. Они будут добавляться инструментом create-react-app автоматически. Т.е. как-то самостоятельно их подключать здесь не нужно.
При необходимости вы можете в этом файле подключить другие ресурсы. Например, стили, шрифты и т.д. Но в большинстве случаев так делать не нужно, рекомендуется это выполнять в JavaScript через import .
manifest.json
manifest.json – это манифест, в котором описывается информация о веб-приложении. Он представляет собой текстовый файл, который в формате JSON содержит название приложения, некоторое количество иконок, стартовый URL, как оно будет выглядеть и некоторые другие параметры.
Содержимое файла manifest.json :
При этом манифест является частью веб-технологии, который называется PWA (сокращено от Progressive Web Apps ). Этот файл позволяет установить PWA на главный экран смартфона, предоставляя пользователю более быстрый доступ к приложению.
Содержимое папки src
Папка src (сокращенно от source) – это место, в котором хранятся исходные коды разрабатываемого проекта и где веб-разработчик проводит почти всё время работая над ним.
В этой папке имеется файл index.js . Этому файлу нельзя изменять имя, т.к. он является точкой входа для JavaScript. Т.е. так же как public/index.html .
При необходимости вы можете удалить или переименовать другие файлы, но названия public/index.html и src/index.js в структуре проекта нужно оставить так как они есть.
index.js
Изначально файл src/index.js содержит следующий код:
Начинается файл с импорта модулей JavaScript и других ресурсов. import позволяют index.js использовать код, определенный в другом месте. На первой строчке импортируется библиотека React, а на второй – ReactDOM, которая предоставляет методы для взаимодействия с DOM или другими словами с HTML-страницей. Эти две библиотеки составляют ядро React.
Далее импортируются стили, которые применяются ко всему нашему приложению:
Затем – React-компонент App из App.js :
На следующей строчке – функция reportWebVitals , которая позволяет нам получить результаты производительности нашего приложения с использованием различных метрик. Для их измерения используется сторонняя библиотека web-vitals.
Например, для отправки результатов в консоль необходимо передать ссылку на метод console.log в качестве аргумента этой функции:
После этого создаётся корень приложения посредством вызова метода ReactDOM.createRoot() , которому в качестве аргумента передаем DOM-элемент, который мы получили с помощью document.getElementById('root') .
Затем выполняется рендеринг React-компонента в DOM:
React.StrictMode – это инструмент, который в данном случае включает строгий режим для всего приложения. Он упрощает определение потенциальных проблем в приложении.
React-компонент App
React-компонент App , который используется в src/index.js , находится в src/App.js . Этот компонент в данном случае представляет всё наше приложение, которое мы видим в браузере:
Этот файл можно разделить на 3 основные части: импорт различных ресурсов, компонент App и инструкция export для экспортирования App .
C помощью import выполняется импорт логотипа из ./logo.svg и CSS, связанный с нашим компонентом.
Далее расположена простая функция с именем App . Эта функция используется для создания простого React-компонента, в данном случае App .
В самом низу файла инструкция export default App делает компонент App доступным для других модулей.
Компонент App
Код простого React-компонента :
В качестве результата с помощью оператора return эта функция возвращает React-элементы для отображения их на странице.
Именование React-компонентов осуществляется в стиле PascalCase . Т.е. их название всегда начинаются с заглавной буквы, а другие слова, которые являются частью его названия тоже начинаются с большой буквы. Не допускается пробелов, тире и других знаков, т.е. всё пишется слитно.
После return внутри круглых скобках мы описываем, по сути, HTML, который будет отображать этот компонент на странице. Но на самом деле это не HTML, а JSX – специальное расширение языка JavaScript, с помощью которого мы производим элементы.
Конструкция {logo} выводит значение переменной logo .
Изменение React-приложения
Изменим компонент App так, чтобы он выводил Hello, world! .
Для этого откроем файл src/App.js и заменим всё содержимое в return на
Также удалим файлы с SVG-изображением logo.svg и файлы, связанные с тестами.
Содержимое файла App.css , отвечающего за стили компонента App , изменим на следующий код:
После выполненных изменений, сохраним файлы App.css и App.js путём нажатия Ctrl+S и перейдём в браузер.
В браузере мы увидим изменённое приложение, причём даже без перезагрузки страницы благодаря функции горячей перезагрузки проекта:
Читайте также: