Описание UI

Ваш первый компонент

Приложения React строятся из изолированных частей пользовательского интерфейса, называемых компонентами. Компонент React — это функция JavaScript, которую можно дополнить разметкой. Компоненты могут быть как маленькими, как кнопка, так и большими, как целая страница. Вот компонент Gallery, отображающий три компонента Profile:

function Profile() {  return (    <img      src="https://react.dev/images/docs/scientists/MK3eW3As.jpg"      alt="Katherine Johnson"    />  );}export default function Gallery() {  return (    <section>      <h1>Amazing scientists</h1>      <Profile />      <Profile />      <Profile />    </section>  );}

Импорт и экспорт компонентов

Вы можете объявить множество компонентов в одном файле, но в больших файлах может быть сложно ориентироваться. Чтобы решить эту проблему, вы можете экспортировать компонент в отдельный файл, а затем импортировать этот компонент из другого файла:

import Profile from './Profile.js';export default function Gallery() {  return (    <section>      <h1>Amazing scientists</h1>      <Profile />      <Profile />      <Profile />    </section>  );}

Написание разметки с помощью JSX

Каждый компонент React представляет собой функцию JavaScript, которая может содержать некоторую разметку, которую React отображает в браузере. Компоненты React используют расширение синтаксиса под названием JSX для представления этой разметки.

JSX очень похож на HTML, но он немного строже и может отображать динамическую информацию. Если мы вставим существующую HTML-разметку в компонент React, это не всегда будет работать:

export default function TodoList() {
  return (
    // Это не совсем работает!
    <h1>Задачи Хеди Ламарр</h1>
    <img
      src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
      alt="Хеди Ламарр"
      class="photo"
    >
    <ul>
      <li>Изобрести новые светофоры
      <li>Репетировать сцену из фильма
      <li>Усовершенствовать технологию спектра
    </ul>
  );
}

Если у вас есть такой HTML-код, вы можете исправить его с помощью конвертера:

export default function TodoList() {  return (    <>      <h1>Hedy Lamarr's Todos</h1>      <img        src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"        alt="Hedy Lamarr"        className="photo"      />      <ul>        <li>Invent new traffic lights</li>        <li>Rehearse a movie scene</li>        <li>Improve spectrum technology</li>      </ul>    </>  );}

JavaScript в JSX с фигурными скобками

JSX позволяет писать разметку, похожую на HTML, внутри файла JavaScript, сохраняя логику рендеринга и контент в одном месте. Иногда вам захочется добавить немного логики JavaScript или сослаться на динамическое свойство внутри этой разметки. В этой ситуации вы можете использовать фигурные скобки в JSX, чтобы 'открыть окно' в JavaScript:

const person = {  name: 'Gregorio Y. Zara',  theme: {    backgroundColor: 'black',    color: 'pink'  }};export default function TodoList() {  return (    <div style={person.theme}>      <h1>{person.name}'s Todos</h1>      <img        className="avatar"        src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg"        alt="Gregorio Y. Zara"      />      <ul>        <li>Improve the videophone</li>        <li>Prepare aeronautics lectures</li>        <li>Work on the alcohol-fuelled engine</li>      </ul>    </div>  );}

Передача props компоненту

Компоненты React используют props для взаимодействия друг с другом. Каждый родительский компонент может передавать некоторую информацию своим дочерним компонентам, предоставляя им props. Props могут напоминать вам атрибуты HTML, но через них можно передавать любое значение JavaScript, включая объекты, массивы, функции и даже JSX!

import { getImageUrl } from './utils.js'export default function Profile() {  return (    <Card>      <Avatar        size={100}        person={{          name: 'Katsuko Saruhashi',          imageId: 'YfeOqp2'        }}      />    </Card>  );}function Avatar({ person, size }) {  return (    <img      className="avatar"      src={getImageUrl(person)}      alt={person.name}      width={size}      height={size}    />  );}function Card({ children }) {  return (    <div className="card">      {children}    </div>  );}

Условный рендеринг

Вашим компонентам часто потребуется отображать разные элементы в зависимости от различных условий. В React вы можете условно рендерить JSX, используя синтаксис JavaScript, такой как операторы if, && и ? :. В этом примере оператор JavaScript && используется для условного рендеринга галочки:

function Item({ name, isPacked }) {  return (    <li className="item">      {name} {isPacked && '✅'}    </li>  );}export default function PackingList() {  return (    <section>      <h1>Sally Ride's Packing List</h1>      <ul>        <Item          isPacked={true}          name="Space suit"        />        <Item          isPacked={true}          name="Helmet with a golden leaf"        />        <Item          isPacked={false}          name="Photo of Tam"        />      </ul>    </section>  );}

Отображение списков

Часто возникает необходимость отобразить несколько похожих компонентов из набора данных. Вы можете использовать функции JavaScript filter() и map () в React для фильтрации и преобразования массива данных в массив компонентов. Для каждого элемента массива необходимо указать key. Обычно в качестве key используется ID из базы данных. Ключи позволяют React отслеживать место каждого элемента в списке, даже если список изменяется.

import { people } from './data.js';import { getImageUrl } from './utils.js';export default function List() {  const listItems = people.map(person =>    <li key={person.id}>      <img        src={getImageUrl(person)}        alt={person.name}      />      <p>        <b>{person.name}:</b>        {' ' + person.profession + ' '}        known for {person.accomplishment}      </p>    </li>  );  return (    <article>      <h1>Scientists</h1>      <ul>{listItems}</ul>    </article>  );}

Сохранение чистоты компонентов

Некоторые функции JavaScript являются чистыми. Чистая функция:

• Занимается только своими делами. Она не изменяет никаких объектов или переменных, существовавших до ее вызова.
• Одинаковые входные данные — одинаковый результат. При одинаковых входных данных чистая функция всегда должна возвращать один и тот же результат. Строго писать компоненты только как чистые функции позволяет избежать целого ряда запутанных ошибок и непредсказуемого поведения по мере роста кодовой базы. Вот пример нечистого компонента:

let guest = 0;function Cup() {  // Bad: changing a preexisting variable!  guest = guest + 1;  return <h2>Tea cup for guest #{guest}</h2>;}export default function TeaSet() {  return (    <>      <Cup />      <Cup />      <Cup />    </>  );}

Вы можете сделать этот компонент чистым, передавая пропc вместо изменения существующей переменной:

function Cup({ guest }) {  return <h2>Tea cup for guest #{guest}</h2>;}export default function TeaSet() {  return (    <>      <Cup guest={1} />      <Cup guest={2} />      <Cup guest={3} />    </>  );}

Ваш интерфейс как дерево

React использует деревья для моделирования отношений между компонентами и модулями. Дерево рендеринга React — это представление отношений родитель-потомок между компонентами.

Пример дерева рендеринга React.

Компоненты, расположенные в верхней части дерева, рядом с корневым компонентом, считаются компонентами верхнего уровня. Компоненты без дочерних компонентов являются листьями. Такая классификация компонентов полезна для понимания потока данных и производительности рендеринга. Моделирование взаимосвязей между модулями JavaScript — еще один полезный способ понять работу вашего приложения. Мы называем это деревом зависимостей модулей.

Пример дерева зависимостей модулей.

Дерево зависимостей часто используется инструментами сборки для объединения всего необходимого кода JavaScript, который клиент должен загрузить и отобразить. Большой размер пакета ухудшает пользовательский опыт в приложениях React. Понимание дерева зависимостей модулей помогает отлаживать такие проблемы.