Основы React JSX: Научитесь писать UI с помощью JavaScript XML

Введение

Добро пожаловать в мир React! В этой лабораторной работе вы погрузитесь в JSX — фундаментальную часть создания пользовательских интерфейсов с помощью React. JSX (JavaScript XML) — это расширение синтаксиса для JavaScript, которое позволяет писать код, похожий на HTML, непосредственно в ваших JavaScript-файлах. Это делает ваш UI-код более читаемым, выразительным и простым в поддержке.

В ходе этой лабораторной работы вы изучите основные правила JSX, включая:

Написание элементов, похожих на HTML.
Встраивание динамических JavaScript-выражений.
Применение CSS-классов.
Использование самозакрывающихся тегов.
Группировку нескольких элементов с помощью Fragments.

Базовый проект React уже настроен для вас в директории ~/project/my-app. Давайте начнем!

Напишите элемент JSX, например h1, в return компонента

На этом шаге вы напишете базовый JSX-элемент и увидите его рендеринг в браузере. JSX позволяет писать разметку, очень похожую на HTML, непосредственно внутри ваших React-компонентов.

Сначала давайте запустим среду разработки. Вся ваша работа будет проходить внутри директории ~/project/my-app.

Перейдите в директорию проекта в терминале, установите необходимые зависимости и запустите сервер разработки.

cd ~/project/my-app
npm install

После завершения установки выполните следующую команду для запуска сервера разработки:

npm run dev -- --host 0.0.0.0 --port 8080

Вы увидите вывод, указывающий, что сервер запущен. Теперь нажмите на вкладку Web 8080 в верхней части экрана, чтобы увидеть ваше работающее приложение. Там должно отображаться "Hello, React!".

Далее откройте файл src/App.jsx из файлового проводника слева. Этот файл содержит простой React-компонент с именем App.

Давайте изменим элемент h1. Измените текст внутри тега <h1> на "Welcome to JSX".

Замените содержимое src/App.jsx следующим кодом:

import "./App.css";

function App() {
  return <h1>Welcome to JSX</h1>;
}

export default App;

Сохраните файл (Ctrl+S или Cmd+S). Приложение на вкладке Web 8080 автоматически обновится, отображая новый текст.

Встраивайте выражения JavaScript в фигурные скобки

На этом шаге вы научитесь встраивать JavaScript-выражения непосредственно в ваш JSX, используя фигурные скобки {}. Это мощная функция, позволяющая отображать динамический контент.

Вы можете поместить любое допустимое JavaScript-выражение внутрь фигурных скобок. Это может быть переменная, вызов функции или арифметическая операция.

Давайте изменим компонент App, чтобы отобразить динамический заголовок. Снова откройте файл src/App.jsx.

Внутри функции App, перед оператором return, объявите JavaScript-константу с именем title и присвойте ей строковое значение. Затем используйте эту константу внутри элемента <h1>.

Обновите ваш файл src/App.jsx следующим кодом:

import "./App.css";

function App() {
  const title = "React JSX Basics";

  return <h1>{title}</h1>;
}

export default App;

Сохраните файл. Теперь проверьте вкладку Web 8080. Вы увидите, что заголовок был изменен на "React JSX Basics". React вычисляет выражение {title} и отображает его значение как содержимое тега <h1>.

Добавьте атрибут className для CSS класса

На этом шаге вы узнаете, как добавлять CSS-классы к вашим JSX-элементам для стилизации.

В обычном HTML вы используете атрибут class для присвоения CSS-класса. Однако class является зарезервированным ключевым словом в JavaScript. Чтобы избежать конфликтов, JSX использует className вместо него.

Сначала давайте добавим правило стиля. Откройте файл src/App.css и добавьте следующий CSS-код для определения стиля нашего заголовка:

.title-style {
  color: #61dafb;
  text-align: center;
}

Сохраните файл src/App.css.

Теперь давайте применим этот класс к нашему элементу <h1>. Откройте src/App.jsx и добавьте атрибут className к тегу h1.

Обновите ваш файл src/App.jsx следующим образом:

import "./App.css";

function App() {
  const title = "React JSX Basics";

  return <h1 className="title-style">{title}</h1>;
}

export default App;

Сохраните файл и переключитесь на вкладку Web 8080. Теперь вы должны увидеть, что текст заголовка выровнен по центру и окрашен в светло-голубой цвет, в соответствии со стилями, которые вы определили в App.css.

Используйте самозакрывающийся тег для элемента img

На этом шаге вы узнаете, как использовать самозакрывающиеся теги в JSX. В HTML некоторые элементы, такие как <img>, <br> и <input>, являются "пустыми" или "не имеющими содержимого" элементами, что означает, что у них нет закрывающего тега.

В JSX вы должны явно закрывать каждый тег. Для элементов, у которых нет дочерних элементов, вы используете синтаксис самозакрывающегося тега, добавляя прямой слеш / перед закрывающей угловой скобкой, например <img />.

Компонент React может возвращать только один корневой элемент. Чтобы отобразить несколько элементов, вы должны обернуть их в контейнер, например <div>.

Давайте добавим изображение под нашим заголовком. Мы обернем как <h1>, так и новый тег <img> внутри <div>.

Обновите ваш файл src/App.jsx следующим кодом:

import "./App.css";

function App() {
  const title = "React JSX Basics";
  const imageUrl = "https://labex.io/_ipx/s_98x30/labex-logo-light.svg";

  return (
    <div>
      <h1 className="title-style">{title}</h1>
      <img src={imageUrl} alt="LabEx Logo" width="200" />
    </div>
  );
}

export default App;

В этом коде мы добавили тег <img>. Обратите внимание, что он самозакрывающийся (/>). Мы также использовали фигурные скобки для динамического задания атрибута src из переменной imageUrl.

Сохраните файл и посмотрите на вкладку Web 8080. Вы увидите логотип LabEx, отображаемый под заголовком.

Отображение нескольких элементов во фрагменте <> </>

На этом шаге вы узнаете лучший способ группировки нескольких элементов без добавления лишнего узла в DOM: React Fragments (Фрагменты React).

В предыдущем шаге мы использовали <div> для обертывания наших элементов <h1> и <img>, потому что компонент должен возвращать один корневой элемент. Однако иногда этот дополнительный <div> является ненужным и может мешать вашему CSS-макету (например, при использовании Flexbox или Grid).

React предоставляет решение под названием Fragments. Фрагмент позволяет группировать список дочерних элементов без добавления лишних узлов в DOM. Вы можете использовать сокращенный синтаксис <> ... </>.

Давайте переработаем наш компонент App, чтобы использовать Фрагмент вместо <div>.

Откройте src/App.jsx и замените открывающий <div> и закрывающий </div> на <> и </> соответственно.

Окончательный код вашего src/App.jsx должен выглядеть следующим образом:

import "./App.css";

function App() {
  const title = "React JSX Basics";
  const imageUrl = "https://labex.io/_ipx/s_98x30/labex-logo-light.svg";

  return (
    <>
      <h1 className="title-style">{title}</h1>
      <img src={imageUrl} alt="LabEx Logo" width="200" />
    </>
  );
}

export default App;

Сохраните файл. Визуальный результат на вкладке Web 8080 будет выглядеть идентично предыдущему шагу. Однако, если бы вы проверили HTML в инструментах разработчика вашего браузера, вы бы увидели, что элементы <h1> и <img> теперь являются прямыми соседями, без родительского <div>. Это создает более чистую и эффективную структуру DOM.

Резюме

Поздравляем с завершением лабораторной работы по основам React JSX! Вы освоили основные правила и синтаксис для написания пользовательского интерфейса в приложении React.

В этой лабораторной работе вы практиковались в:

Написании элементов, похожих на HTML, таких как <h1>, в операторе return вашего компонента.
Встраивании динамических переменных и выражений JavaScript в вашу разметку с использованием фигурных скобок {}.
Применении CSS-классов с помощью атрибута className.
Использовании самозакрывающихся тегов для элементов, таких как <img>, с синтаксисом />.
Группировке нескольких элементов без добавления лишних узлов DOM с использованием React Fragments (<> </>).

Эти концепции являются основой для создания сложных и динамических пользовательских интерфейсов с помощью React. Продолжайте практиковаться, чтобы стать более уверенными в мощи и гибкости JSX.