Быстрый старт с React

9 месяцев назад·7 мин. на чтение

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

Содержание туториала по React Эта страница познакомит вас с 80% концепций React, которые вы будете использовать ежедневно.

Создание компонентов

React приложения состоят из компонентов. Компонент — это часть UI (пользовательского интерфейса), которая имеет собственную логику и внешний вид. Компонент может быть маленьким, как кнопка, или большим, как целая страница. React компоненты — это функции JavaScript, которые возвращают разметку:
function MyButton() {
  return <button>I'm a button</button>;
}
Теперь, когда вы объявили MyButton, вы можете вложить его в другой компонент:
export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}
Обратите внимание, что <MyButton /> начинается с заглавной буквы. Так мы узнаем, что это React компонент. Имена React компонентов всегда должны начинаться с заглавной буквы, а теги HTML должны быть строчными. Ключевые слова export default определяют главный компонент в файле.

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

Синтаксис разметки, который вы видели выше, называется JSX. Это необязательно, но большинство проектов React используют JSX для удобства. Все рекомендуемые для локальной разработки инструменты, поддерживают JSX «из коробки». JSX строже, чем HTML. Вы должны закрыть теги типа <br />. Ваш компонент также не может возвращать несколько тегов JSX. Вы должны обернуть их в общий родитель, например <div>...</div> или пустую оболочку <>...</>:
function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>
        Hello there.
        <br />
        How do you do?
      </p>
    </>
  );
}
Если у вас есть много HTML для переноса в JSX, вы можете использовать онлайн-конвертер.

Добавление стилей

В React вы указываете CSS класс с помощью className. Он работает так же, как атрибут class в HTML:
<img className="avatar" />
Затем вы пишете правила CSS для него в отдельном файле CSS:
/* In your CSS */
.avatar {
  border-radius: 50%;
}
React не предписывает, как добавлять файлы CSS. В самом простом случае вы добавите тег <link> в свой HTML. Если вы используете инструмент сборки или фреймворк, обратитесь к его документации, чтобы узнать, как добавить файл CSS в свой проект.

Отображение данных

JSX позволяет размещать разметку в JavaScript. Фигурные скобки позволяют вам «уйти обратно» в JavaScript, чтобы вы могли внедрить некоторую переменную из своего кода и отобразить ее пользователю. Например, это отобразит user.name:
return <h1>{user.name}</h1>;
Вы также можете «убежать в JavaScript» из атрибутов JSX, но вам нужно использовать фигурные скобки вместо кавычек. Например, className="avatar" передает строку "avatar" как CSS класс, но src={user.imageUrl} считывает значение JavaScript переменной user.imageUrl, а затем передает это значение как атрибут src:
return <img className="avatar" src={user.imageUrl} />;
Вы также можете поместить более сложные выражения в фигурные скобки JSX, например, конкатенацию строк:
const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize,
        }}
      />
    </>
  );
}
В приведенном выше примере style={{}} не является специальным синтаксисом, а является обычным объектом {} внутри фигурных скобок style={ } JSX. Вы можете использовать атрибут style, когда ваши стили зависят от переменных JavaScript.

Рендеринг по условию

В React нет специального синтаксиса для написания условий. Вместо этого можно использовать те же приемы, что и при написании обычного JavaScript кода. Например, вы можете использовать оператор if для условного включения JSX:
let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return <div>{content}</div>;
Если вы предпочитаете более компактный код, вы можете использовать условный ? оператор. В отличие от if, он работает внутри JSX:
<div>{isLoggedIn ? <AdminPanel /> : <LoginForm />}</div>
Если вам не нужна ветвь else, вы также можете использовать более короткий синтаксис логического &&:
<div>{isLoggedIn && <AdminPanel />}</div>
Все эти подходы также работают для указанных по условию атрибутов. Если вы не знакомы с некоторыми элементами этого синтаксиса JavaScript, вы можете начать с постоянного использования if...else.

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

Вы будете полагаться на возможности JavaScript, такие как цикл for и метод массива map() для отображения списков компонентов. Например, допустим, у вас есть набор продуктов:
const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];
Внутри вашего компонента используйте метод map() для преобразования массива продуктов в массив элементов <li>:
const listItems = products.map((product) => (
  <li key={product.id}>{product.title}</li>
));

return <ul>{listItems}</ul>;
Обратите внимание, что <li> имеет атрибут key. Для каждого элемента в списке вы должны передать строку или число, которое однозначно идентифицирует этот элемент среди его соседних элементов. Обычно ключ должен исходить из ваших данных, таких как идентификатор базы данных. React будет полагаться на ваши ключи, чтобы понять, что произошло, если вы позже вставите, удалите или измените порядок элементов.
const products = [
  { title: 'Cabbage', isFruit: false, id: 1 },
  { title: 'Garlic', isFruit: false, id: 2 },
  { title: 'Apple', isFruit: true, id: 3 },
];

export default function ShoppingList() {
  const listItems = products.map((product) => (
    <li
      key={product.id}
      style={{
        color: product.isFruit ? 'magenta' : 'darkgreen',
      }}
    >
      {product.title}
    </li>
  ));

  return <ul>{listItems}</ul>;
}

Реакция на события

Вы можете реагировать на события, объявляя функции обработчиков событий внутри ваших компонентов:
function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return <button onClick={handleClick}>Click me</button>;
}
Обратите внимание, что onClick={handleClick} не имеет круглых скобок в конце. Не вызывайте функцию обработчика событий: вам нужно только передать ее вниз. React вызовет ваш обработчик событий, когда пользователь нажмет кнопку.

Обновление компонентов

Часто необходимо, чтобы компонент «запоминал» некоторую информацию и отображал ее. Например, может быть, вы хотите подсчитать, сколько раз была нажата кнопка. Для этого нужно добавить состояние к компоненту. Во-первых, импортируйте useState из React: Теперь вы можете объявить переменную состояния внутри вашего компонента:
function MyButton() {
  const [count, setCount] = useState(0);
От useState вы получите две вещи: текущее состояние (count) и функцию, которая позволяет вам его обновить (setCount). Вы можете давать им любые имена, но принято называть их как [something, setSomething]. При первом отображении кнопки count будет равен 0, потому что вы передали 0 в useState(). Если вы хотите изменить состояние, вызовите setCount() и передайте ему новое значение. Нажатие на эту кнопку увеличит счетчик:
function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>Clicked {count} times</button>;
}
React снова вызовет функцию вашего компонента. На этот раз счет будет 1. Затем будет 2. И так далее. Если вы визуализируете один и тот же компонент несколько раз, каждый из них получит свое собственное состояние.
import { useState } from 'react';

export default function MyApp() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>Clicked {count} times</button>;
}
Обратите внимание, как каждая кнопка «запоминает» свое собственное состояние счетчика и не влияет на другие кнопки.

Использование хуков

Функции, начинающиеся с use, называются хуками. useState — это встроенный хук, предоставляемый React. Вы можете найти другие встроенные хуки в справочнике React API. Вы также можете написать свои собственные хуки, комбинируя существующие. Хуки накладывают больше ограничений, чем обычные функции. Вы можете вызывать хуки только на верхнем уровне ваших компонентов (или других хуков). Если вы хотите использовать useState в условии или цикле, создайте новый компонент и поместите его туда.

Обмен данными между компонентами

В предыдущем примере у каждой MyButton был собственный независимый счетчик, и при нажатии каждой кнопки менялся только счетчик нажатой кнопки. Однако часто вам потребуются компоненты для обмена данными и постоянного обновления вместе. Чтобы оба компонента MyButton отображали одно и то же число и обновлялись вместе, вам нужно переместить состояние от отдельных кнопок «вверх» к ближайшему родительскому компоненту, содержащему их все. Теперь, когда вы нажмете любую кнопку, счетчик в MyApp изменится, что изменит оба счетчика в MyButton. Вот как это можно выразить в коде.
Во-первых, переместите состояние из MyButton в MyApp:
export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  //
}
Затем передайте состояние из MyApp в каждый MyButton вместе с общим обработчиком кликов. Вы можете передавать информацию в MyButton с помощью фигурных скобок JSX, точно так же, как вы делали это раньше со встроенными тегами, такими как <img>:
export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Счетчики, изменяющиеся вместе</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}
Информация, которую вы передаете таким образом, называется пропсами. Теперь компонент MyApp содержит состояние счетчика и обработчик события handleClick и передает их оба в качестве пропсов каждой из кнопок. Наконец, измените MyButton, чтобы он считывал пропсы, которые вы передали из его родительского компонента:
function MyButton({ count, onClick }) {
  return <button onClick={onClick}>Clicked {count} times</button>;
}
Когда вы нажимаете кнопку, срабатывает обработчик onClick. Проп onClick каждой кнопки было установлено на функцию handleClick внутри MyApp, поэтому код внутри него выполняется. Этот код вызывает setCount(count + 1), увеличивая переменную состояния count. Новое значение счетчика передается в качестве пропса каждой кнопке, поэтому все они показывают новое значение. Это называется «подъем состояния вверх». Переместив состояние вверх, мы разделили его между компонентами.
import { useState } from 'react';

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Счетчики, изменяющиеся вместе</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return <button onClick={onClick}>Clicked {count} times</button>;
}
Подробнее о всех случаях передачи данных между компонентами можно прочитать здесь.

Структура React приложения

год назад·6 мин. на чтение

Как структурировать React приложение и как организовать React приложение.

Не существует единого мнения о том, как правильно организовать React-приложение. React дает вам много свободы, но вместе с этой свободой приходит ответственность за выбор собственной архитектуры. Часто бывает так, что тот, кто создает приложение в самом начале, сваливает почти все в папку components. Но есть способ получше. Нужно подходить к организации своих приложений обдуманно, чтобы их было легко использовать, понимать и расширять. В этой статье рассмотрим вариант структуры Реакт приложения, который интуитивно понятен и может масштабироваться с ростом React приложения. Основная концепция, заключается в том, чтобы сделать архитектуру ориентированной на функциональность, а не на типы. Организовать только общие компоненты на глобальном уровне и собрать в один модуль все остальные связанные сущности вместе.

Технологии

Поскольку эта статья будет носить характер мнения. Сделаем несколько предположений о том, какие технологии будут использоваться в проекте: Нет четкого мнения по поводу стилей, идеальны ли Styled Components, CSS-модули или пользовательский набор для Sass, поэтому можно использовать любой подходящий вариант. Также предполагается, что тесты находятся рядом с кодом, а не в папке tests на верхнем уровне. Все, что здесь написано, может быть применимо, если вы используете обычный Redux, а не Redux Toolkit. Можно настроить ваш Redux как feature slices. Также будет удобно визуализировать созданные компоненты с помощью, например, Storybook. Также покажем, как проект будет выглядеть с этими файлами, если вы решите использовать его в своем проекте. Для примера будем использовать приложение “Библиотека”, который имеет страницу со списком книг, страницу со списком авторов и систему аутентификации.

Структура каталога

Структура каталогов верхнего уровня будет выглядеть следующим образом:
  • assets - глобальные статические файлы, такие как изображения, svg, логотип компании и т.д.
  • components - глобальные общие/повторно используемые компоненты, такие как макеты (обертки), компоненты форм, кнопки
  • services - JavaScript модули
  • store - глобальное хранилище Redux
  • utils - утилиты, помощники, константы и т.п.
  • views - можно также назвать pages, здесь будет содержаться большая часть приложения. Лучше сохранять привычные соглашения, где это возможно, поэтому src содержит все, index.js является точкой входа, а App.js устанавливает аутентификацию и маршрутизацию.
.
└── /src
    ├── /assets
    ├── /components
    ├── /services
    ├── /store
    ├── /utils
    ├── /views
    ├── index.js
    └── App.js
Также в проекте могут присутствовать некоторые дополнительные папки, которые у вас могут быть, такие как types, если это проект TypeScript, middlewares (промежуточное программное обеспечение), если необходимо, возможно, контекст для работы с Context API и т.д.

Псевдонимы (алиасы)

Полезно настроить систему на использование псевдонимов, чтобы все, что находится в папке компонентов, можно было импортировать как @components, изображения как @assets и т. д. Если у вас Webpack, это делается через конфигурацию resolve.
module.exports = {
  resolve: {
    extensions: ['js', 'ts'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@assets': path.resolve(__dirname, 'src/assets'),
      '@components': path.resolve(__dirname, 'src/components'),
      // ...etc
    },
  },
}
Это просто облегчает импорт из любого места в проекте и перемещение файлов без изменения импорта, и вы никогда не получите что-то вроде ../../../../../../../components/.

Компоненты

В папке components компоненты сгруппированы по типам - формы, таблицы, кнопки, макеты и т.д. Специфика зависит от конкретного приложения. В данном примере предполагается, что вы либо создаете собственную систему форм, либо создаете привязку к существующей системе форм (например, комбинируя Formik и Material UI). В этом случае вы создадите папку для каждого компонента (TextField, Select, Radio, Dropdown и т.д.), а внутри будет файл для самого компонента, стили, тесты и Storybook, если он используется.
  • Component.js - собственно компонент React
  • Component.styles.js - файл стилей для компонента
  • Component.test.js - тесты
  • Component.stories.js - файл Storybook.
Это имеет гораздо больше смысла, чем иметь одну папку, содержащую файлы для всех компонентов, одну папку, содержащую все тесты, одну папку, содержащую все файлы Storybook и т.д. Все связанное группируется вместе и легко находится.
.
└── /src
    └── /components
        ├── /forms
        │   ├── /TextField
        │   │   ├── TextField.js
        │   │   ├── TextField.styles.js
        │   │   ├── TextField.test.js
        │   │   └── TextField.stories.js
        │   ├── /Select
        │   │   ├── Select.js
        │   │   ├── Select.styles.js
        │   │   ├── Select.test.js
        │   │   └── Select.stories.js
        │   └── index.js
        ├── /routing
        │   └── /PrivateRoute
        │       ├── /PrivateRoute.js
        │       └── /PrivateRoute.test.js
        └── /layout
            └── /navigation
                └── /NavBar
                    ├── NavBar.js
                    ├── NavBar.styles.js
                    ├── NavBar.test.js
                    └── NavBar.stories.js
Обратите внимание, что в каталоге components/forms есть файл index.js. Часто справедливо советуют избегать использования файлов index.js, поскольку они не являются явными, но в данном случае это имеет смысл - в конечном итоге он будет индексом всех форм и будет выглядеть примерно так:
// src/components/forms/index.js

import { TextField } from './TextField/TextField'
import { Select } from './Select/Select'
import { Radio } from './Radio/Radio'

export { TextField, Select, Radio }
Затем, когда вам понадобится использовать один или несколько компонентов, вы можете легко импортировать их все сразу.
import { TextField, Select, Radio } from '@components/forms'
Иногда лучше использовать этот подход, чем создавать index.js внутри каждой папки внутри forms, так что теперь у вас есть только один index.js, который фактически индексирует всю директорию, в отличие от десяти файлов index.js только для того, чтобы упростить импорт для каждого отдельного файла.

Сервисы

Каталог services менее важен, чем компоненты, но если вы создаете простой модуль JavaScript, который используется остальной частью приложения, он может быть полезен. Обычный пример - модуль LocalStorage, который может выглядеть следующим образом:
.
└── /src
    └── /services
        ├── /LocalStorage
        │   ├── LocalStorage.service.js
        │   └── LocalStorage.test.js
        └── index.js
Пример сервиса:
// src/services/LocalStorage/LocalStorage.service.js
export const LocalStorage = {
  get(key) {},
  set(key, value) {},
  remove(key) {},
  clear() {},
}
import { LocalStorage } from '@services'

LocalStorage.get('foo')

Хранилище (стор, store)

Глобальное хранилище данных будет содержаться в директории store - в данном случае Redux. Каждая функциональность будет иметь свою папку, в которой будет содержаться слайс Redux Toolkit, а также экшены и тесты. Эта настройка также может быть использована с обычным Redux, вы просто создадите файл .reducers.js и .actions.js вместо slice. Если вы используете саги, это может быть .saga.js вместо .actions.js для действий Redux Thunk.
.
└── /src
    ├── /store
    │   ├── /authentication
    │   │   ├── /authentication.slice.js
    │   │   ├── /authentication.actions.js
    │   │   └── /authentication.test.js
    │   ├── /authors
    │   │   ├── /authors.slice.js
    │   │   ├── /authors.actions.js
    │   │   └── /authors.test.js
    │   └── /books
    │       ├── /books.slice.js
    │       ├── /books.actions.js
    │       └── /books.test.js
    ├── rootReducer.js
    └── index.js
Вы также можете добавить что-то вроде ui секции стора для обработки модальных окон, всплывающих уведомлений, переключения боковой панели и других глобальных состояний пользовательского интерфейса, что, лучше, чем иметь const [isOpen, setIsOpen] = useState(false) повсюду. В rootReducer вы импортируете все свои фрагменты и объединяете их с помощью combineReducers, а в index.js настраиваете магазин.

Утилиты (Utils)

Нужна ли вашему проекту папка utils - решать вам. Но обычно существуют некоторые глобальные функции, такие как валидация и конвертеры, которые могут легко использоваться в различных разделах приложения. Если вы упорядочите их - не будете иметь один файл helpers.js, содержащий тысячи функций, - она может стать полезным дополнением к организации вашего проекта.
.
└── src
    └── /utils
        ├── /constants
        │   └── countries.constants.js
        └── /helpers
            ├── validation.helpers.js
            ├── currency.helpers.js
            └── array.helpers.js
Опять же, папка utils может содержать все, что вы захотите, и что, по вашему мнению, имеет смысл держать на глобальном уровне. Если вам не нравятся "многоуровневые" имена файлов, вы можете просто назвать его validation.js. Однако, это облегчает навигацию по именам файлов при поиске в IDE.

Views

Здесь находится основная часть вашего приложения: в каталоге views. Любая страница в вашем приложении - это "представление" (view). В этом небольшом примере представления довольно хорошо согласуются со стором Redux, но не обязательно, что стор и представления будут полностью совпадать, поэтому они разделены. Кроме того, книги могут тянуть за собой авторов, и так далее. Все, что находится внутри представления, является сущностью, которая, скорее всего, будет использоваться только в этом конкретном представлении - BookForm, который будет использоваться только на маршруте /books, и AuthorBlurb, который будет использоваться только на маршруте /authors. Это могут быть специфические формы, модальные окна, кнопки, любые компоненты, которые не будут глобальными. Преимущество хранения всего в домене вместо объединения всех страниц в компоненты/страницы заключается в том, что это позволяет легко взглянуть на структуру приложения и узнать, сколько в нем представлений верхнего уровня, и понять, где находится все, что используется только этим представлением. Если есть вложенные маршруты, вы всегда можете добавить папку вложенных представлений в основной маршрут.
.
└── /src
    └── /views
        ├── /Authors
        │   ├── /AuthorsPage
        │   │   ├── AuthorsPage.js
        │   │   └── AuthorsPage.test.js
        │   └── /AuthorBlurb
        │       ├── /AuthorBlurb.js
        │       └── /AuthorBlurb.test.js
        ├── /Books
        │   ├── /BooksPage
        │   │   ├── BooksPage.js
        │   │   └── BooksPage.test.js
        │   └── /BookForm
        │       ├── /BookForm.js
        │       └── /BookForm.test.js
        └── /Login
            ├── LoginPage
            │   ├── LoginPage.styles.js
            │   ├── LoginPage.js
            │   └── LoginPage.test.js
            └── LoginForm
                ├── LoginForm.js
                └── LoginForm.test.js
Хранение всего в папках может показаться раздражающим, если вы никогда не создавали свой проект таким образом - вы всегда можете сделать его более плоским или перенести тесты в свой собственный каталог, имитирующий остальную часть приложения.

Итоги

Эта структура приложения и организация React, которая хорошо масштабируется для большого enterprise приложения, удобна для тестирования и стилизации, а также сохраняет все вместе в функционально ориентированном виде. Она более вложенная, чем традиционная структура, в которой все находится в компонентах и контейнерах. Легко взглянуть на эту систему и понять, что нужно для вашего приложения и куда идти, чтобы поработать над конкретным разделом или компонентом, который влияет на приложение глобально.