From cabf26fc395809e21183e3463eedffd653b0ba39 Mon Sep 17 00:00:00 2001 From: avarlamova <59831804+avarlamova@users.noreply.github.com> Date: Thu, 27 Apr 2023 14:21:31 +0300 Subject: [PATCH 1/8] Update importing-and-exporting-components.md --- .../importing-and-exporting-components.md | 153 +++++++++--------- 1 file changed, 76 insertions(+), 77 deletions(-) diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index f8f55605c..0715ede6f 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -1,26 +1,26 @@ --- -title: Importing and Exporting Components +title: Импорт и экспорт компонентов --- -The magic of components lies in their reusability: you can create components that are composed of other components. But as you nest more and more components, it often makes sense to start splitting them into different files. This lets you keep your files easy to scan and reuse components in more places. +«Магия» компонентов заключается в возможности их повторного использования. Вы можете создавать компоненты, которые состоят из других компонентов. Но по мере увеличения вложенности компонентов зачастую бывает разумным разделить их на отдельные файлы. Это повышает читаемость кода и позволяет повторно использовать компоненты в большем количестве мест. -* What a root component file is -* How to import and export a component -* When to use default and named imports and exports -* How to import and export multiple components from one file -* How to split components into multiple files +* Что такое корневой компонент +* Как импортировать и экспортировать компонент +* Когда использовать дефолтные и именованные импорты и экспорты +* Как импортировать и экспортировать несколько компонентов из одного файла +* Как разделять компоненты на отдельные файлы -## The root component file {/*the-root-component-file*/} +## Корневой компоненты {/*the-root-component-file*/} -In [Your First Component](/learn/your-first-component), you made a `Profile` component and a `Gallery` component that renders it: +В разделе [Ваш первый компонент](/learn/your-first-component) вы создали компонент `Profile` и компонент `Gallery`, который рендерит его: @@ -29,7 +29,7 @@ function Profile() { return ( Katherine Johnson ); } @@ -37,7 +37,7 @@ function Profile() { export default function Gallery() { return (
-

Amazing scientists

+

Восхитительные ученые

@@ -52,17 +52,17 @@ img { margin: 0 10px 10px 0; height: 90px; } -These currently live in a **root component file,** named `App.js` in this example. In [Create React App](https://create-react-app.dev/), your app lives in `src/App.js`. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page. +Эти компоненты сейчас находятся внутри **файла корневого компонента,** который в примере называется `App.js`. При использовании [Create React App](https://create-react-app.dev/) приложение находится в `src/App.js`. Однако, в зависимости от конфигурации файлов в проекте, корневой компонент может находиться в другом файле. При использовании фреймворка с маршрутизацией на основе файлов, например Next.js, корневой компонент будет разным для каждой страницы. -## Exporting and importing a component {/*exporting-and-importing-a-component*/} +## Экспорт и импорт компонентов {/*exporting-and-importing-a-component*/} -What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move `Gallery` and `Profile` out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps: +Что, если в будущем вы захотите изменить страницу и отобразить на ней список научных книг? Или расположить профили ученых в другом месте? Кажется разумным извлечь компоненты `Gallery` и `Profile` из файла корневого компонента. Это сделает их более модульными и позволит повторно использовать их в других файлах. Переместить компонент можно в три шага: -1. **Make** a new JS file to put the components in. -2. **Export** your function component from that file (using either [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports). -3. **Import** it in the file where you’ll use the component (using the corresponding technique for importing [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports). +1. **Создайте** новый файл JS, куда вы поместите компонент. +2. **Экспортируйте** функциональный компонент из этого файла (используя или [экспорт по умолчанию](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) или [именованный](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) экспорт). +3. **Импортируйте** компонент в файл, где вы будете его использовать (используя соответствующую технику для импорта значения [по умолчанию](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) или [именованного](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) экспорта). -Here both `Profile` and `Gallery` have been moved out of `App.js` into a new file called `Gallery.js`. Now you can change `App.js` to import `Gallery` from `Gallery.js`: +В следующем примере `Profile` и `Gallery` были извлечены из `App.js` в новый файл `Gallery.js`. Теперь вы можете изменить `App.js`, добавив в него импорт компонента `Gallery` из файла `Gallery.js`: @@ -81,7 +81,7 @@ function Profile() { return ( Alan L. Hart ); } @@ -89,7 +89,7 @@ function Profile() { export default function Gallery() { return (
-

Amazing scientists

+

Восхитительные ученые

@@ -104,60 +104,62 @@ img { margin: 0 10px 10px 0; height: 90px; } -Notice how this example is broken down into two component files now: +Обратите внимание, что код из примера теперь использует два файла компонентов: 1. `Gallery.js`: - - Defines the `Profile` component which is only used within the same file and is not exported. - - Exports the `Gallery` component as a **default export.** + - Содержит компонент `Profile`, который используется только в этом файле и не экспортируется. + - Экспортирует компонент `Gallery` **по умолчанию.** 2. `App.js`: - - Imports `Gallery` as a **default import** from `Gallery.js`. - - Exports the root `App` component as a **default export.** + - Импортирует компонент `Gallery` из `Gallery.js` **по умолчанию.** + - Экспортирует корневой компонент `App` **по умолчанию.** -You may encounter files that leave off the `.js` file extension like so: +В некоторых случаях вы можете заметить, что при импорте в именах файлов опускается расширение `.js`, например: ```js import Gallery from './Gallery'; ``` -Either `'./Gallery.js'` or `'./Gallery'` will work with React, though the former is closer to how [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) work. +Оба варианта (`'./Gallery.js'` и `'./Gallery'`) будут работать в React, хотя первый вариант ближе к тому, как работают [нативные ES-модули](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules). -#### Default vs named exports {/*default-vs-named-exports*/} +#### Экспорт по умолчанию и именованный экспорт {/*default-vs-named-exports*/} -There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. **A file can have no more than one _default_ export, but it can have as many _named_ exports as you like.** +Существует два основных способа экспорта значений в JavaScript: экспорт по умолчанию и именованный экспорт. До сих пор в примерах использовался только экспорт по умолчанию. Но вы можете использовать один из этих способов или оба в одном файле. **В файле не может быть больше одного экспорта _по умолчанию_, но сколько угодно _именованных_ экспортов.** -![Default and named exports](/images/docs/illustrations/i_import-export.svg) +![Именованные экспорты и экспорты по умолчанию](/images/docs/illustrations/i_import-export.svg) -How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track: +Способ, которым компонент был экспортирован, определяет способ, которым его нужно импортировать. Вы получите ошибку, если попытаетесь импортировать экспортированный по умолчанию компонент так же, как компонент с именованным экспортом! Эта таблица поможет вам разобраться: -| Syntax | Export statement | Import statement | +| Синтаксис экспорта | Как экспортировать | Как импортировать | | ----------- | ----------- | ----------- | -| Default | `export default function Button() {}` | `import Button from './Button.js';` | -| Named | `export function Button() {}` | `import { Button } from './Button.js';` | +| По умолчанию | `export default function Button() {}` | `import Button from './Button.js';` | +| Именованный | `export function Button() {}` | `import { Button } from './Button.js';` | -When you write a _default_ import, you can put any name you want after `import`. For example, you could write `import Banana from './Button.js'` instead and it would still provide you with the same default export. In contrast, with named imports, the name has to match on both sides. That's why they are called _named_ imports! +При использовании импорта _по умолчанию_ можно использовать любое имя после слова `import`. Например, можно написать `import Banana from './Button.js'`, и эта запись все еще будет корректно импортировать значение по умолчанию. При использовании именованных импортов, напротив, значения должны совпадать в обоих файлах. Именно поэтому такие импорты называются _именованными_. + + +**Разработчики часто используют экспорт по умолчанию, если файл экспортирует только один компонент, и именованный экспорт, если он экспортирует несколько компонентов и значений.** Независимо от того, какой стиль написания кода вы предпочитаете, всегда давайте осмысленные имена вашим функциональным компонентам и файлам, которые их содержат. Не рекомендуется использовать компоненты без имен, такие как `export default () => {}`, поскольку это затрудняет отладку. -**People often use default exports if the file exports only one component, and use named exports if it exports multiple components and values.** Regardless of which coding style you prefer, always give meaningful names to your component functions and the files that contain them. Components without names, like `export default () => {}`, are discouraged because they make debugging harder. -## Exporting and importing multiple components from the same file {/*exporting-and-importing-multiple-components-from-the-same-file*/} +## Экспорт и импорт нескольких компонентов из одного файла {/*exporting-and-importing-multiple-components-from-the-same-file*/} -What if you want to show just one `Profile` instead of a gallery? You can export the `Profile` component, too. But `Gallery.js` already has a *default* export, and you can't have _two_ default exports. You could create a new file with a default export, or you could add a *named* export for `Profile`. **A file can only have one default export, but it can have numerous named exports!** +Что, если вы хотите показывать только один компонент `Profile` вместо всей галереи? Компонент `Profile` тоже можно экспортировать. Но в файле `Gallery.js` уже есть экспорт *по умолчанию*, а в одном файле не может быть _двух_ экспортов по умолчанию. Вы можете создать новый файл с экспортом по умолчанию или добавить *именованный* экспорт для компонента `Profile`. **В файле может быть только один экспорт по умолчанию, но несколько именованных экспортов!** -To reduce the potential confusion between default and named exports, some teams choose to only stick to one style (default or named), or avoid mixing them in a single file. Do what works best for you! +Чтобы избежать потенциальной путаницы между дефолтными и именованными экспортами, некоторые команды предпочитают придерживаться только одного стиля (экспорт по умолчанию или именованный) или не смешивать их в одном файле. Делайте то, что подходит именно вам! -First, **export** `Profile` from `Gallery.js` using a named export (no `default` keyword): +Сначала **экспортируйте** `Profile` из `Gallery.js`, используя именованный экспорт (без использования ключевого слова `default`): ```js export function Profile() { @@ -165,13 +167,13 @@ export function Profile() { } ``` -Then, **import** `Profile` from `Gallery.js` to `App.js` using a named import (with the curly braces): +Затем **импортируйте** `Profile` из `Gallery.js` в `App.js`, используя именованный импорт (с фигурными скобками): ```js import { Profile } from './Gallery.js'; ``` -Finally, **render** `` from the `App` component: +Теперь вы можете **отрендерить** `` из компонента `App`: ```js export default function App() { @@ -179,8 +181,7 @@ export default function App() { } ``` -Now `Gallery.js` contains two exports: a default `Gallery` export, and a named `Profile` export. `App.js` imports both of them. Try editing `` to `` and back in this example: - +Теперь `Gallery.js` содержит два экспорта: экспорт по умолчанию `Gallery` и именованный экспорт `Profile`. `App.js` импортирует их оба. Попробуйте изменить `` на `` и обратно в этом примере: ```js App.js @@ -199,7 +200,7 @@ export function Profile() { return ( Alan L. Hart ); } @@ -207,7 +208,7 @@ export function Profile() { export default function Gallery() { return (
-

Amazing scientists

+

Восхитительные ученые

@@ -222,24 +223,24 @@ img { margin: 0 10px 10px 0; height: 90px; } -Now you're using a mix of default and named exports: +Теперь вы используете как именованные экспорты, так и экспорты по умолчанию: * `Gallery.js`: - - Exports the `Profile` component as a **named export called `Profile`.** - - Exports the `Gallery` component as a **default export.** + - Экспортирует компонент `Profile` как **именованный экспорт `Profile`.** + - Экспортирует компонент `Gallery` **по умолчанию.** * `App.js`: - - Imports `Profile` as a **named import called `Profile`** from `Gallery.js`. - - Imports `Gallery` as a **default import** from `Gallery.js`. - - Exports the root `App` component as a **default export.** + - Импортирует компонент `Profile` как **именованный импорт `Profile`** из файла `Gallery.js`. + - Импортирует компонент `Gallery` как **экспорт по умолчанию** из файла `Gallery.js`. + - Экспортирует корневой компонент `App` **по умолчанию.** -On this page you learned: +В этом разделе вы узнали: -* What a root component file is -* How to import and export a component -* When and how to use default and named imports and exports -* How to export multiple components from the same file +* Что такое корневой компонент +* Как импортировать и экспортировать компонент +* Когда использовать дефолтные и именованные импорты и экспорты +* Как экспортировать несколько компонентов из одного файла @@ -247,23 +248,22 @@ On this page you learned: -#### Split the components further {/*split-the-components-further*/} +#### Дальнейшее разделение компонентов {/*split-the-components-further*/} -Currently, `Gallery.js` exports both `Profile` and `Gallery`, which is a bit confusing. +Сейчас файл `Gallery.js` экспортирует два компонента (`Profile` и `Gallery`), что может немного сбивать с толку. -Move the `Profile` component to its own `Profile.js`, and then change the `App` component to render both `` and `` one after another. +Переместите компонент `Profile` в отдельный файл `Profile.js`, и затем изменить компонент `App` так, чтобы в нем друг за другом рендерились компоненты `` и ``. -You may use either a default or a named export for `Profile`, but make sure that you use the corresponding import syntax in both `App.js` and `Gallery.js`! You can refer to the table from the deep dive above: +Вы можете использовать либо экспорт по умолчанию, либо именованный экспорт для `Profile`, но убедитесь, что вы используете соответствующий синтаксис импорта как в `App.js`, так и в `Gallery.js`! Вы можете свериться с этой таблицей: -| Syntax | Export statement | Import statement | +| Синтаксис экспорта | Как экспортировать | Как импортировать | | ----------- | ----------- | ----------- | -| Default | `export default function Button() {}` | `import Button from './Button.js';` | -| Named | `export function Button() {}` | `import { Button } from './Button.js';` | +| По умолчанию | `export default function Button() {}` | `import Button from './Button.js';` | +| Именованный | `export function Button() {}` | `import { Button } from './Button.js';` | -Don't forget to import your components where they are called. Doesn't `Gallery` use `Profile`, too? - +Не забывайте импортировать компоненты там, где они используются. `Gallery` тоже использует `Profile`, не так ли? @@ -282,12 +282,12 @@ export default function App() { ``` ```js Gallery.js active -// Move me to Profile.js! +// Перемести меня в Profile.js! export function Profile() { return ( Alan L. Hart ); } @@ -295,7 +295,7 @@ export function Profile() { export default function Gallery() { return (
-

Amazing scientists

+

Восхитительные ученые

@@ -313,12 +313,11 @@ img { margin: 0 10px 10px 0; height: 90px; } -After you get it working with one kind of exports, make it work with the other kind. +После того, как вы выполните это задание с использованием одного из типов экспорта, выполните его с использованием другого типа. -This is the solution with named exports: - +Вот решение, использующее именованные экспорты: ```js App.js @@ -341,7 +340,7 @@ import { Profile } from './Profile.js'; export default function Gallery() { return (
-

Amazing scientists

+

Восхитительные ученые

@@ -355,7 +354,7 @@ export function Profile() { return ( Alan L. Hart ); } @@ -367,7 +366,7 @@ img { margin: 0 10px 10px 0; height: 90px; } -This is the solution with default exports: +Вот решение, использующее экспорты по умолчанию: @@ -391,7 +390,7 @@ import Profile from './Profile.js'; export default function Gallery() { return (
-

Amazing scientists

+

Восхитительные ученые

@@ -405,7 +404,7 @@ export default function Profile() { return ( Alan L. Hart ); } From f812e06e0ca2ef8096bb8091d0661788ced71d62 Mon Sep 17 00:00:00 2001 From: avarlamova <59831804+avarlamova@users.noreply.github.com> Date: Thu, 27 Apr 2023 16:09:57 +0300 Subject: [PATCH 2/8] Update src/content/learn/importing-and-exporting-components.md Co-authored-by: Fedya Petrakov --- src/content/learn/importing-and-exporting-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index 0715ede6f..1efd134b0 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -58,7 +58,7 @@ img { margin: 0 10px 10px 0; height: 90px; } Что, если в будущем вы захотите изменить страницу и отобразить на ней список научных книг? Или расположить профили ученых в другом месте? Кажется разумным извлечь компоненты `Gallery` и `Profile` из файла корневого компонента. Это сделает их более модульными и позволит повторно использовать их в других файлах. Переместить компонент можно в три шага: -1. **Создайте** новый файл JS, куда вы поместите компонент. +1. **Создайте** новый JS файл для компонентов. 2. **Экспортируйте** функциональный компонент из этого файла (используя или [экспорт по умолчанию](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) или [именованный](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) экспорт). 3. **Импортируйте** компонент в файл, где вы будете его использовать (используя соответствующую технику для импорта значения [по умолчанию](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) или [именованного](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) экспорта). From e03d65b09c0261dbf62c64530eaaaab85024b3f4 Mon Sep 17 00:00:00 2001 From: avarlamova <59831804+avarlamova@users.noreply.github.com> Date: Thu, 27 Apr 2023 16:11:41 +0300 Subject: [PATCH 3/8] Update src/content/learn/importing-and-exporting-components.md Co-authored-by: Fedya Petrakov --- src/content/learn/importing-and-exporting-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index 1efd134b0..4382baf64 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -18,7 +18,7 @@ title: Импорт и экспорт компонентов -## Корневой компоненты {/*the-root-component-file*/} +## Файл корневого компонента {/*the-root-component-file*/} В разделе [Ваш первый компонент](/learn/your-first-component) вы создали компонент `Profile` и компонент `Gallery`, который рендерит его: From d3e5baa276149e34f67ce1699e7f1c0349d1689e Mon Sep 17 00:00:00 2001 From: avarlamova <59831804+avarlamova@users.noreply.github.com> Date: Thu, 27 Apr 2023 16:24:19 +0300 Subject: [PATCH 4/8] Update src/content/learn/importing-and-exporting-components.md Co-authored-by: Fedya Petrakov --- src/content/learn/importing-and-exporting-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index 4382baf64..0e5c80b4c 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -52,7 +52,7 @@ img { margin: 0 10px 10px 0; height: 90px; } -Эти компоненты сейчас находятся внутри **файла корневого компонента,** который в примере называется `App.js`. При использовании [Create React App](https://create-react-app.dev/) приложение находится в `src/App.js`. Однако, в зависимости от конфигурации файлов в проекте, корневой компонент может находиться в другом файле. При использовании фреймворка с маршрутизацией на основе файлов, например Next.js, корневой компонент будет разным для каждой страницы. +Эти компоненты сейчас находятся внутри **файла корневого компонента,** который в примере называется `App.js`. При использовании [Create React App](https://create-react-app.dev/) приложение находится в `src/App.js`. Однако, в зависимости от конфигурации проекта, корневой компонент может находиться в другом файле. У фреймворка с маршрутизацией на основе файлов, например Next.js, корневой компонент будет разным для каждой страницы. ## Экспорт и импорт компонентов {/*exporting-and-importing-a-component*/} From cf746918506e3bfa883ebc3ef8ccd67f652dc620 Mon Sep 17 00:00:00 2001 From: avarlamova <59831804+avarlamova@users.noreply.github.com> Date: Thu, 27 Apr 2023 16:24:47 +0300 Subject: [PATCH 5/8] Update src/content/learn/importing-and-exporting-components.md Co-authored-by: Fedya Petrakov --- src/content/learn/importing-and-exporting-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index 0e5c80b4c..521e3632a 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -56,7 +56,7 @@ img { margin: 0 10px 10px 0; height: 90px; } ## Экспорт и импорт компонентов {/*exporting-and-importing-a-component*/} -Что, если в будущем вы захотите изменить страницу и отобразить на ней список научных книг? Или расположить профили ученых в другом месте? Кажется разумным извлечь компоненты `Gallery` и `Profile` из файла корневого компонента. Это сделает их более модульными и позволит повторно использовать их в других файлах. Переместить компонент можно в три шага: +Что, если вы захотите изменить страницу и отобразить на ней список научных книг? Или переместить все профили ученых? Кажется разумным извлечь компоненты `Gallery` и `Profile` из файла корневого компонента. Это сделает их более модульными и переиспользуемыми. Переместить компонент можно за три шага: 1. **Создайте** новый JS файл для компонентов. 2. **Экспортируйте** функциональный компонент из этого файла (используя или [экспорт по умолчанию](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) или [именованный](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) экспорт). From 883b1351494cdbbf65f0b2aa892c3345de953dd5 Mon Sep 17 00:00:00 2001 From: avarlamova <59831804+avarlamova@users.noreply.github.com> Date: Wed, 3 May 2023 22:53:21 +0300 Subject: [PATCH 6/8] Update importing-and-exporting-components.md --- src/content/learn/importing-and-exporting-components.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index 521e3632a..a4a721d91 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -4,7 +4,7 @@ title: Импорт и экспорт компонентов -«Магия» компонентов заключается в возможности их повторного использования. Вы можете создавать компоненты, которые состоят из других компонентов. Но по мере увеличения вложенности компонентов зачастую бывает разумным разделить их на отдельные файлы. Это повышает читаемость кода и позволяет повторно использовать компоненты в большем количестве мест. +«Магия» компонентов заключается в возможности их повторного использования: можно создавать компоненты, которые состоят из других компонентов. Но по мере увеличения их вложенности зачастую бывает разумным начать раскладывать их по разным файлам. Так навигация по ним останется простой, а компоненты станет легче использовать повторно. @@ -14,7 +14,7 @@ title: Импорт и экспорт компонентов * Как импортировать и экспортировать компонент * Когда использовать дефолтные и именованные импорты и экспорты * Как импортировать и экспортировать несколько компонентов из одного файла -* Как разделять компоненты на отдельные файлы +* Как разделять код компонентов на отдельные файлы From b41376860f0cf7857f8e4cd5fddd42494738cc1e Mon Sep 17 00:00:00 2001 From: avarlamova <59831804+avarlamova@users.noreply.github.com> Date: Mon, 22 May 2023 12:15:03 +0300 Subject: [PATCH 7/8] Update src/content/learn/importing-and-exporting-components.md Co-authored-by: Anton Ahatov --- src/content/learn/importing-and-exporting-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index a4a721d91..156147591 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -122,7 +122,7 @@ img { margin: 0 10px 10px 0; height: 90px; } import Gallery from './Gallery'; ``` -Оба варианта (`'./Gallery.js'` и `'./Gallery'`) будут работать в React, хотя первый вариант ближе к тому, как работают [нативные ES-модули](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules). +Оба варианта (`'./Gallery.js'` и `'./Gallery'`) будут работать в React, хотя первый вариант ближе к тому, как работают [нативные ES-модули](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules). From b57ded1a6b19b79f732783f01d6f7b08f239e376 Mon Sep 17 00:00:00 2001 From: avarlamova <59831804+avarlamova@users.noreply.github.com> Date: Mon, 22 May 2023 12:16:35 +0300 Subject: [PATCH 8/8] fix after review --- src/content/learn/importing-and-exporting-components.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index a4a721d91..4751e07e8 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -143,7 +143,6 @@ import Gallery from './Gallery'; При использовании импорта _по умолчанию_ можно использовать любое имя после слова `import`. Например, можно написать `import Banana from './Button.js'`, и эта запись все еще будет корректно импортировать значение по умолчанию. При использовании именованных импортов, напротив, значения должны совпадать в обоих файлах. Именно поэтому такие импорты называются _именованными_. - **Разработчики часто используют экспорт по умолчанию, если файл экспортирует только один компонент, и именованный экспорт, если он экспортирует несколько компонентов и значений.** Независимо от того, какой стиль написания кода вы предпочитаете, всегда давайте осмысленные имена вашим функциональным компонентам и файлам, которые их содержат. Не рекомендуется использовать компоненты без имен, такие как `export default () => {}`, поскольку это затрудняет отладку.