Теперь мы начнем знакомиться c самой важной темой этого курса, а именно с библиотекой React. Давайте начнем с создания простого приложения React, а также познакомимся с основными концепциями React. Самый простой способ начать — использовать инструмент под названием Vite. Давайте создадим приложение с именем part1, перейдем в его каталог и установим библиотеки:
Приложение запускается следующим образом
В консоли написано, что приложение запустилось на локальном порту 5173, т.е. по адресу http://localhost:5173/:
Vite запускает приложение по умолчанию на порту 5173. Если он не свободен, Vite использует следующий свободный номер порта. Откройте браузер и текстовый редактор, чтобы вы могли одновременно просматривать код и веб-страницу на экране:
Код приложения находится в папке src. Давайте упростим код по умолчанию, чтобы содержимое файла main.jsx выглядело следующим образом:
и файл App.jsx выглядел так
Файлы App.css и index.css, а также ресурсы каталога можно удалить, поскольку они сейчас не нужны нашему приложению.
create-react-app
Вместо Vite вы также можете использовать инструмент create-react-app предыдущего поколения. Наиболее заметное отличие от Vite — это имя файла запуска приложения — index.js. Способ запуска приложения в CRA также отличается, оно запускается командой
в отличие от Vite
Компонент
Файл App.jsx определяет компонент React с именем App. Команда в последней строке файла main.jsx
отображает свое содержимое в элементе div, определенном в файле index.html, имеющем значение идентификатора «root». По умолчанию файл index.html не содержит никакой HTML-разметки, видимой нам в браузере:
Вы можете попробовать добавить в файл HTML. Однако при использовании React весь контент, который необходимо отобразить, обычно определяется как компоненты React. Давайте подробнее рассмотрим код, определяющий компонент:
Как вы, наверное, догадались, компонент будет отображаться как тег div, который окружает тег p, содержащий текст «Привет, мир». Технически компонент определяется как функция JavaScript. Ниже приведена функция (которая не получает никаких параметров):
Затем функция присваивается константной переменной App:
Есть несколько способов определения функций в JavaScript. Здесь мы будем использовать стрелочные функции, которые описаны в более новой версии JavaScript, известной как ECMAScript 6, также называемой ES6. Поскольку функция состоит только из одного выражения, мы использовали сокращение, которое представляет этот фрагмент кода:
Другими словами, функция возвращает значение выражения. Функция, определяющая компонент, может содержать любой код JavaScript. Измените свой компонент следующим образом:
и наблюдайте, что происходит в консоли браузера
Первое правило фронтенд-разработки: держать консоль всегда открытой. Также возможно визуализировать динамический контент внутри компонента. Измените компонент следующим образом:
Любой код JavaScript внутри фигурных скобок оценивается, и результат этой оценки встраивается в определенное место в HTML, созданном компонентом. Обратите внимание: не следует удалять строку внизу компонента.
Экспорт не показан в большинстве примеров материалов курса. Без экспорта компонент и все приложение ломаются.
JSX
Похоже, что компоненты React возвращают HTML-разметку. Однако, это не так. Компоненты React в основном написаны с использованием JSX. Хотя JSX выглядит как HTML, мы имеем дело со способом написания JavaScript. Под капотом JSX, возвращаемый компонентами React, компилируется в JavaScript. После компиляции наше приложение выглядит так:
Компиляцией занимается Babel. Проекты, созданные с помощью create-react-app или vite настроены на автоматическую компиляцию. Мы узнаем больше об этой теме позже. Также возможно написать React как «чистый JavaScript» без использования JSX. Хотя никто в здравом уме на это не пойдет. На практике JSX очень похож на HTML с тем отличием, что с помощью JSX вы можете легко встраивать динамический контент, написав соответствующий код JavaScript в фигурных скобках. Идея JSX очень похожа на многие языки шаблонов, такие как Thymeleaf, используемый вместе с Java Spring, которые используются на серверах. JSX похож на XML, что означает, что каждый тег необходимо закрыть. Например, новая строка — это пустой элемент, который в HTML можно записать следующим образом:
но при написании JSX тег нужно закрыть:
Множественные компоненты
Давайте изменим файл App.jsx следующим образом:
Мы определили новый компонент Hello и использовали его внутри компонента App. Естественно, компонент можно использовать несколько раз:
NB: экспорт внизу в этих примерах не учитывается ни сейчас, ни в будущем. Но он необходим для работы кода.
Написание компонентов с помощью React несложно, а объединение компонентов позволяет сделать даже более сложное приложение достаточно удобным в сопровождении. Действительно, основная философия React состоит в составлении приложений из множества специализированных компонентов. Еще одним строгим соглашением является идея корневого компонента App, расположенного наверху дерева компонентов приложения. Тем не менее, как мы узнаем позже, бывают ситуации, когда компонент App не является корневым, а заключен в соответствующий служебный компонент.
props: передача данных компонентам
Передавать данные компонентам можно с помощью так называемых props. Давайте изменим компонент Hello следующим образом:
Теперь функция, определяющая компонент, имеет параметр props. В качестве аргумента параметр получает объект, поля которого соответствуют всем «props», определяемым пользователем компонента. Props определяется следующим образом:
Может быть произвольное количество props, а их значения могут быть «жестко закодированными» строками или результатами выражений JavaScript. Если значение свойства получено с помощью JavaScript, его необходимо заключить в фигурные скобки. Давайте изменим код так, чтобы компонент Hello использовал два props:
Props, отправленные компонентом App, представляют собой значения переменных, результат вычисления выражения суммы и обычную строку. Компонент Hello также записывает значение реквизита объекта в консоль. Я очень надеюсь, что ваша консоль была открыта. Разработка программного обеспечения — это сложно. Это становится еще сложнее, если вы не используете все возможные доступные инструменты, такие как веб-консоль и отладочную печать с помощью console.log. Профессионалы постоянно используют оба метода, и нет причины, по которой новичку не следует использовать эти замечательные вспомогательные методы, которые значительно облегчат жизнь.
Возможное сообщение об ошибке
В зависимости от используемого вами редактора на этом этапе вы можете получить следующее сообщение об ошибке:
Это не ошибка, а предупреждение, вызванное инструментом ESLint. Вы можете отключить предупреждение типа react/prop-types, добавив в файл .eslintrc .cjs следующую строку
Более подробно с ESLint мы познакомимся далее.
Некоторые примечания
React настроен на выдачу довольно четких сообщений об ошибках. Несмотря на это, вам следует, по крайней мере вначале, продвигаться вперед очень маленькими шагами и следить за тем, чтобы каждое изменение работало так, как хотелось бы. Консоль всегда должна быть открыта. Если браузер сообщает об ошибках, нецелесообразно продолжать писать код дальше, надеясь на чудеса. Вместо этого вам следует попытаться понять причину ошибки и, например, вернуться к предыдущему рабочему состоянию:
Как мы уже упоминали, при программировании на React можно и полезно писать команды console.log() (которые выводятся на консоль) внутри вашего кода. Также имейте в виду, что первая буква названия компонентов React должна быть заглавной. Если вы попытаетесь определить компонент следующим образом:
и использовать его вот так
страница не будет отображать контент, определенный в компоненте нижнего колонтитула, и вместо этого React создает только пустой элемент нижнего колонтитула, то есть встроенный элемент HTML вместо пользовательского элемента React с тем же именем. Если вы измените первую букву имени компонента на заглавную, React создаст элемент div, определенный в компоненте нижнего колонтитула, который отображается на странице.
Обратите внимание, что содержимое компонента React (обычно) должно содержать один корневой элемент. Если мы, например, попытаемся определить компонент App без внешнего элемента div:
результатом является сообщение об ошибке.
Использование корневого элемента — не единственный рабочий вариант. Массив компонентов также является допустимым решением:
Однако при определении корневого компонента приложения это не особенно разумно, и из-за этого код выглядит немного некрасиво. Поскольку корневой элемент предусмотрен, у нас есть «лишние» элементы div в дереве DOM. Этого можно избежать, используя фрагменты, то есть обертывая возвращаемые компонентом элементы пустым элементом:
Теперь он успешно компилируется, и DOM, сгенерированный React, больше не содержит дополнительного элемента div.
Не визуализировать объекты
Рассмотрим приложение, которое печатает на экране имена и возраст наших друзей:
Консоль кричит красным:
Суть проблемы заключается в том, что объекты недопустимы в качестве дочерних элементов React, т. е. приложение пытается визуализировать объекты, но терпит неудачу. Код пытается передать информацию об одном друге следующим образом:
и это вызывает проблему, поскольку элемент, отображаемый в фигурных скобках, является объектом.
В React отдельные элементы, отображаемые в фигурных скобках, должны быть примитивными значениями, такими как числа или строки. Исправление следующее
Итак, теперь имя друга отображается отдельно внутри фигурных скобок.
и возраст
После исправления ошибки следует очистить сообщения об ошибках консоли, нажав 🚫, а затем перезагрузить содержимое страницы и убедиться, что сообщения об ошибках не отображаются. Небольшое дополнение к предыдущему. React также позволяет отображать массивы, если массив содержит значения, подходящие для рендеринга (например, числа или строки). Таким образом, следующая программа будет работать, хотя результат может быть не таким, как мы хотим:
В этой части даже не стоит пытаться использовать прямой рендеринг таблиц, мы вернемся к этому в следующей части.
