Импорт и экспорт React компонентов
год назад·4 мин. на чтение
Как импортировать и экспортировать React компоненты
Содержание туториала по React
Магия компонентов заключается в возможности их повторного использования: вы можете создавать компоненты, состоящие из других компонентов. Но по мере того, как вы вкладываете все больше и больше компонентов, часто имеет смысл начать разбивать их на разные файлы. Это позволяет легко сканировать файлы и повторно использовать компоненты в большем количестве мест.
Здесь и
Когда вы пишете импорт по умолчанию, вы можете указать любое имя после импорта. Например, вместо этого вы можете написать
Затем импортируйте
Файл корневого компонента
В части "Пишем первый React компонент" мы создали компонентProfile
и компонент Gallery
, который его отображает:
В настоящее время они находятся в корневом файле компонента, который в этом примере называетсяfunction Profile() { return <img src="https://example.com/userpic.jpg" alt="User Name" />; } export default function Gallery() { return ( <section> <h1>Amazing scientists</h1> <Profile /> <Profile /> <Profile /> </section> ); }
App.js
. В Create React App ваше приложение находится в src/App.js
. Однако в зависимости от вашей настройки ваш корневой компонент может находиться в другом файле. Если вы используете фреймворк с файловой маршрутизацией, например Next.js, ваш корневой компонент будет разным для каждой страницы.
Экспорт и импорт компонента
Что, если в будущем вы захотите изменить посадочную страницу и разместить там список научных книг? Или разместить все профили в другом месте? Имеет смысл переместитьGallery
и Profile
из корневого файла компонента. Это сделает их более модульными и позволит повторно использовать их в других файлах. Вы можете переместить компонент в три шага:
- Создайте новый файл JS, чтобы поместить в него компоненты.
- Экспортируйте компонент из этого файла (используя экспорт по умолчанию или именованный экспорт).
- Импортируйте его в файл, в котором вы будете использовать компонент (используя соответствующую технику для импорта по умолчанию или именованного экспорта).
Profile
, и Gallery
были перемещены из App.js
в новый файл с именем Gallery.js
. Теперь вы можете изменить App.js
, чтобы импортировать галерею из Gallery.js
:
// App.js import Gallery from './Gallery.js'; export default function App() { return <Gallery />; }
Обратите внимание, как этот пример теперь разбит на два файла компонентов:// Gallery.js function Profile() { return <img src="https://example.com/userpic.jpg" alt="User Name" />; } export default function Gallery() { return ( <section> <h1>Amazing scientists</h1> <Profile /> <Profile /> <Profile /> </section> ); }
Gallery.js
:- Определяет компонент профиля, который используется только в том же файле и не экспортируется.
- Экспортирует компонент
Gallery
в качестве экспорта по умолчанию.
App.js
:- Импортирует
Gallery
по умолчанию изGallery.js
. - Экспортирует корневой компонент
App
в качестве экспорта по умолчанию.
- Импортирует
.js
, например:
Иimport Gallery from './Gallery';
'./Gallery.js'
, и './Gallery'
будут работать с React, хотя первое ближе к тому, как работают нативные модули ES.
Экспорт по умолчанию и именованный экспорт
Существует два основных способа экспорта значений с помощью JavaScript: экспорт по умолчанию и именованный экспорт. До сих пор в наших примерах использовался только экспорт по умолчанию. Но вы можете использовать один или оба из них в одном файле. Файл может иметь не более одного экспорта по умолчанию, но он может иметь сколько угодно именованных экспортов. То, как вы экспортируете свой компонент, определяет, как вы должны его импортировать. Вы получите сообщение об ошибке, если попытаетесь импортировать экспорт по умолчанию так же, как и именованный экспорт. Эта таблица поможет вам:Синтаксис | Ээкспортирование | Импортрирование |
---|---|---|
по умолчанию | export default function Button() {} | import Button from './button.js'; |
именованный | export function Button() {} | import { Button } from './button.js'; |
import Banana from './button.js'
, и он все равно предоставит вам тот же экспорт по умолчанию. Напротив, при именованном импорте имя должно совпадать с обеих сторон. Вот почему они называются именованным импортом.
Люди часто используют экспорт по умолчанию, если файл экспортирует только один компонент, и используют именованный экспорт, если он экспортирует несколько компонентов и значений. Независимо от того, какой стиль вы предпочитаете, всегда давайте осмысленные имена функциям компонентов и файлам, которые их содержат. Компоненты без имен, такие как export default() => {}
, не рекомендуются, поскольку они усложняют отладку.
Экспорт и импорт нескольких компонентов из одного файла
Что, если вы хотите показать только одинProfile
вместо галереи? Вы также можете экспортировать компонент Profile
. Но в Gallery.js
уже есть экспорт по умолчанию, и у вас не может быть двух экспортов по умолчанию. Вы можете создать новый файл с экспортом по умолчанию или добавить именованный экспорт для Profile
. Файл может иметь только один экспорт по умолчанию, но он может иметь множество именованных экспортов.
Чтобы уменьшить возможную путаницу между экспортом по умолчанию и именованным экспортом, некоторые команды предпочитают придерживаться только одного стиля (по умолчанию или именованного) или избегать их смешивания в одном файле. Это вопрос предпочтений. Делайте то, что лучше всего работает для вас.
Сначала экспортируйте Profile
из Gallery.js
, используя именованный экспорт (без ключевого слова default
):
export function Profile() { // ... }
Profile
из Gallery.js
в App.js
, используя именованный импорт (с фигурными скобками):
Наконец, отобразитеimport { Profile } from './Gallery.js';
<Profile />
из компонента App
:
Теперьexport default function App() { return <Profile />; }
Gallery.js
содержит два экспорта: экспорт Gallery
по умолчанию и именованный экспорт Profile
. App.js
импортирует их оба.
// App.js import Gallery from './Gallery.js'; import { Profile } from './Gallery.js'; export default function App() { return <Profile />; }
Теперь вы используете сочетание экспорта по умолчанию и именованного экспорта:// Gallery.js export function Profile() { return <img src="https://example.com/userpic.jpg" alt="User Name" />; } export default function Gallery() { return ( <section> <h1>Amazing scientists</h1> <Profile /> <Profile /> <Profile /> </section> ); }
-
Gallery.js
:- Экспортирует компонент
Profile
как именованный экспорт с именемProfile
. - Экспортирует компонент
Gallery
в качестве экспорта по умолчанию.
- Экспортирует компонент
-
App.js
:- Импортирует
Profile
как именованный импорт с именемProfile
изGallery.js
. - Импортирует
Gallery
как импорт по умолчанию изGallery.js
. - Экспортирует корневой компонент
App
в качестве экспорта по умолчанию.
- Импортирует
Резюме
На этой странице вы узнали:- Что такое файл корневого компонента
- Как импортировать и экспортировать компонент
- Когда и как использовать именованный импорт и экспорт; и импорт и экспорт по умолчанию
- Как экспортировать несколько компонентов из одного файла
Архитектура веб-приложений
год назад·1 мин. на чтение
Что такое архитектура веб-приложения и как спроектировать приложение
Существует много вариантов архитектур для построения веб-приложений.
В понятие архитектуры можно включить множество вопросов. Буквально все вопросы, которые появляются перед тем как начинать делать проект, можно отнести к архитектуре. От ответов на эти вопросы будет зависеть архитектура веб приложения.
При построении архитектуры нужно исходить из потребностей и требований. Если требования не ясны, то следует исключить все пробелы.
Если у приложения есть публичная часть, которая должна индексироваться поисковиками, то следует посмотреть в сторону рендеринга на стороне сервера и соответствующие фреймворки. Это блоги, новостные сайты, интернет магазины, маркетплейсы и т.д.
Если веб-приложение представляет собой приватное приложение, то отличным вариантом может стать решение на основе рендеринга на стороне клиента (CSR). Это решения, основанные на SPA (Single Page Application), написанные с помощью фреймворков React, Angular, Vue, Svelte или PWA (Progressive Web Apps). Примерами таких приложений могут быть приложения для автосалонов, через которые зарегистрированный пользователь может записаться на техобслуживание.
С ростом проекта нужно правильно организовать не только проект, но и работу команд. Стоит рассмотреть разделение монолита на микросервисы на бекенде, и на микрофронтенды на фронтенде.
В архитектуру приложения также входит устройство бэкэнда и баз данных, наличие балансировщиков нагрузки, CDN, горизонтальное и вертикальное масштабирование и т.д.
Также тема архитектуры веб-приложений популярна на собеседовании. Обычно блок вопросов по архитектуре выносят в отдельное интервью по System Design. Также рекомендую ознакомиться с обзором на книгу, которая будет полезна при проектировании высоконагруженных систем.
Смотреть на Rutube