> For the complete documentation index, see [llms.txt](https://lesha.gitbook.io/react-js-for-dummies/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lesha.gitbook.io/react-js-for-dummies/introduction/import-export.md).

# Импорт и экспорт

Когда твое приложение перевалило за сотню строк кода, а количество компонентов стало больше двух, настает час задуматься о том, как бы не запутаться во всем этом.

## Именованный импорт

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

![Компонент Button из файла a.jsx требуется в файле b.jsx](https://4229799421-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6LUR3gRBmB8EBPIwRJ%2F-M6MRRsVY528FXbxfBNT%2F-M6MpN_VFOtJ-G-AgK4K%2Fimport.png?alt=media\&token=36edf9fe-dc2b-44de-be77-e0c3e3a6877b)

Если мы хотим использовать этот компонент в каком-то другом файле, его надо **экспортировать**, приписав в начале определения ключевое слово `export`:

```jsx
export function Button() {
  return <button></button>;
}
```

А в месте, где нужно использовать этот компонент, мы его **импортируем**:

```jsx
import { Button } from './a';
```

Та же самая механика экспорта/импорта относится и к переменным, и к функциям, (строго говоря, функция — это вид переменной) которые не являются реакт-компонентами. Это не единственный способ, но его вполне достаточно.

## **Дополнительная информация**

Кроме именованного импорта есть еще два вида импортов: Default и Namespace. Их необязательно использовать (мало того, у  default-импорта есть противники!).

### Default-импорт

В дальнейшем ты много раз будешь встречать такую строчку:

```jsx
import React from 'react';
```

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

### Namespace-импорт

В переводе с английского namespace — "пространство имен". Что это означает?&#x20;

Допустим, у тебя есть два компонента, каждый из них экспортирует&#x20;

* компонент с именем "Button"
* переменную с именем info:

```jsx
export function Button () {/.../}
export const info = "Информация";
```

Ты хочешь использовать их в третьем компоненте

```jsx
import {Button, info} from './a'
import {Button, info} from './b'
```

Но — о нет! — у тебя образовалась коллизия имен, то есть две разных переменных с одним и тем же именем. Чтобы избежать такой ситуации, ты создаешь пространство имен для каждого импорта:

```jsx
import * as A from './a'
import * as B from './b'

A.Button // кнопка из А
B.info // переменная из B
```

Такой способ подходит для тех случаев, когда импортируется много переменных, если же нужно разрешить всего один конфликт, можно использовать именованный импорт таким образом:

```jsx
import {Button as ButtonA} from './a'
import {Button as ButtonB} from './b'
```