Описание пользовательского интерфейса

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

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

function Profile() {
  return (
    <img
      src="https://i.imgur.com/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 (
    // This doesn't quite work!
    <h1>Hedy Lamarr's Todos</h1>
    <img
      src="https://i.imgur.com/yXOvdOSs.jpg"
      alt="Hedy Lamarr"
      class="photo"
    >
    <ul>
      <li>Invent new traffic lights
      <li>Rehearse a movie scene
      <li>Improve spectrum technology
    </ul>

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

export default function TodoList() {
  return (
    <>
      <h1>Hedy Lamarr's Todos</h1>
      <img
        src="https://i.imgur.com/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://i.imgur.com/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. Ключи позволяют 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 />
    </>
  );
}

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

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 — это представление отношений «родитель-дочерний» между компонентами.

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

Моделирование взаимосвязей между модулями JavaScript — еще один полезный способ понять ваше приложение. Мы называем его деревом зависимостей модулей.

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

Что дальше?

Перейдите к Вашему первому компоненту, чтобы начать чтение этой главы по страницам!

Или, если вы уже знакомы с этими темами, почему бы не прочитать о Добавлении интерактивности?