From feaa3bf688d22fada49d745c429ba9248e344744 Mon Sep 17 00:00:00 2001 From: Polonsky Timofey Date: Sun, 24 Feb 2019 17:52:45 +0300 Subject: [PATCH 1/4] translate faq-styling --- content/docs/faq-styling.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index ddc955e3d..f0e49a5cb 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -1,14 +1,14 @@ --- id: faq-styling -title: Styling and CSS +title: Стили и CSS permalink: docs/faq-styling.html 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: +Обычно CSS классы зависят от пропсов или стейта: ```jsx render() { @@ -28,24 +28,24 @@ render() { } ``` ->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} +### Могу ли я использовать инлайн стили? {#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} +### Инлайн стили это плохо? {#are-inline-styles-bad} -CSS classes are generally better for performance than inline styles. +CSS классы как правило, лучше для производительности, чем инлайн стили. -### 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 853fcea9195b568a71d8fb0a802961a8b83c69f1 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 23:01:46 +0300 Subject: [PATCH 2/4] Apply suggestions from code review Co-Authored-By: T1mofey1 <35445330+T1mofey1@users.noreply.github.com> --- content/docs/faq-styling.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index f0e49a5cb..2b927c74b 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -16,7 +16,7 @@ render() { } ``` -Обычно CSS классы зависят от пропсов или стейта: +Обычно CSS классы зависят от пропсов или состояния: ```jsx render() { @@ -42,7 +42,7 @@ CSS классы как правило, лучше для производите ### Что такое CSS-in-JS? {#what-is-css-in-js} -"CSS-in-JS" относится к паттерну, в котором CSS создается с использованием JavaScript, а не во внешних файлах. Почитайте сравнение CSS-in-JS библиотек [здесь](https://github.com/MicheleBertoli/css-in-js). +"CSS-in-JS" относится к паттерну, в котором CSS создаётся с использованием JavaScript, а не во внешних файлах. Почитайте сравнение CSS-in-JS библиотек [здесь](https://github.com/MicheleBertoli/css-in-js). _Обратите внимание, что эта функциональность не является частью React, но она предоставляется сторонними библиотеками._ React не имеет никакого отношения к тому, как определяются стили. Если у вас есть сомнения, хорошей отправной точкой является определение ваших стилей в отдельном файле `*.css` как обычно, и обращение к ним с помощью [`className`](/docs/dom-elements.html#classname). From ee9a1d1d5633c048d930b86682afe780db48459c Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Mon, 25 Feb 2019 16:19:33 +0300 Subject: [PATCH 3/4] Apply suggestions from code review Co-Authored-By: T1mofey1 <35445330+T1mofey1@users.noreply.github.com> --- content/docs/faq-styling.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 2b927c74b..1747f68b7 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -32,13 +32,13 @@ render() { > >Если вы часто пишите такой код, пакет [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) может упростить его. -### Могу ли я использовать инлайн стили? {#can-i-use-inline-styles} +### Могу ли я использовать встроенные стили? {#can-i-use-inline-styles} -Конечно, смотрите данную документацию [здесь](/docs/dom-elements.html#style). +Конечно, прочитайте [документацию об элементах DOM](/docs/dom-elements.html#style). -### Инлайн стили это плохо? {#are-inline-styles-bad} +### Встроенные стили это плохо? {#are-inline-styles-bad} -CSS классы как правило, лучше для производительности, чем инлайн стили. +CSS классы, как правило, лучше для производительности, чем встроенные стили. ### Что такое CSS-in-JS? {#what-is-css-in-js} From 6be355129c340b4c0e866bc1e96188341a7997b6 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Thu, 28 Feb 2019 01:32:55 +0300 Subject: [PATCH 4/4] faq-styling: various improvements --- content/docs/faq-styling.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 1747f68b7..2d130d06d 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -1,22 +1,22 @@ --- id: faq-styling -title: Стили и CSS +title: Стилизация и CSS permalink: docs/faq-styling.html layout: docs category: FAQ --- -### Как мне добавить CSS классы в компоненты? {#how-do-i-add-css-classes-to-components} +### Как добавить CSS-классы в компоненты? {#how-do-i-add-css-classes-to-components} Передайте в проп `className` строку: ```jsx render() { - return Menu + return Меню } ``` -Обычно CSS классы зависят от пропсов или состояния: +Обычно CSS-классы зависят от пропсов или состояния: ```jsx render() { @@ -24,28 +24,28 @@ render() { if (this.props.isActive) { className += ' menu-active'; } - return Menu + return Меню } ``` >Совет > ->Если вы часто пишите такой код, пакет [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) может упростить его. +>Если вы часто пишите похожий код, то пакет [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) поможет упростить его. -### Могу ли я использовать встроенные стили? {#can-i-use-inline-styles} +### Как можно использовать встроенные стили? {#can-i-use-inline-styles} Конечно, прочитайте [документацию об элементах DOM](/docs/dom-elements.html#style). -### Встроенные стили это плохо? {#are-inline-styles-bad} +### Встроенные стили — это плохо? {#are-inline-styles-bad} -CSS классы, как правило, лучше для производительности, чем встроенные стили. +CSS-классы, как правило, лучше для производительности, чем встроенные стили. ### Что такое CSS-in-JS? {#what-is-css-in-js} -"CSS-in-JS" относится к паттерну, в котором CSS создаётся с использованием JavaScript, а не во внешних файлах. Почитайте сравнение CSS-in-JS библиотек [здесь](https://github.com/MicheleBertoli/css-in-js). +«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? {#can-i-do-animations-in-react} React может использоваться для создания крутых анимаций! В качестве примера посмотрите библиотеки [React Transition Group](https://reactcommunity.org/react-transition-group/) и [React Motion](https://github.com/chenglou/react-motion).