From 89b34d8708bb3d03f0f2558c5cc11c0a0853e14f Mon Sep 17 00:00:00 2001 From: Michael Babin Date: Thu, 14 Feb 2019 17:11:29 +0200 Subject: [PATCH 1/6] Translated Composition vs inheritance --- content/docs/composition-vs-inheritance.md | 56 +++++++++++----------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index c86735ef7..f5e42b871 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -1,6 +1,6 @@ --- id: composition-vs-inheritance -title: Composition vs Inheritance +title: Композиція проти наслідування permalink: docs/composition-vs-inheritance.html redirect_from: - "docs/multiple-components.html" @@ -8,15 +8,15 @@ prev: lifting-state-up.html next: thinking-in-react.html --- -React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components. +React має потужну модель композиції і ми рекомендуємо використовувати композицію замість наслідування для повторного використання коду між компонентами. -In this section, we will consider a few problems where developers new to React often reach for inheritance, and show how we can solve them with composition. +В цьому розділі ми розглянемо кілька проблем, котрі нові React-розробники вирішують за допомогою наслідування і покажемо, як вони вирішуються за допомогою композиції. -## Containment {#containment} +## Запобіжні заходи {#containment} -Some components don't know their children ahead of time. This is especially common for components like `Sidebar` or `Dialog` that represent generic "boxes". +Деякі компоненти не знають зарані про свої дочірні елементи. Це особливо характерно для таких компонентів як `Sidebar` чи `Dialog`, котрі представляють собою загальні контейнери. -We recommend that such components use the special `children` prop to pass children elements directly into their output: +Ми рекомендуємо, щоб такі компоненти використовували особливий проп `children` для передачі дочірніх елементів напряму до свого виводу: ```js{4} function FancyBorder(props) { @@ -28,7 +28,7 @@ function FancyBorder(props) { } ``` -This lets other components pass arbitrary children to them by nesting the JSX: +Це дозволяє іншим компонентам передавати їм довільні дочірні елементи шляхом вкладення JSX: ```js{4-9} function WelcomeDialog() { @@ -38,18 +38,18 @@ function WelcomeDialog() { Welcome

- Thank you for visiting our spacecraft! + Дякуємо, що завітали на борт нашого космічного корабля!

); } ``` -**[Try it on CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)** +**[Спробувати на CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)** -Anything inside the `` JSX tag gets passed into the `FancyBorder` component as a `children` prop. Since `FancyBorder` renders `{props.children}` inside a `
`, the passed elements appear in the final output. +Усе, що знаходиться між JSX тегом `` буде передане в `FancyBorder` компонент як `children` проп. Оскільки `FancyBorder` рендерить `{props.children}` всередині `
`, передані елементи з'являться в фінальному виводі. -While this is less common, sometimes you might need multiple "holes" in a component. In such cases you may come up with your own convention instead of using `children`: +Іноді, хоч і не так часто, вам може знадобитись кілька подібних "слотів" у компоненті. В таких випадках ви можети придумати власне рішення замість використання `children`: ```js{5,8,18,21} function SplitPane(props) { @@ -78,15 +78,15 @@ function App() { } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010) +[**Спробувати на CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010) -React elements like `` and `` are just objects, so you can pass them as props like any other data. This approach may remind you of "slots" in other libraries but there are no limitations on what you can pass as props in React. +Такі React-елементи як `` і `` є звичайними об'єктами, а отже ви можете передати їх в ролі пропсів, як і будь-які інші дані. Такий підхід може нагадати вам "слоти" в інших бібліотеках, але React не обмежує вас у тому, що ви можете передати як пропси. -## Specialization {#specialization} +## Спеціалізація {#specialization} -Sometimes we think about components as being "special cases" of other components. For example, we might say that a `WelcomeDialog` is a special case of `Dialog`. +Іноді ми розглядаємо компоненти як "особливий випадок" інших компонентів. Наприклад, ми можемо сказати, що `WelcomeDialog` є особливим випадком `Dialog`. -In React, this is also achieved by composition, where a more "specific" component renders a more "generic" one and configures it with props: +У React подібне також досягається композицією, коли більш "конкретний" компонент рендерить більш "загальний" і налаштовує його за допомогою пропсів: ```js{5,8,16-18} function Dialog(props) { @@ -106,14 +106,14 @@ function WelcomeDialog() { return ( + message="Дякуємо, що завітали на борт нашого космічного корабля!" /> ); } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010) +[**Спробувати на CodePen**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010) -Composition works equally well for components defined as classes: +Композиція працює так само добре для компонентів визначених як класи: ```js{10,27-31} function Dialog(props) { @@ -140,12 +140,12 @@ class SignUpDialog extends React.Component { render() { return ( - + ); @@ -156,17 +156,17 @@ class SignUpDialog extends React.Component { } handleSignUp() { - alert(`Welcome aboard, ${this.state.login}!`); + alert(`Ласкаво просимо на борт, ${this.state.login}!`); } } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010) +[**Спробувати на CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010) -## So What About Inheritance? {#so-what-about-inheritance} +## То що з приводу наслідування? {#so-what-about-inheritance} -At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies. +У Facebook ми використовуємо React в тисячах компонентів і ми не знайшли жодного випадку використання в якому б ми могли порадити створення ієрархій наслідування компонентів. -Props and composition give you all the flexibility you need to customize a component's look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions. +Пропси і композиція дають вам всю необхідну гнучкість, щоб налаштувати вигляд і поведінку компонента в явний і безпечний спосіб. Пам'ятайте, що компоненти можуть приймати довільні пропси, включно з примітивами, React-елементами чи функціями. -If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it. +Якщо ви хочете повторно використати функціональність котра не відноситься до інтерфейсу користувача, ми рекомендуємо виокремити її в окремий JavaScript модуль. Компоненти можуть імпортувати його і використувати функцію, об'єкт чи клас без наслідування. From f0e1359098eeb7f6557a7ebc780b9c0c8198d405 Mon Sep 17 00:00:00 2001 From: Michael Babin Date: Fri, 15 Feb 2019 08:34:20 +0200 Subject: [PATCH 2/6] fixed requested changes --- content/docs/composition-vs-inheritance.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index f5e42b871..aafc02376 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -14,7 +14,7 @@ React має потужну модель композиції і ми реком ## Запобіжні заходи {#containment} -Деякі компоненти не знають зарані про свої дочірні елементи. Це особливо характерно для таких компонентів як `Sidebar` чи `Dialog`, котрі представляють собою загальні контейнери. +Деякі компоненти не знають заздалегідь про свої дочірні елементи. Це особливо характерно для таких компонентів як `Sidebar` чи `Dialog`, котрі представляють собою загальні контейнери. Ми рекомендуємо, щоб такі компоненти використовували особливий проп `children` для передачі дочірніх елементів напряму до свого виводу: @@ -47,7 +47,7 @@ function WelcomeDialog() { **[Спробувати на CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)** -Усе, що знаходиться між JSX тегом `` буде передане в `FancyBorder` компонент як `children` проп. Оскільки `FancyBorder` рендерить `{props.children}` всередині `
`, передані елементи з'являться в фінальному виводі. +Усе, що знаходиться між JSX тегом `` буде передане в `FancyBorder` компонент як `children` проп. Оскільки `FancyBorder` рендерить `{props.children}` всередині `
`, передані елементи з'являться у фінальному виводі. Іноді, хоч і не так часто, вам може знадобитись кілька подібних "слотів" у компоненті. В таких випадках ви можети придумати власне рішення замість використання `children`: @@ -165,8 +165,8 @@ class SignUpDialog extends React.Component { ## То що з приводу наслідування? {#so-what-about-inheritance} -У Facebook ми використовуємо React в тисячах компонентів і ми не знайшли жодного випадку використання в якому б ми могли порадити створення ієрархій наслідування компонентів. +У Facebook ми використовуємо React у тисячах компонентів і ми не знайшли жодного випадку використання в якому б ми могли порадити створення ієрархій наслідування компонентів. Пропси і композиція дають вам всю необхідну гнучкість, щоб налаштувати вигляд і поведінку компонента в явний і безпечний спосіб. Пам'ятайте, що компоненти можуть приймати довільні пропси, включно з примітивами, React-елементами чи функціями. -Якщо ви хочете повторно використати функціональність котра не відноситься до інтерфейсу користувача, ми рекомендуємо виокремити її в окремий JavaScript модуль. Компоненти можуть імпортувати його і використувати функцію, об'єкт чи клас без наслідування. +Якщо ви хочете повторно використати функціональність котра не відноситься до інтерфейсу користувача, ми рекомендуємо витягнути її в окремий JavaScript модуль. Компоненти можуть імпортувати його і використувати функцію, об'єкт чи клас без наслідування. From 0ceb40f0ccf97614bdd9f2ccd7c35ad3e84b03db Mon Sep 17 00:00:00 2001 From: Michael Babin Date: Fri, 15 Feb 2019 11:59:52 +0200 Subject: [PATCH 3/6] fix comma --- content/docs/composition-vs-inheritance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index aafc02376..fbee87575 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -169,4 +169,4 @@ class SignUpDialog extends React.Component { Пропси і композиція дають вам всю необхідну гнучкість, щоб налаштувати вигляд і поведінку компонента в явний і безпечний спосіб. Пам'ятайте, що компоненти можуть приймати довільні пропси, включно з примітивами, React-елементами чи функціями. -Якщо ви хочете повторно використати функціональність котра не відноситься до інтерфейсу користувача, ми рекомендуємо витягнути її в окремий JavaScript модуль. Компоненти можуть імпортувати його і використувати функцію, об'єкт чи клас без наслідування. +Якщо ви хочете повторно використати функціональність, котра не відноситься до інтерфейсу користувача, ми рекомендуємо витягнути її в окремий JavaScript модуль. Компоненти можуть імпортувати його і використувати функцію, об'єкт чи клас без наслідування. From 86c90a09b23d94fd9d6bed5b2e554110273ee455 Mon Sep 17 00:00:00 2001 From: Michael Babin Date: Fri, 15 Feb 2019 12:02:13 +0200 Subject: [PATCH 4/6] fix missed change --- content/docs/composition-vs-inheritance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index fbee87575..14e2e5676 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -49,7 +49,7 @@ function WelcomeDialog() { Усе, що знаходиться між JSX тегом `` буде передане в `FancyBorder` компонент як `children` проп. Оскільки `FancyBorder` рендерить `{props.children}` всередині `
`, передані елементи з'являться у фінальному виводі. -Іноді, хоч і не так часто, вам може знадобитись кілька подібних "слотів" у компоненті. В таких випадках ви можети придумати власне рішення замість використання `children`: +Іноді, хоч і не так часто, вам може знадобитись кілька подібних "слотів" у компоненті. У таких випадках ви можети придумати власне рішення замість використання `children`: ```js{5,8,18,21} function SplitPane(props) { From d20d2609cd0afe1c1948f79411758edb92eef009 Mon Sep 17 00:00:00 2001 From: Michael Babin Date: Fri, 15 Feb 2019 18:39:29 +0200 Subject: [PATCH 5/6] one more comma --- content/docs/composition-vs-inheritance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index 14e2e5676..a7e45364d 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -165,7 +165,7 @@ class SignUpDialog extends React.Component { ## То що з приводу наслідування? {#so-what-about-inheritance} -У Facebook ми використовуємо React у тисячах компонентів і ми не знайшли жодного випадку використання в якому б ми могли порадити створення ієрархій наслідування компонентів. +У Facebook ми використовуємо React у тисячах компонентів і ми не знайшли жодного випадку використання, в якому б ми могли порадити створення ієрархій наслідування компонентів. Пропси і композиція дають вам всю необхідну гнучкість, щоб налаштувати вигляд і поведінку компонента в явний і безпечний спосіб. Пам'ятайте, що компоненти можуть приймати довільні пропси, включно з примітивами, React-елементами чи функціями. From 0b202b49baa70e05eb6c1f9eb48e54ab15e27e76 Mon Sep 17 00:00:00 2001 From: Michael Babin Date: Sun, 17 Feb 2019 17:55:00 +0200 Subject: [PATCH 6/6] fix missed translation --- content/docs/composition-vs-inheritance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index a7e45364d..1d54083ef 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -105,7 +105,7 @@ function Dialog(props) { function WelcomeDialog() { return ( ); }