Skip to content

Commit

Permalink
Fix some words usage according to translation table and issues
Browse files Browse the repository at this point in the history
  • Loading branch information
alinkedd committed Jan 13, 2025
1 parent db3bba4 commit 2fa34bb
Show file tree
Hide file tree
Showing 7 changed files with 30 additions and 30 deletions.
2 changes: 1 addition & 1 deletion src/content/learn/importing-and-exporting-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ img { margin: 0 10px 10px 0; height: 90px; }

</Sandpack>

Ці компоненти зараз знаходяться у **файлі кореневого компонента** з назвою `App.js` у цьому прикладі. Залежно від вашої конфігурації ваш кореневий компонент може бути в іншому файлі. Якщо ви використовуєте фреймворк з роутингом на основі файлів, як-от Next.js, ваш кореневий компонент буде різним для кожної сторінки.
Ці компоненти зараз знаходяться у **файлі кореневого компонента** з назвою `App.js` у цьому прикладі. Залежно від вашої конфігурації ваш кореневий компонент може бути в іншому файлі. Якщо ви використовуєте фреймворк із маршрутизацією на основі файлів, як-от Next.js, ваш кореневий компонент буде різним для кожної сторінки.

## Експорт та імпорт компонента {/*exporting-and-importing-a-component*/}

Expand Down
14 changes: 7 additions & 7 deletions src/content/learn/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ title: Швидкий старт

## Створення та вкладення компонентів {/*components*/}

React додатки складаються з *компонентів*. Компонент це частина UI (інтерфейсу користувача), яка має власну логіку та зовнішній вигляд. Компонент може бути маленьким, як кнопка, або ж розміром з цілу сторінку.
React-застосунки складаються з *компонентів*. Компонент це частина UI (інтерфейсу користувача), яка має власну логіку та зовнішній вигляд. Компонент може бути маленьким, як кнопка, або ж розміром з цілу сторінку.

React компоненти це JavaScript функції які повертають розмітку:

Expand All @@ -39,7 +39,7 @@ function MyButton() {
export default function MyApp() {
return (
<div>
<h1>Ласкаво просимо до мого додатку</h1>
<h1>Ласкаво просимо до мого застосунку</h1>
<MyButton />
</div>
);
Expand All @@ -64,7 +64,7 @@ function MyButton() {
export default function MyApp() {
return (
<div>
<h1>Ласкаво просимо до мого додатку</h1>
<h1>Ласкаво просимо до мого застосунку</h1>
<MyButton />
</div>
);
Expand All @@ -77,7 +77,7 @@ export default function MyApp() {

## Написання розмітки з використанням JSX {/*writing-markup-with-jsx*/}

Синтаксис розмітки, яку ви бачили вище, має назву *JSX*. Це необов'язково, але більшість React-проектів використовують JSX для зручності. Усі [інструменти, які ми рекомендуємо для локальної розробки](/learn/installation) підтримують JSX за замовчуванням.
Синтаксис розмітки, яку ви бачили вище, має назву *JSX*. Це необов'язково, але більшість React-проєктів використовують JSX для зручності. Усі [інструменти, які ми рекомендуємо для локальної розробки](/learn/installation) підтримують JSX за замовчуванням.

JSX більш строгий, ніж HTML. Ви зобов'язані закривати такі теги як `<br />`. Також ваш компонент не може повертати декілька JSX тегів. Ви повинні огортати їх у спільний батьківський елемент, такий як `<div>...</div>` або пусту `<>...</>` обгортку:

Expand Down Expand Up @@ -111,7 +111,7 @@ function AboutPage() {
```
React не вказує, як додавати файли CSS. У найпростішому випадку ви додасте тег [`<link>`](https://webdoky.org/uk/docs/Web/HTML/Element/link) до свого HTML. Якщо ви використовуєте інструмент збірки або фреймворк, зверніться до його документації, щоб дізнатися, як додати файл CSS до вашого проекту.
React не вказує, як додавати файли CSS. У найпростішому випадку ви додасте тег [`<link>`](https://webdoky.org/uk/docs/Web/HTML/Element/link) до свого HTML. Якщо ви використовуєте інструмент збірки або фреймворк, зверніться до його документації, щоб дізнатися, як додати файл CSS до вашого проєкту.
## Відображення даних {/*displaying-data*/}
Expand Down Expand Up @@ -383,7 +383,7 @@ button {
## Використання хуків {/*using-hooks*/}
Функції, що починаються з `use`, називаються *Хуками*. `useState` — це вбудований Хук, наданий React. Ви можете знайти інші вбудовані Хуки в [API довіднику](/reference/react). Також ви можете написати власні Хуки, комбінуючи існуючі.
Функції, що починаються з `use`, називаються *Хуками*. `useState` — це вбудований Хук, наданий React. Ви можете знайти інші вбудовані Хуки в [API довіднику](/reference/react). Також ви можете написати власні Хуки, комбінуючи наявні.
Хуки є більш обмежувальними, ніж інші функції. Ви можете викликати Хуки лише *на верхньому рівні* ваших компонентів (або інших Хуків). Якщо ви хочете використовувати `useState` в умові або циклі, витягніть це в новий компонент і помістіть його туди.
Expand Down Expand Up @@ -535,4 +535,4 @@ button {
Тепер ви знаєте основи написання React коду!
Перегляньте [Туторіал](/learn/tutorial-tic-tac-toe) щоб застосувати їх на практиці та створити свій перший міні-додаток із React.
Перегляньте [Туторіал](/learn/tutorial-tic-tac-toe) щоб застосувати їх на практиці та створити свій перший міні-застосунок із React.
6 changes: 3 additions & 3 deletions src/content/learn/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ title: Встановлення
<YouWillLearn isChapter={true}>

* [Як почати новий React-проєкт](/learn/start-a-new-react-project)
* [Як інтегрувати React в існуючий проєкт](/learn/add-react-to-an-existing-project)
* [Як інтегрувати React у наявний проєкт](/learn/add-react-to-an-existing-project)
* [Як налаштувати редактор коду](/learn/editor-setup)
* [Як встановити інструменти React розробника](/learn/react-developer-tools)

Expand Down Expand Up @@ -47,9 +47,9 @@ export default function App() {

Якщо ви хочете створити застосунок або вебсайт за допомогою React, [почніть новий React-проєкт.](/learn/start-a-new-react-project)

## Інтегрувати React в існуючий проєкт {/*add-react-to-an-existing-project*/}
## Інтегрувати React у наявний проєкт {/*add-react-to-an-existing-project*/}

Якщо ви хочете використати React у власному застосунку або вебсайті, [інтегруйте React в існуючий проєкт.](/learn/add-react-to-an-existing-project)
Якщо ви хочете використати React у власному застосунку або вебсайті, [інтегруйте React у наявний проєкт.](/learn/add-react-to-an-existing-project)

## Подальші кроки {/*next-steps*/}

Expand Down
8 changes: 4 additions & 4 deletions src/content/learn/updating-arrays-in-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ button { margin-left: 5px; }

</Sandpack>

Натомість створіть *новий* масив, який містить існуючі елементи *і* новий елемент у кінці. Це можна зробити кількома способами, але найпростішим є використання `...` — синтаксису [spread для масиву](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals):
Натомість створіть *новий* масив, який містить наявні елементи *і* новий елемент у кінці. Це можна зробити кількома способами, але найпростішим є використання `...` — синтаксису [spread для масиву](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals):

```js
setArtists( // Замінити стан
Expand Down Expand Up @@ -443,7 +443,7 @@ export default function List() {

Тут ви використовуєте spread-синтаксис `[...list]`, щоб спочатку створити копію вихідного масиву. Тепер, коли маєте копію, можете використовувати методи зміни, як-от `nextList.reverse()` або `nextList.sort()`, або навіть призначати окремі елементи за допомогою `nextList[0] = "something"`.

Однак, **навіть якщо скопіюєте масив, ви не зможете змінити існуючі елементи _всередині_ нього безпосередньо.** Це пояснюється тим, що копіювання неглибоке — новий масив міститиме ті самі елементи, що й оригінальний. Отже, якщо змінюєте об'єкт у скопійованому масиві, ви змінюєте наявний стан. Наприклад, такий код є проблемою.
Однак, **навіть якщо скопіюєте масив, ви не зможете змінити наявні елементи _всередині_ нього безпосередньо.** Це пояснюється тим, що копіювання неглибоке — новий масив міститиме ті самі елементи, що й оригінальний. Отже, якщо змінюєте об'єкт у скопійованому масиві, ви змінюєте наявний стан. Наприклад, такий код є проблемою.

```js
const nextList = [...list];
Expand Down Expand Up @@ -544,7 +544,7 @@ function ItemList({ artworks, onToggle }) {
```js
const myNextList = [...myList];
const artwork = myNextList.find(a => a.id === artworkId);
artwork.seen = nextSeen; // Проблема: мутація існуючого елементу
artwork.seen = nextSeen; // Проблема: мутація наявного елементу
setMyList(myNextList);
```

Expand All @@ -566,7 +566,7 @@ setMyList(myList.map(artwork => {

Тут `...` — синтаксис spread об'єкта, який використовується для [створення копії об'єкта.](/learn/updating-objects-in-state#copying-objects-with-the-spread-syntax)

За допомогою цього підходу жоден із існуючих елементів стану не змінюється, і помилку виправлено:
За допомогою цього підходу жоден із наявних елементів стану не змінюється, і помилку виправлено:

<Sandpack>

Expand Down
Loading

0 comments on commit 2fa34bb

Please sign in to comment.