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

В этой статье мы рассмотрим различные методы импорта и экспорта React компонентов, как их использовать и лучшие практики.

Что такое импорт и экспорт в React?

В React импорт и экспорт компонентов — это процесс обмена и использования компонентов в разных файлах вашего приложения. Синтаксис import и export из JavaScript позволяет импортировать функции, объекты и компоненты из одного файла в другой. Это способствует созданию модульного и поддерживаемого кода.

• Экспорт компонента означает сделать его доступным для использования в других файлах.
• Импорт компонента означает подключить его в другой файл для дальнейшего использования.

React использует систему модулей ES6 JavaScript для работы с импортом и экспортом. Вы можете создавать несколько компонентов в отдельных файлах и импортировать их по необходимости. Это делает ваш код более модульным и удобным для поддержки.

Типы экспорта в React

В React существуют два типа экспорта:

1. Экспорт и импорт по умолчанию (default)
2. Именованные экспорт и импорт (named)

1. Экспорт и импорт по умолчанию

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

App.js

import React from "react";
import MyComponent from "./components/MyComponent";

const App = () => {
    return (
        

             {/* Использование импортированного компонента */}
        
    );
};

export default App;

MyComponent.js

import React from "react";

const MyComponent = () => {
    return 
Hello from MyComponent!
;
};

export default MyComponent;

Результат

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

• Экспорт по умолчанию: из файла экспортируется одна сущность (компонент).
• Импорт по умолчанию: импортируется экспорт по умолчанию из другого файла, при этом ему можно присвоить любое имя.

2. Именованный экспорт и импорт

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

App.js

import { MyComponent, AnotherComponent } from "./components/component.js";

const App = () => {
    return (
        

            
            
        
    );
};

export default App;

component.js

export const MyComponent = () => {
    return 
Hello from MyComponent!
;
};

export const AnotherComponent = () => {
    return 
Hello from AnotherComponent!
;
};

Результат

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

• Два компонента MyComponent и AnotherComponent экспортируются по отдельности с использованием ключевого слова export.
• Эти компоненты становятся доступны для импорта в других файлах.
• При импорте мы указываем точные имена компонентов внутри фигурных скобок.
• Такой импорт называется именованным, так как мы обращаемся к конкретным именам экспортируемых сущностей.
• В компоненте App мы используем оба импортированных компонента для отображения.

3. Комбинирование экспорта по умолчанию и именованного экспорта

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

App.js

import { MyComponent, AnotherComponent } from "./components/component.js";

const App = () => {
    return (
        

            
            
        
    );
};

export default App;

component.js

// Именованный экспорт
export const MyComponent = () => {
    return 
Hello from MyComponent!
;
};

// Другой именованный экспорт
export const AnotherComponent = () => {
    return 
Hello from AnotherComponent!
;
};

// Экспорт по умолчанию
const DefaultComponent = () => {
    return 
Hello from DefaultComponent!
;
};

export default DefaultComponent;

Результат

4. Экспортирование нескольких компонентов из одного файла

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

App.js

import React from "react";
import { Header, Footer } from "./components";
import MainContent from "./components";

const App = () => {
    return (
        

            

            
            
    );
};

export default App;

components.js

import React from "react";

// Компонент 1
export const Header = () => {
    return 
Welcome to My Website
;
};

// Компонент 2
export const Footer = () => {
    return ;
};

// Компонент 3 (экспорт по умолчанию)
export default function MainContent() {
    return 
This is the main content of the website.
;
}

Результат

Когда использовать экспорт по умолчанию

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

Когда использовать именованный экспорт

• Применяйте при экспорте нескольких функциональностей или компонентов из одного файла.
• Когда требуется консистентность при импорте (одинаковое имя).
• Полезно для утилит, констант или нескольких связанных компонентов.

Лучшие практики импорта и экспорта компонентов

• Используйте экспорт по умолчанию для основных компонентов: если в файле содержится главный компонент, целесообразно использовать default export. Это упрощает импорт без уточнения имени компонента.
• Используйте именованные экспорты для вспомогательных и утилитарных компонентов: при наличии множества компонентов или функций в файле — именованные экспорты позволяют импортировать только необходимые.
• Соблюдайте единый стиль: придерживайтесь одного подхода к экспорту и импорту на протяжении всего проекта. Например, всегда используйте экспорт по умолчанию для основных компонентов, и именованный для остальных.

Заключение

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

🔑 Ключевые моменты:

• В React существуют два основных способа экспорта компонентов: экспорт по умолчанию и именованный экспорт.
• Экспорт по умолчанию позволяет экспортировать один основной компонент и импортировать его под любым именем.
• Именованные экспорты удобны для нескольких компонентов или функций — требуют точного имени при импорте.
• Рекомендуется использовать экспорт по умолчанию для главных компонентов и именованные — для утилит и вспомогательных компонентов.
• Соблюдение единых правил импорта и экспорта улучшает читаемость и поддержку кода.