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/docs/reference-glossary.md
+15-15Lines changed: 15 additions & 15 deletions
Original file line number
Diff line number
Diff line change
@@ -12,30 +12,30 @@ permalink: docs/glossary.html
12
12
Одностраничное приложение — это приложение, которое состоит из единственной HTML-страницы и прочих ресурсов (таких как JavaScript и CSS), необходимых для успешной работы. Любое взаимодействие с главной или последующими ей страницами не требует контакта с сервером, что значит — страница не требует перезагрузки.
13
13
14
14
15
-
Хоть React и позволяет создавать одностраничные приложения, это совсем не обязательно. React можно использовать для совершенствования небольших частей уже существующих сайтов, чтобы придать дополнительную интерактивность. Код, написанный в React, может мирно сосуществовать с разметкой отрендеренной на сервере с помощью PHP, или с любыми другими фронтенд-библиотеками. По сути, именно так React используется для Facebook.
15
+
Хоть React и позволяет создавать одностраничные приложения, это совсем не обязательно. React можно использовать для совершенствования небольших частей уже существующих сайтов, чтобы придать дополнительную интерактивность. Код, написанный в React, может мирно сосуществовать с разметкой отрендеренной на сервере с помощью PHP, или с любыми другими фронтенд-библиотеками. По сути, именно так React и используется в Facebook.
16
16
17
17
## ES6, ES2015, ES2016 и т.д. {#es6-es2015-es2016-etc}
18
18
19
19
Все эти акронимы относятся к самым последним версиям спецификации стандарта ECMAScript, реализацией которого является язык программирования JavaScript. Версия ES6 (также известная как ES2015) включает много дополнений к предыдущим версиям: стрелочные функции, классы, шаблонные строки, ключевые слова `let` и `const`. Более подробно о конкретных версиях вы можно узнать [тут](https://ru.wikipedia.org/wiki/ECMAScript).
20
20
21
21
## Компиляторы {#compilers}
22
22
23
-
Компиляторы JavaScript преобразует и возвращает изменённый код. Самый известный случай использования — преобразование синтаксиса ES6 для поддержки в старых браузерах. В работе с React чаще всего используется [Babel](https://babeljs.io/)
23
+
Компилятор JavaScript принимает на вход JavaScript код, преобразует его и возвращает в изменённом формате. Самый известный случай использования — преобразование синтаксиса ES6 для поддержки в старых браузерах. При работе с React чаще всего используется [Babel](https://babeljs.io/)
24
24
25
25
## Бандлеры {#bundlers}
26
26
27
-
Бандлеры совмещают отдельные модули JavaScript и CSS для лучшей оптимизации в браузерах. В работе с React чаще всего используются [Webpack](https://webpack.js.org/) и [Browserify](http://browserify.org/).
27
+
Бандлеры берут отдельные модули JavaScript и CSS и соединяют их в меньшее количество файлов, которые оптимзированы под браузеры. В работе с React чаще всего используются [Webpack](https://webpack.js.org/) и [Browserify](http://browserify.org/).
28
28
29
29
## Менеджер пакетов {#package-managers}
30
30
31
-
Менеджер пакетов — это инструмент позволяющий управлять зависимостями в вашем проекте. [npm](https://www.npmjs.com/) и [Yarn](https://yarnpkg.com/) — менеджеры пакетов наиболее используемые в приложениях React. Оба являются клиентами реестра пакетов npm.
31
+
Менеджер пакетов — это инструмент, позволяющий управлять зависимостями в вашем проекте. [npm](https://www.npmjs.com/) и [Yarn](https://yarnpkg.com/) — менеджеры пакетов наиболее используемые в приложениях React. Оба являются клиентами реестра пакетов npm.
32
32
33
33
## CDN {#cdn}
34
34
Сеть доставки содержимого (англ. Content Delivery Network, CDN) — это сетевая инфраструктура, распространяющая кешированный, статический контент через сеть серверов по всему миру.
35
35
36
36
## JSX {#jsx}
37
37
38
-
JSX — расширение синтаксиса JavaScript, которое выглядит как шаблон, но имеет полную силу языка. В результате компиляции JSX и вызова `React.createElement()` возникают простые объекты — «React-элементы». Чтобы ознакомиться с введением в JSX, [обратитесь к соответствующему разделу документации](/docs/introducing-jsx.html), а более подробную информацию про JSX вы можете найти [здесь](/docs/jsx-in-depth.html).
38
+
JSX — расширение синтаксиса JavaScript. Этот синтаксис выглядит как язык шаблонов, но наделён всеми языковыми возможностями JavaScript. В результате компиляции JSX и вызова `React.createElement()` возникают простые объекты — «React-элементы». Чтобы ознакомиться с введением в JSX, [обратитесь к соответствующему разделу документации](/docs/introducing-jsx.html), а более подробную информацию про JSX вы можете найти [здесь](/docs/jsx-in-depth.html).
39
39
40
40
React DOM использует стиль именования camelCase для свойств вместо обычных имён HTML-атрибутов. Например, в JSX атрибут `tabindex` станет `tabIndex`. В то время как атрибут `class` записывается как `className`, поскольку слово `class` уже зарезервировано в JavaScript:
41
41
@@ -59,7 +59,7 @@ const element = <h1>Hello, world</h1>;
React-компоненты — это маленькие, повторно используемые части кода, которые возвращают React-элементы для отображения на странице.
62
-
Самый простой React-компонент — это простая функция JavaScript, которая возвращает элементы React:
62
+
Самый простой React-компонент — это простая функция JavaScript, которая возвращает элементы React:
63
63
64
64
```js
65
65
functionWelcome(props) {
@@ -77,7 +77,7 @@ class Welcome extends React.Component {
77
77
}
78
78
```
79
79
80
-
Компоненты можно разбить на отдельные части в зависимости от выполняемой функции и использовать внутри других компонентов. Компоненты могут возвращать другие компоненты, массивы, строки и числа. Если какая-то часть интерфейса повторяется многократно (`Button`, `Panel`, `Avatar`) или сама по себе достаточно сложная (`App`, `FeedStory`, `Comment`), имеет смысл вынести её в независимый компонент. Имена компонентов всегда должны начинатся с заглавной буквы (`<Wrapper/>`, а **не** `<wrapper/>`). За более детальной информацией по рендерингу компонентов [обратитесь к соответствующему разделу документации](/docs/components-and-props.html#rendering-a-component).
80
+
Компоненты можно разбить на отдельные части в зависимости от выполняемой функции и использовать внутри других компонентов. Компоненты могут возвращать другие компоненты, массивы, строки и числа. Если какая-то часть интерфейса повторяется многократно (`Button`, `Panel`, `Avatar`) или сама по себе достаточно сложная (`App`, `FeedStory`, `Comment`), имеет смысл вынести её в независимый компонент. Имена компонентов всегда должны начинатся с заглавной буквы (`<Wrapper/>`, а **не** `<wrapper/>`). За более детальной информацией о рендеринге компонентов [обратитесь к соответствующему разделу документации](/docs/components-and-props.html#rendering-a-component).
Компонент нуждается в `state` (состоянии), когда данные в нем со временем изменяются. Например, компоненту `Checkbox` может понадобится состояние `isChecked`, а компоненту `NewsFeed` необходимо отслеживать посты при помощи состояния `fetchedPosts`.
122
+
Компонент нуждается в `state`, когда данные в нём со временем изменяются. Например, компоненту `Checkbox` может понадобится состояние `isChecked`, а компоненту `NewsFeed` необходимо отслеживать посты при помощи состояния `fetchedPosts`.
123
123
124
124
Самая большая разница между `state` и `props` состоит в том, что `props` передаются от родителя потомку, а `state` управляется самим компонентом. Компонент не может воздействовать на `props`, но может изменять `state`. Для этого он должен вызвать `this.setState()`. Только классовые компоненты могут иметь состояние.
125
125
126
126
127
-
Для каждой отдельной части изменяемых данных должен существовать только один компонент, который «регулирует» изменение состояния. Не пытайтесь синхронизировать сосотояния двух разных компонентов. Вместо этого [поднимите](/docs/lifting-state-up.html) их до ближайшего компонента-родителя и передайте через пропсы необходимым дочерним компонентам.
127
+
Для каждой отдельной части изменяемых данных должен существовать только один компонент, который «управляет» изменением состояния. Не пытайтесь синхронизировать состояния двух разных компонентов. Вместо этого [поднимите оба этих состояния](/docs/lifting-state-up.html) до ближайшего компонента-родителя и передайте через пропсы необходимым дочерним компонентам.
@@ -135,11 +135,11 @@ class Welcome extends React.Component {
135
135
136
136
В React существует два различных подхода для управления формами.
137
137
138
-
Элемент формы input, управляемый React — это *контролируемый компонент*. Когда пользователь вводит данные в управляемый компонент, обработчик события изменений приходит в действие, и ваш код определяет допустим ли ввод (повторно рендерясь с обновленныем значением). Если повторный рендеринг не происходит, елемент формы остаётся без изменений.
138
+
Элемент формы input, управляемый React — это *контролируемый компонент*. Когда пользователь вводит данные в управляемый компонент, обработчик события изменений приходит в действие, и ваш код определяет допустим ли ввод (повторно рендерясь с обновленныем значением). Если повторный рендеринг не происходит, элемент формы остаётся без изменений.
139
139
140
140
*Неконтролируемый компонент* работает как обычный элемент формы вне React. Когда пользователь вводит данные в поле формы (поле ввода, выпадающий список и т.д.), обновлённая информация отображается без помощи React. Однако, это также значит, что некоторые значения не могут быть применены.
141
141
142
-
В большинстве случаев вам стоит использовать управляемые компоненты.
142
+
В большинстве случаев вам следует использовать управляемые компоненты.
143
143
144
144
145
145
## [Ключи](/docs/lists-and-keys.html) {#keys}
@@ -149,13 +149,13 @@ class Welcome extends React.Component {
149
149
Ключи внутри массива должны быть уникальными только среди своих соседних элементов. Им не нужно быть уникальными во всём приложении или даже в общем компоненте.
150
150
151
151
152
-
Не используйте что-либо по типу `Math.random()` как ключи. Необходимо создавать для ключей «постоянные идентификаторы» при повторных рендерингах, чтобы React мог определить когда элементы добавлены, удалены или пересортированы. В идеале, ключи должны соответствовать уникальному и постоянному идентификатору поступающему из ваших данных, такому как`post.id`.
152
+
Не используйте что-либо наподобие `Math.random()` как ключи. Необходимо создавать для ключей «стабильные идентификаторы» при повторных рендерингах, чтобы React мог определить когда элементы добавлены, удалены или переупорядочены. В идеале, ключи должны соответствовать уникальному и постоянному идентификатору поступающему из ваших данных, например`post.id`.
153
153
154
154
## [Рефы](/docs/refs-and-the-dom.html) {#refs}
155
155
156
-
React поддерживает особый атрибут, который можно добавить к любому компоненту. Атрибут `ref` может быть объектом, созданным при помощи [функции `React.createRef()`](/docs/react-api.html#reactcreateref) или колбэком, либо же строкой (устаревшее API). Когда атрибут `ref` выступает в роли колбэка, функция получает основной DOM-элемент или экземпляр класса (в зависимости от типа элемента) в качестве аргумента. Это позволяет вам иметь прямой доступ к элементу DOM или экземпляру компонента.
156
+
React поддерживает особый атрибут, который можно прикрепить к любому компоненту. Атрибут `ref` может быть объектом, созданным при помощи [функции `React.createRef()`](/docs/react-api.html#reactcreateref) или колбэком, либо же строкой (устаревшее API). Когда в роли атрибута `ref` выступает колбэк, функция получает DOM-элемент, лежащий в основе компонента, или экземпляр класса (в зависимости от типа элемента) в качестве аргумента. Это позволяет вам иметь прямой доступ к элементу DOM или экземпляру компонента.
157
157
158
-
Используйте рефы в исключительных случаях. Если вы часто обращаетесь к рефам за помощью, ознакомьтесь со [снисходящим потоком данных](/docs/lifting-state-up.html).
158
+
Используйте рефы в исключительных случаях. Если вы часто обращаетесь к рефам за помощью, ознакомьтесь с [нисходящим потоком данных](/docs/lifting-state-up.html).
0 commit comments