From 77bcfd3d3652e4e29751d2e636131dacbb958c2c Mon Sep 17 00:00:00 2001 From: Sergiy Lytovskiy Date: Tue, 25 Apr 2023 23:59:58 +0300 Subject: [PATCH 1/2] Finished translation of your first component page --- src/content/learn/your-first-component.md | 183 +++++++++++----------- 1 file changed, 91 insertions(+), 92 deletions(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index 343823aa4..87fbc091e 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -1,47 +1,47 @@ --- -title: Your First Component +title: Ваш перший компонент --- -*Components* are one of the core concepts of React. They are the foundation upon which you build user interfaces (UI), which makes them the perfect place to start your React journey! +*Компоненти* є одним з основних понять React. Вони є основою, на якій ви будуєте інтерфейси користувача (UI), що робить їх ідеальним місцем для початку вашого шляху з React! -* What a component is -* What role components play in a React application -* How to write your first React component +* Що таке компонент +* Яку роль відіграють компоненти в додатку React +* Як написати свій перший компонент React -## Components: UI building blocks {/*components-ui-building-blocks*/} +## Компоненти: Будівельні блоки UI {/*components-ui-building-blocks*/} -On the Web, HTML lets us create rich structured documents with its built-in set of tags like `

` and `
  • `: +У Вебі, HTML дозволяє нам створювати багатоструктурні документи за допомогою вбудованих наборів тегів, таких як `

    ` та `
  • `: ```html
    -

    My First Component

    +

    Мій перший компонент

      -
    1. Components: UI Building Blocks
      2. -
    2. Defining a Component
      3. -
    3. Using a Component
      4. +
    4. Компоненти: Будівельні блоки UI
      5. +
    5. Визначення компонента
      6. +
    6. Використання компонента
    ``` -This markup represents this article `
    `, its heading `

    `, and an (abbreviated) table of contents as an ordered list `
      `. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web. +Ця розмітка представляє статтю `
      `, її заголовок `

      `, та (скорочений) зміст у вигляді впорядкованого списку `
        `. Розмітка подібна до цієї, в поєднанні з CSS для стилізації та JavaScript для інтерактивності, лежить в основі кожної бічної панелі, аватара, модального вікна, випадного меню — кожного елемента UI, який ви бачите в Вебі. -React lets you combine your markup, CSS, and JavaScript into custom "components", **reusable UI elements for your app.** The table of contents code you saw above could be turned into a `` component you could render on every page. Under the hood, it still uses the same HTML tags like `
        `, `

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

        `, тощо. -Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components: +Так само, як і з HTML-тегами, ви можете компонувати, впорядковувати та вкладати компоненти для створення цілих сторінок. Наприклад, сторінка документації, яку ви читаєте, складається з компонентів React: ```js - Docs + Документація @@ -51,11 +51,11 @@ Just like with HTML tags, you can compose, order and nest components to design w ``` -As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with ``! You can even jumpstart your project with the thousands of components shared by the React open source community like [Chakra UI](https://chakra-ui.com/) and [Material UI.](https://material-ui.com/) +Зі зростанням вашого проекту ви помітите, що багато з ваших дизайнів можна створити шляхом повторного використання компонентів, які ви вже написали, що пришвидшує вашу розробку. Наш зміст вище може бути доданий до будь-якого екрану за допомогою ``! Ви навіть можете розпочати свій проект з тисячами компонентів, які поділяє спільнота відкритого коду React, таких як [Chakra UI](https://chakra-ui.com/) та [Material UI.](https://material-ui.com/) -## Defining a component {/*defining-a-component*/} +## Визначення компонента {/*defining-a-component*/} -Traditionally when creating web pages, web developers marked up their content and then added interaction by sprinkling on some JavaScript. This worked great when interaction was a nice-to-have on the web. Now it is expected for many sites and all apps. React puts interactivity first while still using the same technology: **a React component is a JavaScript function that you can _sprinkle with markup_.** Here's what that looks like (you can edit the example below): +Традиційно, створюючи веб-сторінки, веб-розробники розмічали свій контент і додавали взаємодію, розсипаючи трохи JavaScript. Це чудово працювало, коли взаємодія була приємним доповненням до вебу. Тепер це очікується на багатьох сайтах і в усіх додатках. React ставить взаємодію на перше місце, використовуючи при цьому ту ж технологію: **компонент React - це функція JavaScript, яку можна _посипати розміткою_.** Ось як це виглядає (ви можете відредагувати приклад нижче): @@ -64,7 +64,7 @@ export default function Profile() { return ( Katherine Johnson ) } @@ -76,51 +76,50 @@ img { height: 200px; } -And here's how to build a component: +А ось як створити компонент: -### Step 1: Export the component {/*step-1-export-the-component*/} +### Крок 1: Експортування компонента {/*step-1-export-the-component*/} -The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!) +Префікс `export default` це [стандартний синтаксис JavaScript](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (не специфічний для React). Він дозволяє вам позначити головну функцію у файлі, щоб ви могли потім імпортувати її з інших файлів. (Детальніше про імпорт у розділі [Імпортування та експортування компонентів](/learn/importing-and-exporting-components)!) -### Step 2: Define the function {/*step-2-define-the-function*/} +### Крок 2: Визначення функції {/*step-2-define-the-function*/} -With `function Profile() { }` you define a JavaScript function with the name `Profile`. +За допомогою `function Profile() { }` ви визначаєте функцію JavaScript з іменем `Profile`. -React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work! - +React компоненти є звичайними JavaScript функціями, але **їхні назви мають починатися з великої літери** інакше вони не будуть працювати! -### Step 3: Add markup {/*step-3-add-markup*/} +### Крок 3: Додавання розмітки {/*step-3-add-markup*/} -The component returns an `` tag with `src` and `alt` attributes. `` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript. +Компонент повертає тег `` з атрибутами `src` та `alt`. `` записаний як HTML, але насправді це JavaScript під капотом! Цей синтаксис називається [JSX](/learn/writing-markup-with-jsx), і він дозволяє вам вбудовувати розмітку всередину JavaScript. -Return statements can be written all on one line, as in this component: +Оператори повернення можуть бути записані на одному рядку, як у цьому компоненті: ```js -return Katherine Johnson; +return Кетерін Джонсон (Katherine Johnson); ``` -But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses: +Але якщо ваша розмітка не розташована на тому ж рядку, що й ключове слово `return` ви повинні обернути її в пару дужок: ```js return (
        - Katherine Johnson + Кетерін Джонсон (Katherine Johnson)
        ); ``` -Without parentheses, any code on the lines after `return` [will be ignored](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)! -## Using a component {/*using-a-component*/} +## Застосування компонента {/*using-a-component*/} -Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components: +Тепер, коли ви визначили свій компонент `Profile`, ви можете вкладати його всередину інших компонентів. Наприклад, ви можете експортувати компонент `Gallery`, який використовує кілька компонентів `Profile`: @@ -129,7 +128,7 @@ function Profile() { return ( Katherine Johnson ); } @@ -137,7 +136,7 @@ function Profile() { export default function Gallery() { return (
        -

        Amazing scientists

        +

        Видатні вчені

        @@ -152,37 +151,37 @@ img { margin: 0 10px 10px 0; height: 90px; } -### What the browser sees {/*what-the-browser-sees*/} +### Що бачить браузер {/*what-the-browser-sees*/} -Notice the difference in casing: +Зверніть увагу на відмінність у регістрі літер: -* `
        ` is lowercase, so React knows we refer to an HTML tag. -* `` starts with a capital `P`, so React knows that we want to use our component called `Profile`. +* `
        ` написано у нижньому регістрі, тому React знає, що ми звертаємось до HTML-тегу. +* `` починається з великої літери `P`, тому React знає, що ми хочемо використовувати наш компонент з назвою `Profile`. -And `Profile` contains even more HTML: ``. In the end, this is what the browser sees: +І `Profile` містить ще більше HTML: ``. В кінцевому результаті це те, що бачить браузер: ```html
        -

        Amazing scientists

        - Katherine Johnson - Katherine Johnson - Katherine Johnson +

        Видатні вчені

        + Кетерін Джонсон (Katherine Johnson) + Кетерін Джонсон (Katherine Johnson) + Кетерін Джонсон (Katherine Johnson)
        ``` -### Nesting and organizing components {/*nesting-and-organizing-components*/} +### Вкладення та організація компонентів {/*nesting-and-organizing-components*/} -Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components) +Компоненти є звичайними функціями JavaScript, тому ви можете зберігати кілька компонентів у одному файлі. Це зручно, коли компоненти є досить малими або тісно пов'язаними між собою. Якщо цей файл стає переповненим, ви завжди можете перемістити компонент `Profile` до окремого файлу. Незабаром ви навчитеся це робити на [сторінці про імпорт.](/learn/importing-and-exporting-components) -Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like. +Тому що компоненти `Profile` рендеряться всередині `Gallery`—навіть кілька разів!—ми можемо сказати, що `Gallery` є **батьківським компонентом,** який рендерить кожний `Profile` як "дочірній". Це частина магії React: ви можете визначити компонент один раз і потім використовувати його в будь-яких місцях та скільки завгодно разів. -Components can render other components, but **you must never nest their definitions:** +Компоненти можуть рендерити інші компоненти, але **ви не повинні вкладати їх визначення одне в одне:** ```js {2-5} export default function Gallery() { - // 🔴 Never define a component inside another component! + // 🔴 Ніколи не визначайте компонент всередині іншого компонента! function Profile() { // ... } @@ -190,47 +189,47 @@ export default function Gallery() { } ``` -The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level: +Код вище [дуже повільний і може призводити до помилок.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Натомість, визначайте кожен компонент на верхньому рівні: ```js {5-8} export default function Gallery() { // ... } -// ✅ Declare components at the top level +// ✅ Оголошуйте компоненти на верхньому рівні function Profile() { // ... } ``` -When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions. +Якщо дочірній компонент потребує деяких даних від батьківського компонента, [передавайте їх за допомогою пропсів](/learn/passing-props-to-a-component) замість вкладення визначень. -#### Components all the way down {/*components-all-the-way-down*/} +#### Компоненти на всій глибині {/*components-all-the-way-down*/} -Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components. +Ваш додаток React починається з "кореневого" компонента. Зазвичай він створюється автоматично, коли ви створюєте новий проект. Наприклад, якщо ви використовуєте [CodeSandbox](https://codesandbox.io/) або [Create React App](https://create-react-app.dev/), кореневий компонент визначений в `src/App.js`. Якщо ви використовуєте фреймворк [Next.js](https://nextjs.org/), кореневий компонент визначений в `pages/index.js`. У цих прикладах ви експортували кореневі компоненти. -Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once. +Більшість додатків React використовують компоненти на всій глибині. Це означає, що ви будете використовувати компоненти не тільки для повторно використовуваних елементів, таких як кнопки, але й для більших елементів, таких як бічні панелі, списки та, врешті-решт, цілі сторінки! Компоненти - зручний спосіб організації коду UI та розмітки, навіть якщо деякі з них використовуються лише один раз. -[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads. +[Фреймворки на основі React](/learn/start-a-new-react-project) йдуть ще далі. Замість використання порожнього HTML-файлу і дозволу React "перейняти" керування сторінкою за допомогою JavaScript, вони також автоматично генерують HTML з вашими компонентами React. Це дозволяє вашому додатку показувати деякий вміст до завантаження коду JavaScript. -Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need. +Проте, багато сайтів використовують React лише для [додавання інтерактивності до існуючих HTML-сторінок.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Вони мають кілька кореневих компонентів замість одного для всієї сторінки. Ви можете використовувати стільки React, скільки вам потрібно. -You've just gotten your first taste of React! Let's recap some key points. +Ви щойно спробували React вперше! Давайте повторимо деякі ключові моменти. -* React lets you create components, **reusable UI elements for your app.** -* In a React app, every piece of UI is a component. -* React components are regular JavaScript functions except: +* React дозволяє створювати компоненти, **елементи UI для повторного використання у вашому додатку.** +* У додатку React кожен елемент UI є компонентом. +* React компоненти є звичайними JavaScript функціями, за винятком: - 1. Their names always begin with a capital letter. - 2. They return JSX markup. + 1. Їхні назви завжди починаються з великої літери. + 2. Вони повертають JSX-розмітку. @@ -238,9 +237,9 @@ You've just gotten your first taste of React! Let's recap some key points. -#### Export the component {/*export-the-component*/} +#### Експорт компонента {/*export-the-component*/} -This sandbox doesn't work because the root component is not exported: +Цей sandbox не працює, тому що основний компонент не експортований: @@ -249,7 +248,7 @@ function Profile() { return ( Aklilu Lemma ); } @@ -261,11 +260,11 @@ img { height: 181px; } -Try to fix it yourself before looking at the solution! +Спробуйте виправити це самостійно, перш ніж дивитись на рішення! -Add `export default` before the function definition like so: +Додайте `export default` перед визначенням функції таким чином: @@ -274,7 +273,7 @@ export default function Profile() { return ( Aklilu Lemma ); } @@ -286,17 +285,17 @@ img { height: 181px; } -You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components) +Вам може бути цікаво чому запис `export` сам по собі недостатній для виправлення цього прикладу. Ви можете дізнатися різницю між `export` та `export default` у розділі [Імпортування та експортування компонентів.](/learn/importing-and-exporting-components) -#### Fix the return statement {/*fix-the-return-statement*/} +#### Виправте оператор return {/*fix-the-return-statement*/} -Something isn't right about this `return` statement. Can you fix it? +З цим оператором `return` щось не так. Чи можете ви виправити його? -You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error. +Під час спроби виправити це, можливо, ви отримаєте помилку "Unexpected token". У такому випадку, перевірте, чи крапка з комою знаходиться після закриваючої дужки. Залишення крапки з комою всередині `return ( )` призведе до помилки. @@ -306,7 +305,7 @@ You may get an "Unexpected token" error while trying to fix this. In that case, ```js export default function Profile() { return - Katsuko Saruhashi; + Кацуко Сарухаші (Katsuko Saruhashi); } ``` @@ -318,13 +317,13 @@ img { height: 180px; } -You can fix this component by moving the return statement to one line like so: +Цей компонент можна виправити, перенісши оператор return на одну лінію: ```js export default function Profile() { - return Katsuko Saruhashi; + return Кацуко Сарухаші (Katsuko Saruhashi); } ``` @@ -334,7 +333,7 @@ img { height: 180px; } -Or by wrapping the returned JSX markup in parentheses that open right after `return`: +Або обгорніть повернену JSX розмітку у дужки, які відкриваються одразу після `return`: @@ -343,7 +342,7 @@ export default function Profile() { return ( Katsuko Saruhashi ); } @@ -357,9 +356,9 @@ img { height: 180px; } -#### Spot the mistake {/*spot-the-mistake*/} +#### Виявіть помилку {/*spot-the-mistake*/} -Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!) +Щось не так з оголошенням та використанням компонента `Profile`. Чи можете ви знайти помилку? (Спробуйте пригадати, як React відрізняє компоненти від звичайних HTML-тегів!) @@ -368,7 +367,7 @@ function profile() { return ( Alan L. Hart ); } @@ -376,7 +375,7 @@ function profile() { export default function Gallery() { return (
        -

        Amazing scientists

        +

        Видатні вчені

        @@ -393,9 +392,9 @@ img { margin: 0 10px 10px 0; height: 90px; } -React component names must start with a capital letter. +Назви компонентів React повинні починатися з великої літери. -Change `function profile()` to `function Profile()`, and then change every `` to ``: +Змініть `function profile()` на `function Profile()`, а потім змініть кожен `` на ``: @@ -404,7 +403,7 @@ function Profile() { return ( Alan L. Hart ); } @@ -412,7 +411,7 @@ function Profile() { export default function Gallery() { return (
        -

        Amazing scientists

        +

        Видатні вчені

        @@ -429,14 +428,14 @@ img { margin: 0 10px 10px 0; } -#### Your own component {/*your-own-component*/} +#### Ваш власний компонент {/*your-own-component*/} -Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `

        Good job!

        `. Don't forget to export it! +Напишіть компонент з нуля. Ви можете дати йому будь-яку валідну назву та повернути будь-яку розмітку. Якщо у вас закінчилися ідеї, ви можете написати компонент `Congratulations`, який показує `

        Гарна робота!

        `. Не забудьте експортувати його! ```js -// Write your component below! +// Напишіть свій компонент нижче! ``` @@ -449,7 +448,7 @@ Write a component from scratch. You can give it any valid name and return any ma ```js export default function Congratulations() { return ( -

        Good job!

        +

        Гарна робота!

        ); } ``` From cdf4bb0715c6621a01c2baa07901d94295ff0058 Mon Sep 17 00:00:00 2001 From: Bohdan Katsevych <94533356+bkatsevych@users.noreply.github.com> Date: Sat, 20 May 2023 00:02:36 +0300 Subject: [PATCH 2/2] Apply suggestions from code review --- src/content/learn/your-first-component.md | 36 +++++++++++------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index 87fbc091e..ec25e07ee 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -33,7 +33,7 @@ title: Ваш перший компонент Ця розмітка представляє статтю `
        `, її заголовок `

        `, та (скорочений) зміст у вигляді впорядкованого списку `
          `. Розмітка подібна до цієї, в поєднанні з CSS для стилізації та JavaScript для інтерактивності, лежить в основі кожної бічної панелі, аватара, модального вікна, випадного меню — кожного елемента UI, який ви бачите в Вебі. -React дозволяє вам поєднувати вашу розмітку, CSS та JavaScript у власні "компоненти", **повторно використовувані елементи UI для вашого додатку.** Зміст коду, який ви бачили вище, можна перетворити на компонент ``, який ви можете відобразити на кожній сторінці. Під капотом він все ще використовує ті ж самі HTML-теги, такі як `
          `, `

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

          `, тощо. Так само, як і з HTML-тегами, ви можете компонувати, впорядковувати та вкладати компоненти для створення цілих сторінок. Наприклад, сторінка документації, яку ви читаєте, складається з компонентів React: @@ -51,11 +51,11 @@ React дозволяє вам поєднувати вашу розмітку, CS ``` -Зі зростанням вашого проекту ви помітите, що багато з ваших дизайнів можна створити шляхом повторного використання компонентів, які ви вже написали, що пришвидшує вашу розробку. Наш зміст вище може бути доданий до будь-якого екрану за допомогою ``! Ви навіть можете розпочати свій проект з тисячами компонентів, які поділяє спільнота відкритого коду React, таких як [Chakra UI](https://chakra-ui.com/) та [Material UI.](https://material-ui.com/) +Зі зростанням вашого проекту ви помітите, що багато з ваших дизайнів можна створити шляхом повторного використання компонентів, які ви вже написали, що пришвидшує вашу розробку. Наш зміст вище може бути доданий до будь-якого екрану за допомогою ``! Ви навіть можете розпочати свій проект з тисячами компонентів, які поділяє спільнота відкритого коду React, як-от [Chakra UI](https://chakra-ui.com/) та [Material UI.](https://material-ui.com/) ## Визначення компонента {/*defining-a-component*/} -Традиційно, створюючи веб-сторінки, веб-розробники розмічали свій контент і додавали взаємодію, розсипаючи трохи JavaScript. Це чудово працювало, коли взаємодія була приємним доповненням до вебу. Тепер це очікується на багатьох сайтах і в усіх додатках. React ставить взаємодію на перше місце, використовуючи при цьому ту ж технологію: **компонент React - це функція JavaScript, яку можна _посипати розміткою_.** Ось як це виглядає (ви можете відредагувати приклад нижче): +Традиційно, створюючи веб-сторінки, веб-розробники спершу писали розмітку їхнього контенту, а потім додавали інтерактив, трохи посипаючи JavaScript'ом. Це чудово працювало, коли інтерактив була приємним доповненням до вебу. Тепер це очікується на багатьох сайтах і в усіх додатках. React ставить взаємодію на перше місце, використовуючи при цьому ту ж технологію: **компонент React - це функція JavaScript, яку можна _посипати розміткою_.** Ось як це виглядає (ви можете відредагувати приклад нижче): @@ -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*/} @@ -95,13 +95,13 @@ React компоненти є звичайними JavaScript функціями Компонент повертає тег `` з атрибутами `src` та `alt`. `` записаний як HTML, але насправді це JavaScript під капотом! Цей синтаксис називається [JSX](/learn/writing-markup-with-jsx), і він дозволяє вам вбудовувати розмітку всередину JavaScript. -Оператори повернення можуть бути записані на одному рядку, як у цьому компоненті: +Оператори повернення можуть бути записані в одному рядку, як у цьому компоненті: ```js return Кетерін Джонсон (Katherine Johnson); ``` -Але якщо ваша розмітка не розташована на тому ж рядку, що й ключове слово `return` ви повинні обернути її в пару дужок: +Але якщо ваша розмітка не розташована в тому ж рядку, що й ключове слово `return` ви повинні обгорнути її в пару дужок: ```js return ( @@ -113,13 +113,13 @@ return ( -Без дужок будь-який код на рядках після `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)! ## Застосування компонента {/*using-a-component*/} -Тепер, коли ви визначили свій компонент `Profile`, ви можете вкладати його всередину інших компонентів. Наприклад, ви можете експортувати компонент `Gallery`, який використовує кілька компонентів `Profile`: +Тепер, коли ви створили свій компонент `Profile`, ви можете вкладати його всередину інших компонентів. Наприклад, ви можете експортувати компонент `Gallery`, який використовує кілька компонентів `Profile`: @@ -171,17 +171,17 @@ 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: ви можете визначити компонент один раз і потім використовувати його в будь-яких місцях та скільки завгодно разів. -Компоненти можуть рендерити інші компоненти, але **ви не повинні вкладати їх визначення одне в одне:** +Компоненти можуть рендерити інші компоненти, але **ви не повинні вкладати їх створення одне в інше:** ```js {2-5} export default function Gallery() { - // 🔴 Ніколи не визначайте компонент всередині іншого компонента! + // 🔴 Ніколи не створюйте компонент всередині іншого компонента! function Profile() { // ... } @@ -189,7 +189,7 @@ export default function Gallery() { } ``` -Код вище [дуже повільний і може призводити до помилок.](/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() { @@ -202,7 +202,7 @@ function Profile() { } ``` -Якщо дочірній компонент потребує деяких даних від батьківського компонента, [передавайте їх за допомогою пропсів](/learn/passing-props-to-a-component) замість вкладення визначень. +Якщо дочірній компонент потребує деяких даних від батьківського компонента, [передавайте їх за допомогою пропсів](/learn/passing-props-to-a-component) замість вкладення створень. @@ -210,11 +210,11 @@ function Profile() { #### Компоненти на всій глибині {/*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, скільки вам потрібно. @@ -239,7 +239,7 @@ function Profile() { #### Експорт компонента {/*export-the-component*/} -Цей sandbox не працює, тому що основний компонент не експортований: +Код в цій пісочниці не працює, тому що основний компонент не експортований: @@ -295,7 +295,7 @@ img { height: 181px; } -Під час спроби виправити це, можливо, ви отримаєте помилку "Unexpected token". У такому випадку, перевірте, чи крапка з комою знаходиться після закриваючої дужки. Залишення крапки з комою всередині `return ( )` призведе до помилки. +Під час спроби виправити це, можливо, ви отримаєте помилку "Unexpected token". У такому випадку, перевірте, чи крапка з комою знаходиться після закриваючої дужки. Якщо ви залишите крапку з комою всередині `return ( )` - це призведе до помилки. @@ -317,7 +317,7 @@ img { height: 180px; } -Цей компонент можна виправити, перенісши оператор return на одну лінію: +Цей компонент можна виправити, якщо перенести оператор return на одну лінію таким чином: