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

Добро пожаловать в документацию React! На этой странице вы познакомитесь с 80% концепций React, которые вы будете использовать ежедневно.

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

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

Компоненты React — это JavaScript-функции, которые возвращают разметку:

Теперь, когда вы объявилиMyButton, вы можете вложить его в другой компонент:

Обратите внимание, что<MyButton />начинается с заглавной буквы. Так вы понимаете, что это компонент React. Имена компонентов React всегда должны начинаться с заглавной буквы, в то время как HTML-теги должны быть в нижнем регистре.

Посмотрите на результат:

Ключевые словаexport defaultуказывают на главный компонент в файле. Если вы не знакомы с каким-либо синтаксисом JavaScript, наMDN и javascript.infoесть отличные справочные материалы.

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

Синтаксис разметки, который вы видели выше, называетсяJSX. Он необязателен, но большинство проектов React используют JSX из-за его удобства. Всерекомендуемые инструменты для локальной разработкиподдерживают JSX из коробки.

JSX строже, чем HTML. Вы должны закрывать теги, такие как<br />. Также ваш компонент не может возвращать несколько JSX-тегов. Вы должны обернуть их в общего родителя, например, в<div>...</div>или пустую обёртку<>...</>:

Если вам нужно перенести много HTML в JSX, вы можете использоватьонлайн-конвертер.

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

В React вы указываете CSS-класс с помощьюclassName. Это работает так же, как HTML-атрибутclass:

Затем вы пишете CSS-правила для него в отдельном CSS-файле:

React не предписывает, как добавлять CSS-файлы. В простейшем случае вы добавите тег<link>в ваш HTML. Если вы используете инструмент сборки или фреймворк, обратитесь к его документации, чтобы узнать, как добавить CSS-файл в ваш проект.

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

JSX позволяет помещать разметку в JavaScript. Фигурные скобки позволяют вам «вернуться» в JavaScript, чтобы встроить какую-либо переменную из вашего кода и отобразить её пользователю. Например, это отобразитuser.name:

Вы также можете «перейти в JavaScript» из атрибутов JSX, но вы должны использовать фигурные скобкивместокавычек. Например,className="avatar"передаёт строку"avatar"как CSS-класс, аsrc={user.imageUrl}читает значение JavaScript-переменнойuser.imageUrl, а затем передаёт это значение как атрибутsrc:

Внутри фигурных скобок JSX также можно размещать более сложные выражения, например,конкатенацию строк:

В приведённом выше примереstyle={{}}— это не специальный синтаксис, а обычный объект{}внутри фигурных скобок JSXstyle={ }. Атрибут styleможно использовать, когда стили зависят от JavaScript-переменных.

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

В React нет специального синтаксиса для написания условий. Вместо этого используются те же приёмы, что и при написании обычного JavaScript-кода. Например, можно использовать операторifдля условного включения JSX:

Если предпочитаете более компактный код, можно использоватьусловный оператор ?.В отличие отif, он работает внутри JSX:

Когда веткаelseне нужна, можно также использовать более короткийсинтаксис логического оператора &&:

Все эти подходы также работают для условного указания атрибутов. Если какой-то из этих синтаксисов JavaScript вам незнаком, можно начать с использованияif...else.

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

Для рендеринга списков компонентов используются возможности JavaScript, такие какцикл for и метод массива map().

Например, предположим, у вас есть массив товаров:

Внутри компонента используйте функциюmap()для преобразования массива товаров в массив элементов<li>:

Обратите внимание, что у<li>есть атрибутkey. Для каждого элемента в списке следует передавать строку или число, которое уникально идентифицирует этот элемент среди его соседей. Обычно ключ должен поступать из ваших данных, например, ID из базы данных. React использует ключи, чтобы понимать, что произошло, если вы позже вставите, удалите или переупорядочите элементы.

Обработка событий

Реагировать на события можно, объявляяфункции-обработчики событийвнутри ваших компонентов:

Обратите внимание, что вonClick={handleClick}нет круглых скобок в конце! Невызывайтефункцию-обработчик события: её нужно толькопередать. React вызовет ваш обработчик события, когда пользователь нажмёт на кнопку.

Обновление экрана

Часто требуется, чтобы компонент «запоминал» какую-то информацию и отображал её. Например, может понадобиться подсчитать, сколько раз была нажата кнопка. Для этого добавьте в компонентсостояние.

Сначала импортируйтеuseStateиз React:

Теперь вы можете объявитьпеременную состояниявнутри вашего компонента:

Вы получите две вещи изuseState: текущее состояние (count) и функцию, которая позволяет его обновить (setCount). Вы можете дать им любые имена, но по соглашению пишут[something, setSomething].

При первом отображении кнопкиcountбудет равно0, потому что вы передали0 в useState(). Когда вы хотите изменить состояние, вызовитеsetCount()и передайте ей новое значение. Нажатие на эту кнопку увеличит счётчик:

React снова вызовет вашу функцию компонента. На этот разcountбудет равно1. Затем2. И так далее.

Если вы рендерите один и тот же компонент несколько раз, каждый получит своё собственное состояние. Нажимайте на каждую кнопку отдельно:

Обратите внимание, как каждая кнопка «помнит» своё собственное состояниеcountи не влияет на другие кнопки.

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

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

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

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

В предыдущем примере каждыйMyButtonимел своё собственное независимое состояниеcount, и при нажатии на каждую кнопку менялся толькоcountдля нажатой кнопки:

Изначально состояниеcountкаждогоMyButtonравно0

ПервыйMyButtonобновляет своё состояниеcountдо1

Однако часто вам нужно, чтобы компонентыделились данными и всегда обновлялись вместе.

Чтобы оба компонентаMyButtonотображали одинаковое значениеcountи обновлялись вместе, вам нужно переместить состояние из отдельных кнопок «вверх» к ближайшему компоненту, содержащему их все.

В этом примере этоMyApp:

Изначально состояниеMyApp countравно0и передается обоим дочерним компонентам.

При кликеMyAppобновляет свое состояниеcount до 1и передает его обоим дочерним компонентам.

Теперь, когда вы нажимаете любую из кнопок, значениеcount в MyAppизменится, что изменит оба значения счетчика вMyButton. Вот как это можно выразить в коде.

Сначалаподнимите состояниеизMyButton в MyApp:

Затемпередайте состояние внизизMyAppв каждыйMyButtonвместе с общим обработчиком клика. Вы можете передавать информацию вMyButtonс помощью фигурных скобок JSX, точно так же, как вы делали ранее со встроенными тегами, такими как<img>:

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

Наконец, изменитеMyButton, чтобы ончиталпропсы, переданные ему от родительского компонента:

Когда вы нажимаете кнопку, срабатывает обработчикonClick. Пропс onClickкаждой кнопки был установлен в функциюhandleClickвнутриMyApp, поэтому выполняется код внутри нее. Этот код вызываетsetCount(count + 1), увеличивая переменную состоянияcount. Новое значениеcountпередается в качестве пропса каждой кнопке, поэтому все они показывают новое значение. Это называется «поднятием состояния». Переместив состояние вверх, вы поделились им между компонентами.

Следующие шаги

Теперь вы знаете основы написания кода на React!

Ознакомьтесь сУчебником, чтобы применить их на практике и создать свое первое мини-приложение на React.