From 6de0e9602b85f1bf9ae7ee2fd206bd533b63fcfc Mon Sep 17 00:00:00 2001 From: Vladyslav Tereshyn Date: Tue, 19 Feb 2019 00:14:04 +0200 Subject: [PATCH 1/2] React styling --- content/docs/faq-styling.md | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index ddc955e3d..5a6e9ff5d 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -6,9 +6,9 @@ layout: docs category: FAQ --- -### How do I add CSS classes to components? {#how-do-i-add-css-classes-to-components} +### Як додавати CSS класи до компонентів? {#how-do-i-add-css-classes-to-components} -Pass a string as the `className` prop: +Передайте строку як `className` проп: ```jsx render() { @@ -16,7 +16,7 @@ render() { } ``` -It is common for CSS classes to depend on the component props or state: +Класи зазвичай залежать від пропсів та стану компоненту: ```jsx render() { @@ -24,28 +24,30 @@ render() { if (this.props.isActive) { className += ' menu-active'; } - return Menu + return Меню } ``` ->Tip +>Порада > ->If you often find yourself writing code like this, [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) package can simplify it. +>Якщо ви часто пишете такий код, пакет [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) +може спростити його. -### Can I use inline styles? {#can-i-use-inline-styles} +### Чи можу я використовувати inline стилі? {#can-i-use-inline-styles} -Yes, see the docs on styling [here](/docs/dom-elements.html#style). +Так, дивіться [документ](/docs/dom-elements.html#style) щодо стилізування . -### Are inline styles bad? {#are-inline-styles-bad} +### Чи є inline стилі поганою практикою? {#are-inline-styles-bad} -CSS classes are generally better for performance than inline styles. +Зазвичай CSS класи кращі за продуктивністю ніж inline стилі. -### What is CSS-in-JS? {#what-is-css-in-js} +### Що таке CSS-in-JS? {#what-is-css-in-js} -"CSS-in-JS" refers to a pattern where CSS is composed using JavaScript instead of defined in external files. Read a comparison of CSS-in-JS libraries [here](https://github.com/MicheleBertoli/css-in-js). +"CSS-in-JS" відносяться до патерну, де CSS описується з використанням JavaScript замість описування у зовнішніх файлах. +Ви можете ознайомитись з бібліотеками CSS-in-JS [тут](https://github.com/MicheleBertoli/css-in-js). -_Note that this functionality is not a part of React, but provided by third-party libraries._ React does not have an opinion about how styles are defined; if in doubt, a good starting point is to define your styles in a separate `*.css` file as usual and refer to them using [`className`](/docs/dom-elements.html#classname). +_Зауважте, що цей функціонал не є частиною React, але надається сторонніми бібліотеками._ React не має чіткої точки зору стосовно визначення стилів; якщо ви маєте сумнів, доречним початком може бути визначення ваших стилів в окремому `*.css` файлі з посиланням на них викоростовуючі [`className`](/docs/dom-elements.html#classname). -### Can I do animations in React? {#can-i-do-animations-in-react} +### Чи можу я робити анімації в React? {#can-i-do-animations-in-react} -React can be used to power animations. See [React Transition Group](https://reactcommunity.org/react-transition-group/) and [React Motion](https://github.com/chenglou/react-motion), for example. +React може використовуватися для потужних анімацій. Для прикладів, дивіться [React Transition Group](https://reactcommunity.org/react-transition-group/) та [React Motion](https://github.com/chenglou/react-motion) From eee62a54bee16b5630617be8911ce1cd7edcec98 Mon Sep 17 00:00:00 2001 From: Vladyslav Tereshyn Date: Wed, 27 Feb 2019 21:24:38 +0200 Subject: [PATCH 2/2] React styling --- content/docs/faq-styling.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 5a6e9ff5d..0851a801f 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -8,11 +8,11 @@ category: FAQ ### Як додавати CSS класи до компонентів? {#how-do-i-add-css-classes-to-components} -Передайте строку як `className` проп: +Передайте рядок як проп `className`: ```jsx render() { - return Menu + return Меню } ``` @@ -30,7 +30,7 @@ render() { >Порада > ->Якщо ви часто пишете такий код, пакет [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) +>Якщо ви часто пишете такий код, пакунок [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) може спростити його. ### Чи можу я використовувати inline стилі? {#can-i-use-inline-styles} @@ -46,8 +46,8 @@ render() { "CSS-in-JS" відносяться до патерну, де CSS описується з використанням JavaScript замість описування у зовнішніх файлах. Ви можете ознайомитись з бібліотеками CSS-in-JS [тут](https://github.com/MicheleBertoli/css-in-js). -_Зауважте, що цей функціонал не є частиною React, але надається сторонніми бібліотеками._ React не має чіткої точки зору стосовно визначення стилів; якщо ви маєте сумнів, доречним початком може бути визначення ваших стилів в окремому `*.css` файлі з посиланням на них викоростовуючі [`className`](/docs/dom-elements.html#classname). +_Зауважте, що цей функціонал не є частиною React, але надається сторонніми бібліотеками._ React не має чіткої точки зору стосовно визначення стилів; якщо ви маєте сумнів, гарним початком може бути визначення ваших стилів в окремому `*.css` файлі з посиланням на них використовуючи [`className`](/docs/dom-elements.html#classname). ### Чи можу я робити анімації в React? {#can-i-do-animations-in-react} -React може використовуватися для потужних анімацій. Для прикладів, дивіться [React Transition Group](https://reactcommunity.org/react-transition-group/) та [React Motion](https://github.com/chenglou/react-motion) +React може використовуватися для роботи з анімаціями. Для прикладів, дивіться [React Transition Group](https://reactcommunity.org/react-transition-group/) та [React Motion](https://github.com/chenglou/react-motion)