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

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

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

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Кэтрин Джонсон"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Выдающиеся учёные</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Ready to learn this topic?

Изучите статью Ваш первый компонент, чтобы узнать как объявлять и использовать React-компоненты.

Read More

---

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

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

import Profile from './Profile.js';

export default function Gallery() {
  return (
    <section>
      <h1>Выдающиеся учёные</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Ready to learn this topic?

Ознакомьтесь со статьёй Импорт и экспорт компонентов, чтобы научиться выносить компоненты в их собственные файлы.

Read More

---

Написание JSX-разметки

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

Если мы просто вставим существующую HTML-разметку, это необязательно будет работать:

export default function TodoList() {
  return (
    // Этот код не совсем рабочий!
    <h1>Список дел Хеди Ламарр</h1>
    <img
      src="https://i.imgur.com/yXOvdOSs.jpg"
      alt="Хеди Ламарр"
      class="photo"
    >
    <ul>
      <li>Изобрести новый светофор
      <li>Отрепетировать сцену из фильма
      <li>Усовершенствовать технологии связи
    </ul>

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

export default function TodoList() {
  return (
    <>
      <h1>Список дел Хеди Ламарр</h1>
      <img
        src="https://i.imgur.com/yXOvdOSs.jpg"
        alt="Хеди Ламарр"
        className="photo"
      />
      <ul>
        <li>Изобрести новый светофор</li>
        <li>Отрепетировать сцену из фильма</li>
        <li>Улучшить технологии связи</li>
      </ul>
    </>
  );
}

Ready to learn this topic?

Прочитайте статью Написание JSX-разметки, чтобы узнать как писать работающий JSX.

Read More

---

JavaScript в JSX с использованием фигурных скобок

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

const person = {
  name: 'Грегорио И. Зара',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>Список дел {person.name}</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Грегорио И. Зара"
      />
      <ul>
        <li>Усовершенствовать видеофон</li>
        <li>Подготовить лекции по воздухоплаванию</li>
        <li>Поработать над двигателем на спиртовом топливе</li>
      </ul>
    </div>
  );
}

Ready to learn this topic?

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

Read More

---

Передача пропсов в компонент

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

import { getImageUrl } from './utils.js'

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{
          name: 'Кацуко Сарухаси',
          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>
  );
}

Ready to learn this topic?

Обратитесь к статье Передача пропсов в компонент, чтобы узнать как передавать и читать пропсы.

Read More

---

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

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

В следующем примере оператор && используется, чтобы опционально рендерить галочку:

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✔'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Список вещей Салли Райд</h1>
      <ul>
        <Item
          isPacked={true}
          name="Скафандр"
        />
        <Item
          isPacked={true}
          name="Шлем с сусальным золотом"
        />
        <Item
          isPacked={false}
          name="Фотография Тэм"
        />
      </ul>
    </section>
  );
}

Ready to learn this topic?

Прочитайте статью Условный рендеринг и узнайте все способы, как можно отображать данные в зависимости от условий.

Read More

---

Рендер списков

В веб-программировании часто бывает необходимо показать какой-нибудь список. Вы можете использовать методы JavaScript filter() и map() вместе с React, чтобы отфильтровать и преобразовать ваш массив данных в список компонентов.

Для каждого элемента массива вы должны указать 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 + ', '}
        { person.gender === 'женский' ? 'известна ' : 'известен ' } благодаря {person.accomplishment}
      </p>
    </li>
  );
  return (
    <article>
      <h1>Учёные</h1>
      <ul>{listItems}</ul>
    </article>
  );
}

Ready to learn this topic?

В статье Рендер списков вы найдёте более подробную информацию о том, как отобразить массив данных и выбрать правильный ключ.

Read More

---

Использование чистых компонентов

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

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

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

let guest = 0;

function Cup() {
  // Плохо: изменение созданной ранее переменной!
  guest = guest + 1;
  return <h2>Чашка чая для гостя #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

Чтобы сделать компонент чистым вам нужно передать в него проп, а не изменять созданную ранее переменную:

function Cup({ guest }) {
  return <h2>Чашка чая для гостя #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup guest={1} />
      <Cup guest={2} />
      <Cup guest={3} />
    </>
  );
}

Ready to learn this topic?

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

Read More

---

Что дальше?

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

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