title |
---|
Ваш первый компонент |
Компоненты — это один из основных концептов React. Они являются основой, на которой вы строите пользовательские интерфейсы (UI), что делает их идеальным местом для начала вашего пути в React!
- Что такое компонент
- Какую роль играют компоненты в React-приложении
- Как написать ваш первый React-компонент
В интернете HTML позволяет создавать нам структурированные документы, используя встроенный набор тегов, например <h1>
и <li>
:
<article>
<h1>Мой первый компонент</h1>
<ol>
<li>Компоненты: строительные блоки UI</li>
<li>Определение компонента</li>
<li>Использование компонента</li>
</ol>
</article>
Разметка выше представляет эту статью как <article>
, её заголовок как <h1>
и (сокращённое) оглавление как упорядоченный список <ol>
. Такая разметка, в сочетании с CSS для стилизации и JavaScript для создания интерактивности, кроется в каждой боковой панели, аватаре, модальном окне, выпадающем меню — каждой части UI, которую вы видите в интернете.
С React можно объединять разметку, CSS и JavaScript в ваши собственные "компоненты", переиспользуемые элементы UI для вашего приложения. Код оглавления выше, можно превратить в компонент <TableOfContents />
и отрендерить его на любой странице. Внутри он всё ещё использует те же HTML-теги, такие как <article>
, <h1>
и т.д.
Как и HTML-теги, компоненты можно комбинировать, упорядочивать и вкладывать друг в друга для создания целых страниц. Например, страница документации, которую вы сейчас читаете, состоит из React-компонентов:
<PageLayout>
<NavigationHeader>
<SearchBar />
<Link to="/docs">Документация</Link>
</NavigationHeader>
<Sidebar />
<PageContent>
<TableOfContents />
<DocumentationText />
</PageContent>
</PageLayout>
По мере роста вашего проекта вы заметите, что многие из ваших дизайнов можно создать, переиспользуя уже готовые компоненты, а это ускорит разработку. Наше оглавление выше может быть добавлено на любой экран как <TableOfContents />
! Можно дать резкий старт своему проекту, используя тысячи компонентов с открытым исходным кодом, которые были созданы React-сообществом, например Chakra UI и Material UI.
Раньше при создании веб-страниц разработчики размечали свой контент, а затем добавляли щепотку интерактивности с помощью JavaScript. Это работало отлично, ведь интерактивность в интернете была просто приятной мелочью. Сегодня же это обязательная часть многих сайтов, еще больше — приложений. React ставит интерактивность на первое место, при этом используя ту же технологию: React-компонент представляет собой JavaScript-функцию, которую можно припудрить разметкой. Вот как это выглядит (вы можете редактировать пример ниже):
export default function Profile() {
return (
<img
src="https://i.imgur.com/MK3eW3Am.jpg"
alt="Кэтрин Джонсон"
/>
)
}
img { height: 200px; }
А вот как создать компонент:
Префикс export default
— это стандартный синтаксис JavaScript (не является спецификой React). Он позволяет пометить основную функцию в файле, чтобы её можно было импортировать из других файлов. (Подробнее об импорте в Импорт и Экспорт компонентов!)
С помощью function Profile() { }
вы определяете JavaScript-функцию с именем Profile
.
React-компоненты — это обычные JavaScript функции, но их имена должны начинаться с заглавной буквы, иначе они не будут работать!
Компонент возвращает тег <img />
с атрибутами src
и alt
. <img />
выглядит как HTML, но на самом деле под капотом это JavaScript! Этот синтаксис называется JSX, и он позволяет вам вставлять разметку в JavaScript.
Оператор return
можно записать в одну строку, как в этом компоненте:
return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кэтрин Джонсон" />;
Но если вся ваша разметка не находится на той же строке, что и ключевое слово return
, то вы должны обернуть её в пару скобок:
return (
<div>
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кэтрин Джонсон" />
</div>
);
Без скобок любой код на строках после return
будет проигнорирован!
Теперь, когда вы определили компонент Profile
, вы можете вкладывать его в другие компоненты. Например, вы можете экспортировать компонент 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>
);
}
img { margin: 0 10px 10px 0; height: 90px; }
Обратите внимание на разницу в регистре:
<section>
в нижнем регистре, поэтому React знает, что мы обращаемся к HTML-тегу.<Profile />
начинается с заглавной буквыP
, поэтому React знает, что мы хотим использовать наш компонент с именемProfile
.
А Profile
содержит ещё больше HTML: <img />
. В конечном итоге, вот что видит браузер:
<section>
<h1>Изумительные учёные</h1>
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кэтрин Джонсон" />
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кэтрин Джонсон" />
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кэтрин Джонсон" />
</section>
Компоненты — это обычные функции JavaScript, поэтому вы можете держать несколько компонентов в одном файле. Это удобно, когда компоненты относительно небольшие или тесно связаны друг с другом. Если этот файл становится переполненным, вы всегда можете переместить Profile
в отдельный файл. В скором времени вы узнаете, как это сделать на странице об импортах.
Поскольку компоненты Profile
рендерятся внутри компонента Gallery
—даже несколько раз!—мы можем сказать, что Gallery
является родительским компонентом, который рендерит каждый Profile
как "ребёнка". Это часть магии React: вы можете определить компонент один раз и затем использовать его в любом количестве мест и сколько угодно раз.
Компоненты могут рендерить другие компоненты, но вы никогда не должны вкладывать их определения:
export default function Gallery() {
// 🔴 Никогда не определяйте компонент внутри другого компонента!
function Profile() {
// ...
}
// ...
}
Код выше очень медленный и вызывает ошибки. Вместо этого определяйте каждый компонент на верхнем уровне:
export default function Gallery() {
// ...
}
// ✅ Определяйте компоненты на верхнем уровне
function Profile() {
// ...
}
Если дочернему компоненту нужны данные от родительского, передавайте их через пропсы, вместо вложенных определений.
Ваше React-приложение начинается с "корневого" компонента. Обычно он создаётся автоматически при создании нового проекта. Например, если вы используете CodeSandbox, корневой компонент определён в файле src/App.js
. Если вы используете фреймворк Next.js, корневой компонент определён в файле pages/index.js
. В этих примерах вы экспортировали корневые компоненты.
Большинство React-приложений используют компоненты повсюду. Это означает, что вы будете использовать компоненты не только для переиспользуемых элементов, таких как кнопки, но также для более крупных элементов: боковых панелей, списков и в конечном итоге, целых страниц! Компоненты — это удобный способ организации кода UI и разметки, даже если некоторые из них используются только один раз.
Фреймворки на основе React пошли ещё дальше. Вместо того, чтобы использовать пустой файл HTML и позволять React "захватывать" управление страницей с помощью JavaScript, они также автоматически генерируют HTML из ваших React-компонентов. Это позволяет вашему приложению показывать часть контента до того, как загрузится JavaScript код.
Тем не менее, многие веб-сайты используют React только для добавления интерактивности на существующие HTML-страницы. У них есть множество корневых компонентов вместо одного для всей страницы. Вы можете брать от React столько, сколько вам нужно.
Вы только что познакомились с React! Давайте повторим некоторые ключевые моменты.
-
React позволяет вам создавать компоненты, переиспользуемые элементы UI для вашего приложения.
-
В React-приложении каждый элемент UI это компонент.
-
Компоненты React — это обычные функции JavaScript, за исключением того, что:
- Их имена всегда начинаются с заглавной буквы.
- Они возвращают разметку JSX.
Этот пример не работает из-за того, что корневой компонент не экспортирован:
function Profile() {
return (
<img
src="https://i.imgur.com/lICfvbD.jpg"
alt="Аклилу Лемма"
/>
);
}
img { height: 181px; }
Попробуйте исправить его самостоятельно прежде чем смотреть в решение!
Добавьте export default
перед определением функции, вот так:
export default function Profile() {
return (
<img
src="https://i.imgur.com/lICfvbD.jpg"
alt="Аклилу Лемма"
/>
);
}
img { height: 181px; }
Возможно, вы задаётесь вопросом, почему написать лишь export
недостаточно, чтобы исправить этот пример. Вы можете узнать разницу между export
и export default
в разделе Импорт и Экспорт компонентов.
Что-то не так с оператором return
. Сможете его исправить?
При попытке исправить оператор вы можете получить ошибку "Unexpected token". В этом случае убедитесь, что точка с запятой находится после закрывающей скобки. Оставив точку с запятой внутри return ( )
, вы вызовите ошибку.
export default function Profile() {
return
<img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Кацуко Сарухаси" />;
}
img { height: 180px; }
Вы можете исправить этот компонент, записав оператор return
в одну строку, вот так:
export default function Profile() {
return <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Кацуко Сарухаси" />;
}
img { height: 180px; }
Или обернув возвращаемуе JSX разметку в скобки, которые открываются сразу после return
:
export default function Profile() {
return (
<img
src="https://i.imgur.com/jA8hHMpm.jpg"
alt="Кацуко Сарухаси"
/>
);
}
img { height: 180px; }
Что-то не так с тем, как объявлен и использован компонент Profile
. Сможете найти ошибку? (Попробуйте вспомнить, как React отличает компоненты от обычных тегов HTML!)
function profile() {
return (
<img
src="https://i.imgur.com/QIrZWGIs.jpg"
alt="Алан Л. Харт"
/>
);
}
export default function Gallery() {
return (
<section>
<h1>Изумительные учёные</h1>
<profile />
<profile />
<profile />
</section>
);
}
img { margin: 0 10px 10px 0; height: 90px; }
Имена React-компонентов должны начинаться с заглавной буквы.
Замените function profile()
на function Profile()
, а затем каждый <profile />
на <Profile />
:
function Profile() {
return (
<img
src="https://i.imgur.com/QIrZWGIs.jpg"
alt="Алан Л. Харт"
/>
);
}
export default function Gallery() {
return (
<section>
<h1>Изумительные учёные</h1>
<Profile />
<Profile />
<Profile />
</section>
);
}
img { margin: 0 10px 10px 0; }
Напишите компонент с нуля. Вы можете дать ему любое допустимое имя и вернуть любую разметку. Если ничего не приходит на ум, то вы можете написать компонент Congratulations
, который отображает заголовок <h1>Хорошая работа!</h1>
. Не забудьте экспортировать компонент!
// Напишите свой компонент ниже!
export default function Congratulations() {
return (
<h1>Хорошая работа!</h1>
);
}