You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/blog/2019-02-23-is-react-translated-yet.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -43,7 +43,7 @@ We started of with an initial trial period of three languages: Spanish, Japanese
43
43
44
44
After the trial period, we were ready to accept more languages. I created [a script](https://github.com/reactjs/reactjs.org-translation/blob/master/scripts/create.js) to automate the creation of the new language repo, and a site, [Is React Translated Yet?](https://isreacttranslatedyet.com), to track progress on the different translations. We started *10* new translations on our first day alone!
45
45
46
-
Because of the automation, the rest of the maintance went mostly smoothly. We eventually created a [Slack channel](https://rt-slack-invite.herokuapp.com) to make it easier for translators to share information, and I released a guide solidifying the [responsibilities of maintainers](https://github.com/reactjs/reactjs.org-translation/blob/master/maintainer-guide.md). Allowing translators to talk with each other was a great boon -- for example, the Arabic, Persian, and Hebrew translations were able to talk to each other in order to get [right-to-left text](https://en.wikipedia.org/wiki/Right-to-left) working!
46
+
Because of the automation, the rest of the maintenance went mostly smoothly. We eventually created a [Slack channel](https://rt-slack-invite.herokuapp.com) to make it easier for translators to share information, and I released a guide solidifying the [responsibilities of maintainers](https://github.com/reactjs/reactjs.org-translation/blob/master/maintainer-guide.md). Allowing translators to talk with each other was a great boon -- for example, the Arabic, Persian, and Hebrew translations were able to talk to each other in order to get [right-to-left text](https://en.wikipedia.org/wiki/Right-to-left) working!
Copy file name to clipboardExpand all lines: content/docs/addons-test-utils.md
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 с npm
15
15
16
16
## Обзор {#overview}
17
17
18
-
`ReactTestUtils` позволяет легко тестировать React-компоненты в любом тестовом фреймворке на ваш выбор. В Facebook мы используем [Jest](https://facebook.github.io/jest/) для гладкого тестирования JavaScript-кода. Если хотите обучится Jest, ознакомьтесь с [руководством по React](https://jestjs.io/docs/en/tutorial-react).
18
+
`ReactTestUtils` позволяет легко тестировать React-компоненты в любом тестовом фреймворке на ваш выбор. В Facebook мы используем [Jest](https://facebook.github.io/jest/) для гладкого тестирования JavaScript-кода. Если хотите обучиться Jest, ознакомьтесь с [руководством по React](https://jestjs.io/docs/en/tutorial-react).
19
19
20
20
> Примечание:
21
21
>
@@ -53,7 +53,7 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 с npm
53
53
Допустим, у нас есть компонент `Counter`:
54
54
55
55
```js
56
-
classAppextendsReact.Component {
56
+
classCounterextendsReact.Component {
57
57
constructor(props) {
58
58
super(props);
59
59
this.state= {count:0};
@@ -103,7 +103,7 @@ afterEach(() => {
103
103
container = null;
104
104
});
105
105
106
-
it('рендер и обновление счетчика', () => {
106
+
it('рендер и обновление счётчика', () => {
107
107
// Тестируем первый рендер и метод componentDidMount
108
108
act(() => {
109
109
ReactDOM.render(<Counter />, container);
@@ -139,7 +139,7 @@ mockComponent(
139
139
140
140
> Примечание:
141
141
>
142
-
> API-метод `mockComponent()` объявлен устаревшим. Поэтому вместо него рекомендуется использоваться[поверхностный рендеринг](/docs/shallow-renderer.html) или [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock).
142
+
> API-метод `mockComponent()` объявлен устаревшим. Поэтому вместо него рекомендуется использовать[поверхностный рендеринг](/docs/shallow-renderer.html) или [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock).
When Webpack comes across this syntax, it automatically starts code-splitting
104
104
your app. If you're using Create React App, this is already configured for you
105
-
and you can [start using it](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) immediately. It's also supported
105
+
and you can [start using it](https://facebook.github.io/create-react-app/docs/code-splitting) immediately. It's also supported
106
106
out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import).
107
107
108
108
If you're setting up Webpack yourself, you'll probably want to read Webpack's
Copy file name to clipboardExpand all lines: content/docs/composition-vs-inheritance.md
+30-30Lines changed: 30 additions & 30 deletions
Original file line number
Diff line number
Diff line change
@@ -1,22 +1,22 @@
1
1
---
2
2
id: composition-vs-inheritance
3
-
title: Composition vs Inheritance
3
+
title: Композиция против наследования
4
4
permalink: docs/composition-vs-inheritance.html
5
5
redirect_from:
6
6
- "docs/multiple-components.html"
7
7
prev: lifting-state-up.html
8
8
next: thinking-in-react.html
9
9
---
10
10
11
-
React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.
11
+
React имеет мощную модель композиции, поэтому для переиспользования кода между компонентами мы рекомендуем использовать композицию вместо наследования.
12
12
13
-
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.
13
+
В этой главе мы рассмотрим несколько проблем, которые новички в React решают наследованием и попробуем решить их с помощью композиции.
14
14
15
-
## Containment {#containment}
15
+
## Вставка {#containment}
16
16
17
-
Some components don't know their children ahead of time. This is especially common for components like`Sidebar`or`Dialog` that represent generic "boxes".
17
+
Некоторые компоненты не знают своих потомков заранее. Это особенно характерно для таких компонентов, как`Sidebar`или`Dialog`, которые представляют из себя как бы «коробку», в которую можно что-то положить.
18
18
19
-
We recommend that such components use the special`children` prop to pass children elements directly into their output:
19
+
Для таких компонентов мы рекомендуем использовать специальный проп`children`, который передаст дочерние элементы сразу на вывод:
20
20
21
21
```js{4}
22
22
function FancyBorder(props) {
@@ -28,28 +28,28 @@ function FancyBorder(props) {
28
28
}
29
29
```
30
30
31
-
This lets other components pass arbitrary children to them by nesting the JSX:
31
+
Это позволит передать компоненту произвольные дочерние элементы, вложив их в JSX:
32
32
33
33
```js{4-9}
34
34
function WelcomeDialog() {
35
35
return (
36
36
<FancyBorder color="blue">
37
37
<h1 className="Dialog-title">
38
-
Welcome
38
+
Добро пожаловать
39
39
</h1>
40
40
<p className="Dialog-message">
41
-
Thank you for visiting our spacecraft!
41
+
Спасибо, что посетили наш космический корабль!
42
42
</p>
43
43
</FancyBorder>
44
44
);
45
45
}
46
46
```
47
47
48
-
**[Try it on CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)**
48
+
**[Посмотреть на CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)**
49
49
50
-
Anything inside the `<FancyBorder>` JSX tag gets passed into the `FancyBorder`component as a `children` prop. Since`FancyBorder`renders`{props.children}`inside a `<div>`, the passed elements appear in the final output.
50
+
Всё, что находится внутри JSX-тега `<FancyBorder>`, передаётся в компонент `FancyBorder`через проп `children`. Поскольку`FancyBorder`рендерит`{props.children}`внутри `<div>`, все переданные элементы отображаются в конечном выводе.
51
51
52
-
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`:
52
+
Иногда в компоненте необходимо иметь несколько мест для вставки. В таком случае можно придумать свой формат, а не использовать`children`:
53
53
54
54
```js{5,8,18,21}
55
55
function SplitPane(props) {
@@ -78,15 +78,15 @@ function App() {
78
78
}
79
79
```
80
80
81
-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010)
81
+
[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010)
82
82
83
-
React elements like `<Contacts />`and`<Chat />`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.
83
+
Такие React-элементы, как `<Contacts />`и`<Chat />`являются просто объектами, поэтому их можно передать в виде пропсов, как и любые другие данные. Этот подход может напоминать понятие «слотов» в других библиотеках, однако, в React нет никаких ограничений на то, что можно передать в качестве пропсов.
84
84
85
-
## Specialization {#specialization}
85
+
## Специализация {#specialization}
86
86
87
-
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`.
87
+
Некоторые компоненты можно рассматривать как «частные случаи» других компонентов. Например, `WelcomeDialog`может быть частным случаем`Dialog`.
88
88
89
-
In React, this is also achieved by composition, where a more "specific" component renders a more "generic" one and configures it with props:
89
+
В React это можно сделать через композицию, где «частный» вариант компонента рендерит более «общий» и настраивает его с помощью пропсов:
90
90
91
91
```js{5,8,16-18}
92
92
function Dialog(props) {
@@ -105,15 +105,15 @@ function Dialog(props) {
105
105
function WelcomeDialog() {
106
106
return (
107
107
<Dialog
108
-
title="Welcome"
109
-
message="Thank you for visiting our spacecraft!" />
108
+
title="Добро пожаловать"
109
+
message="Спасибо, что посетили наш космический корабль!" />
110
110
);
111
111
}
112
112
```
113
113
114
-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010)
114
+
[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010)
115
115
116
-
Composition works equally well for components defined as classes:
116
+
Композиция хорошо работает и для компонентов, определённых через классы:
117
117
118
118
```js{10,27-31}
119
119
function Dialog(props) {
@@ -140,12 +140,12 @@ class SignUpDialog extends React.Component {
140
140
141
141
render() {
142
142
return (
143
-
<Dialog title="Mars Exploration Program"
144
-
message="How should we refer to you?">
143
+
<Dialog title="Программа исследования Марса"
144
+
message="Как к вам обращаться?">
145
145
<input value={this.state.login}
146
146
onChange={this.handleChange} />
147
147
<button onClick={this.handleSignUp}>
148
-
Sign Me Up!
148
+
Запишите меня!
149
149
</button>
150
150
</Dialog>
151
151
);
@@ -156,17 +156,17 @@ class SignUpDialog extends React.Component {
156
156
}
157
157
158
158
handleSignUp() {
159
-
alert(`Welcome aboard, ${this.state.login}!`);
159
+
alert(`Добро пожаловать на борт, ${this.state.login}!`);
160
160
}
161
161
}
162
162
```
163
163
164
-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010)
164
+
[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010)
165
165
166
-
## So What About Inheritance? {#so-what-about-inheritance}
166
+
## Так что насчёт наследования? {#so-what-about-inheritance}
167
167
168
-
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.
168
+
В Facebook мы используем React в тысячах компонентов, и не находили случаев, когда бы рекомендовали создавать иерархии наследования компонентов.
169
169
170
-
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.
170
+
Пропсы и композиция дают вам всю гибкость, необходимую для настройки внешнего вида и поведения компонента явным и безопасным способом. Помните, что компоненты могут принимать произвольные пропсы, включая примитивные значения, React-элементы или функции.
171
171
172
-
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.
172
+
Если вы хотите переиспользовать не связанную с внешним видом функциональность между компонентами, извлеките её в отдельный JavaScript-модуль. Импортируйте его в компонент и используйте эту функцию, объект или класс, не расширяя их.
0 commit comments