Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
  • Loading branch information
@bkatsevych
bkatsevych authored May 19, 2023
1 parent 77bcfd3 commit cdf4bb0
Showing 1 changed file with 18 additions and 18 deletions.
36 changes: 18 additions & 18 deletions src/content/learn/your-first-component.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ title: Ваш перший компонент

Ця розмітка представляє статтю `<article>`, її заголовок `<h1>`, та (скорочений) зміст у вигляді впорядкованого списку `<ol>`. Розмітка подібна до цієї, в поєднанні з CSS для стилізації та JavaScript для інтерактивності, лежить в основі кожної бічної панелі, аватара, модального вікна, випадного меню — кожного елемента UI, який ви бачите в Вебі.

React дозволяє вам поєднувати вашу розмітку, CSS та JavaScript у власні "компоненти", **повторно використовувані елементи UI для вашого додатку.** Зміст коду, який ви бачили вище, можна перетворити на компонент `<TableOfContents />`, який ви можете відобразити на кожній сторінці. Під капотом він все ще використовує ті ж самі HTML-теги, такі як `<article>`, `<h1>`, тощо.
React дозволяє вам поєднувати вашу розмітку, CSS та JavaScript у власні "компоненти", **повторно використовувані елементи UI для вашого додатку.** Код змісту, який ви бачили вище, можна перетворити на компонент `<TableOfContents />`, який ви можете відобразити на кожній сторінці. Під капотом він все ще використовує ті ж самі HTML-теги, такі як `<article>`, `<h1>`, тощо.

Так само, як і з HTML-тегами, ви можете компонувати, впорядковувати та вкладати компоненти для створення цілих сторінок. Наприклад, сторінка документації, яку ви читаєте, складається з компонентів React:

Expand All @@ -51,11 +51,11 @@ React дозволяє вам поєднувати вашу розмітку, CS
</PageLayout>
```

Зі зростанням вашого проекту ви помітите, що багато з ваших дизайнів можна створити шляхом повторного використання компонентів, які ви вже написали, що пришвидшує вашу розробку. Наш зміст вище може бути доданий до будь-якого екрану за допомогою `<TableOfContents />`! Ви навіть можете розпочати свій проект з тисячами компонентів, які поділяє спільнота відкритого коду React, таких як [Chakra UI](https://chakra-ui.com/) та [Material UI.](https://material-ui.com/)
Зі зростанням вашого проекту ви помітите, що багато з ваших дизайнів можна створити шляхом повторного використання компонентів, які ви вже написали, що пришвидшує вашу розробку. Наш зміст вище може бути доданий до будь-якого екрану за допомогою `<TableOfContents />`! Ви навіть можете розпочати свій проект з тисячами компонентів, які поділяє спільнота відкритого коду React, як-от [Chakra UI](https://chakra-ui.com/) та [Material UI.](https://material-ui.com/)

## Визначення компонента {/*defining-a-component*/}

Традиційно, створюючи веб-сторінки, веб-розробники розмічали свій контент і додавали взаємодію, розсипаючи трохи JavaScript. Це чудово працювало, коли взаємодія була приємним доповненням до вебу. Тепер це очікується на багатьох сайтах і в усіх додатках. React ставить взаємодію на перше місце, використовуючи при цьому ту ж технологію: **компонент React - це функція JavaScript, яку можна _посипати розміткою_.** Ось як це виглядає (ви можете відредагувати приклад нижче):
Традиційно, створюючи веб-сторінки, веб-розробники спершу писали розмітку їхнього контенту, а потім додавали інтерактив, трохи посипаючи JavaScript'ом. Це чудово працювало, коли інтерактив була приємним доповненням до вебу. Тепер це очікується на багатьох сайтах і в усіх додатках. React ставить взаємодію на перше місце, використовуючи при цьому ту ж технологію: **компонент React - це функція JavaScript, яку можна _посипати розміткою_.** Ось як це виглядає (ви можете відредагувати приклад нижче):

<Sandpack>

Expand All @@ -80,7 +80,7 @@ img { height: 200px; }

### Крок 1: Експортування компонента {/*step-1-export-the-component*/}

Префікс `export default` це [стандартний синтаксис JavaScript](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (не специфічний для React). Він дозволяє вам позначити головну функцію у файлі, щоб ви могли потім імпортувати її з інших файлів. (Детальніше про імпорт у розділі [Імпортування та експортування компонентів](/learn/importing-and-exporting-components)!)
Префікс `export default` це [стандартний синтаксис JavaScript](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (не специфічний для React). Він дозволяє вам позначити головну функцію у файлі, щоб ви могли потім імпортувати її з інших файлів. (Детальніше про імпортування у розділі [Імпортування та експортування компонентів](/learn/importing-and-exporting-components)!)

### Крок 2: Визначення функції {/*step-2-define-the-function*/}

Expand All @@ -95,13 +95,13 @@ React компоненти є звичайними JavaScript функціями

Компонент повертає тег `<img />` з атрибутами `src` та `alt`. `<img />` записаний як HTML, але насправді це JavaScript під капотом! Цей синтаксис називається [JSX](/learn/writing-markup-with-jsx), і він дозволяє вам вбудовувати розмітку всередину JavaScript.

Оператори повернення можуть бути записані на одному рядку, як у цьому компоненті:
Оператори повернення можуть бути записані в одному рядку, як у цьому компоненті:

```js
return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кетерін Джонсон (Katherine Johnson)" />;
```

Але якщо ваша розмітка не розташована на тому ж рядку, що й ключове слово `return` ви повинні обернути її в пару дужок:
Але якщо ваша розмітка не розташована в тому ж рядку, що й ключове слово `return` ви повинні обгорнути її в пару дужок:

```js
return (
Expand All @@ -113,13 +113,13 @@ return (

<Pitfall>

Без дужок будь-який код на рядках після `return` [буде проігноровано](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
Без дужок, будь-який код в рядках після `return` [буде проігноровано](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!

</Pitfall>

## Застосування компонента {/*using-a-component*/}

Тепер, коли ви визначили свій компонент `Profile`, ви можете вкладати його всередину інших компонентів. Наприклад, ви можете експортувати компонент `Gallery`, який використовує кілька компонентів `Profile`:
Тепер, коли ви створили свій компонент `Profile`, ви можете вкладати його всередину інших компонентів. Наприклад, ви можете експортувати компонент `Gallery`, який використовує кілька компонентів `Profile`:

<Sandpack>

Expand Down Expand Up @@ -171,25 +171,25 @@ img { margin: 0 10px 10px 0; height: 90px; }

### Вкладення та організація компонентів {/*nesting-and-organizing-components*/}

Компоненти є звичайними функціями JavaScript, тому ви можете зберігати кілька компонентів у одному файлі. Це зручно, коли компоненти є досить малими або тісно пов'язаними між собою. Якщо цей файл стає переповненим, ви завжди можете перемістити компонент `Profile` до окремого файлу. Незабаром ви навчитеся це робити на [сторінці про імпорт.](/learn/importing-and-exporting-components)
Компоненти є звичайними JavaScript функціями, тому ви можете зберігати кілька компонентів у одному файлі. Це зручно, коли компоненти є досить малими або тісно пов'язаними між собою. Якщо цей файл стає переповненим, ви завжди можете перемістити компонент `Profile` до окремого файлу. Незабаром ви навчитеся це робити на [сторінці про імпорт.](/learn/importing-and-exporting-components)

Тому що компоненти `Profile` рендеряться всередині `Gallery`—навіть кілька разів!—ми можемо сказати, що `Gallery` є **батьківським компонентом,** який рендерить кожний `Profile` як "дочірній". Це частина магії React: ви можете визначити компонент один раз і потім використовувати його в будь-яких місцях та скільки завгодно разів.

<Pitfall>

Компоненти можуть рендерити інші компоненти, але **ви не повинні вкладати їх визначення одне в одне:**
Компоненти можуть рендерити інші компоненти, але **ви не повинні вкладати їх створення одне в інше:**

```js {2-5}
export default function Gallery() {
// 🔴 Ніколи не визначайте компонент всередині іншого компонента!
// 🔴 Ніколи не створюйте компонент всередині іншого компонента!
function Profile() {
// ...
}
// ...
}
```

Код вище [дуже повільний і може призводити до помилок.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Натомість, визначайте кожен компонент на верхньому рівні:
Код вище [дуже повільний і може призводити до помилок.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Натомість, створюйте кожен компонент на верхньому рівні:

```js {5-8}
export default function Gallery() {
Expand All @@ -202,19 +202,19 @@ function Profile() {
}
```

Якщо дочірній компонент потребує деяких даних від батьківського компонента, [передавайте їх за допомогою пропсів](/learn/passing-props-to-a-component) замість вкладення визначень.
Якщо дочірній компонент потребує деяких даних від батьківського компонента, [передавайте їх за допомогою пропсів](/learn/passing-props-to-a-component) замість вкладення створень.

</Pitfall>

<DeepDive>

#### Компоненти на всій глибині {/*components-all-the-way-down*/}

Ваш додаток React починається з "кореневого" компонента. Зазвичай він створюється автоматично, коли ви створюєте новий проект. Наприклад, якщо ви використовуєте [CodeSandbox](https://codesandbox.io/) або [Create React App](https://create-react-app.dev/), кореневий компонент визначений в `src/App.js`. Якщо ви використовуєте фреймворк [Next.js](https://nextjs.org/), кореневий компонент визначений в `pages/index.js`. У цих прикладах ви експортували кореневі компоненти.
Ваш React додаток починається з "кореневого" компонента. Зазвичай він створюється автоматично, коли ви створюєте новий проект. Наприклад, якщо ви використовуєте [CodeSandbox](https://codesandbox.io/) або [Create React App](https://create-react-app.dev/), кореневий компонент визначений в `src/App.js`. Якщо ви використовуєте фреймворк [Next.js](https://nextjs.org/), кореневий компонент визначений в `pages/index.js`. У цих прикладах ви експортували кореневі компоненти.

Більшість додатків React використовують компоненти на всій глибині. Це означає, що ви будете використовувати компоненти не тільки для повторно використовуваних елементів, таких як кнопки, але й для більших елементів, таких як бічні панелі, списки та, врешті-решт, цілі сторінки! Компоненти - зручний спосіб організації коду UI та розмітки, навіть якщо деякі з них використовуються лише один раз.

[Фреймворки на основі React](/learn/start-a-new-react-project) йдуть ще далі. Замість використання порожнього HTML-файлу і дозволу React "перейняти" керування сторінкою за допомогою JavaScript, вони також автоматично генерують HTML з вашими компонентами React. Це дозволяє вашому додатку показувати деякий вміст до завантаження коду JavaScript.
[Фреймворки на основі React](/learn/start-a-new-react-project) в цьому плані йдуть ще далі. Замість використання порожнього HTML-файлу і дозволу React "перейняти" керування сторінкою за допомогою JavaScript, вони також автоматично генерують HTML з ваших React компонентів. Це дозволяє вашому додатку показувати деякий контент до завантаження JavaScript коду.

Проте, багато сайтів використовують React лише для [додавання інтерактивності до існуючих HTML-сторінок.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Вони мають кілька кореневих компонентів замість одного для всієї сторінки. Ви можете використовувати стільки React, скільки вам потрібно.

Expand All @@ -239,7 +239,7 @@ function Profile() {

#### Експорт компонента {/*export-the-component*/}

Цей sandbox не працює, тому що основний компонент не експортований:
Код в цій пісочниці не працює, тому що основний компонент не експортований:

<Sandpack>

Expand Down Expand Up @@ -295,7 +295,7 @@ img { height: 181px; }

<Hint>

Під час спроби виправити це, можливо, ви отримаєте помилку "Unexpected token". У такому випадку, перевірте, чи крапка з комою знаходиться після закриваючої дужки. Залишення крапки з комою всередині `return ( )` призведе до помилки.
Під час спроби виправити це, можливо, ви отримаєте помилку "Unexpected token". У такому випадку, перевірте, чи крапка з комою знаходиться після закриваючої дужки. Якщо ви залишите крапку з комою всередині `return ( )` - це призведе до помилки.

</Hint>

Expand All @@ -317,7 +317,7 @@ img { height: 180px; }

<Solution>

Цей компонент можна виправити, перенісши оператор return на одну лінію:
Цей компонент можна виправити, якщо перенести оператор return на одну лінію таким чином:

<Sandpack>

Expand Down

0 comments on commit cdf4bb0

Please sign in to comment.