From 304a3c0e248307a4d83851cbf13549a5388c0228 Mon Sep 17 00:00:00 2001 From: Marichka Tsiuriak Date: Wed, 27 Feb 2019 10:42:52 -0500 Subject: [PATCH 1/5] translation of reference-glossary --- content/docs/reference-glossary.md | 121 +++++++++++++++-------------- 1 file changed, 64 insertions(+), 57 deletions(-) diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md index 280869512..ed79fb7f8 100644 --- a/content/docs/reference-glossary.md +++ b/content/docs/reference-glossary.md @@ -1,43 +1,45 @@ --- id: glossary -title: Glossary of React Terms +title: Словарь терминов React layout: docs category: Reference permalink: docs/glossary.html --- -## Single-page Application {#single-page-application} +## Одностраничное приложение {#single-page-application} -A single-page application is an application that loads a single HTML page and all the necessary assets (such as JavaScript and CSS) required for the application to run. Any interactions with the page or subsequent pages do not require a round trip to the server which means the page is not reloaded. +Одностраничное приложение — это приложение, которое состоит из единственной HTML страницы и прочих средств (таких как JavaScript и CSS), необходимых для успешной работы. Любое взаимодействие с главной или последующими ей страницами не требует контакта с сервером, что значит — страница не требует перезагрузки. -Though you may build a single-page application in React, it is not a requirement. React can also be used for enhancing small parts of existing websites with additional interactivity. Code written in React can coexist peacefully with markup rendered on the server by something like PHP, or with other client-side libraries. In fact, this is exactly how React is being used at Facebook. -## ES6, ES2015, ES2016, etc {#es6-es2015-es2016-etc} +Хоть React и позволяет создавать одностраничные приложения, это совсем не обязательно. React можно использовать для совершенствования небольших частей уже существующих сайтов, чтобы придать дополнительную интерактивность. Код, написанный в React, может мирно сосуществовать с разметкой отрендеренной на сервере с помощью PHP, или с любыми другими фронтендовыми библиотеками. По сути, именно так React используется для Facebook. -These acronyms all refer to the most recent versions of the ECMAScript Language Specification standard, which the JavaScript language is an implementation of. The ES6 version (also known as ES2015) includes many additions to the previous versions such as: arrow functions, classes, template literals, `let` and `const` statements. You can learn more about specific versions [here](https://en.wikipedia.org/wiki/ECMAScript#Versions). +## ES6, ES2015, ES2016, и т.д. {#es6-es2015-es2016-etc} -## Compilers {#compilers} +Все эти акронимы относяться к самым последним версиям спецификации стандарта ECMAScript — языка программирования лежащего в основе JavaScript. Версия ES6 (также известная как ES2015) включает много дополнений к предыдущим версиям: стрелочную функцию, классы, шаблонные строки, переменные `let` и `const`. Более подробно о конкретных версиях вы можно узнать [тут](https://ru.wikipedia.org/wiki/ECMAScript). -A JavaScript compiler takes JavaScript code, transforms it and returns JavaScript code in a different format. The most common use case is to take ES6 syntax and transform it into syntax that older browsers are capable of interpreting. [Babel](https://babeljs.io/) is the compiler most commonly used with React. +## Компиляторы {#compilers} -## Bundlers {#bundlers} +Компайлер JavaScript преобразует и возвращает изменённый код. Самый известный случай использования — преобразование синтаксиса ES6 для поддержки в старых браузерах. В работе с React чаще всего используется [Babel](https://babeljs.io/) -Bundlers take JavaScript and CSS code written as separate modules (often hundreds of them), and combine them together into a few files better optimized for the browsers. Some bundlers commonly used in React applications include [Webpack](https://webpack.js.org/) and [Browserify](http://browserify.org/). +## Бандлеры {#bundlers} -## Package Managers {#package-managers} +Бандлеры совмещают отдельные модули JavaScript и CSS для лучшей оптимизации в браузерах. В работе с React чаще всего используются [Webpack](https://webpack.js.org/) и [Browserify](http://browserify.org/). + +## Менеджер пакетов {#package-managers} + +Менеджер пакетов — это инструмент позволяющий управлять зависимостями в вашем проекте. [npm](https://www.npmjs.com/) и [Yarn](http://yarnpkg.com/) — менеджеры пакетов наиболее используемые в приложениях React. Оба являются клиентам реестра пакетов npm. -Package managers are tools that allow you to manage dependencies in your project. [npm](https://www.npmjs.com/) and [Yarn](http://yarnpkg.com/) are two package managers commonly used in React applications. Both of them are clients for the same npm package registry. -## CDN {#cdn} -CDN stands for Content Delivery Network. CDNs deliver cached, static content from a network of servers across the globe. +## CDN {#cdn} +Сеть доставки содержимого (англ. Content Delivery Network, CDN) — это сетевая инфраструктура, распространяющая кэшированный, статически контент через сеть серверов по всему миру. ## JSX {#jsx} -JSX is a syntax extension to JavaScript. It is similar to a template language, but it has full power of JavaScript. JSX gets compiled to `React.createElement()` calls which return plain JavaScript objects called "React elements". To get a basic introduction to JSX [see the docs here](/docs/introducing-jsx.html) and find a more in-depth tutorial on JSX [here](/docs/jsx-in-depth.html). +JSX — расширение синтаксиса JavaScript, которое выглядит как шаблон, но имеет полную силу языка. В результате компиляции JSX и вызова `React.createElement()` возникают простые объекты — "элементы React". Чтобы ознакомиться с введением в JSX, [обратитесь к этой документации](/docs/introducing-jsx.html), более подробную информацию вы можете найти [здесь](/docs/jsx-in-depth.html). -React DOM uses camelCase property naming convention instead of HTML attribute names. For example, `tabindex` becomes `tabIndex` in JSX. The attribute `class` is also written as `className` since `class` is a reserved word in JavaScript: +React DOM использует camelCase стиль именования свойств вместо обычных имён HTML атрибутов. Например, в JSX `tabindex` становится `tabIndex`, а атрибут `class` становится `className` поскольку слово `class` уже зарезервировано в JavaScript: ```js const name = 'Clementine'; @@ -47,19 +49,19 @@ ReactDOM.render( ); ``` -## [Elements](/docs/rendering-elements.html) {#elements} - -React elements are the building blocks of React applications. One might confuse elements with a more widely known concept of "components". An element describes what you want to see on the screen. React elements are immutable. +## [Элементы](/docs/rendering-elements.html) {#elements} +Элементы React — это составляющие блоки React-приложений. Их можно перепутать с более известной концепцией «компонентов», но в отличии от компонента, элемент описывает то, что вы хотите увидеть на экране. Элементы React иммутабельны. ```js const element =

Hello, world

; ``` -Typically, elements are not used directly, but get returned from components. +Обычно, элементы не используются напрямую, а возвращаются компонентами. -## [Components](/docs/components-and-props.html) {#components} +## [Компоненты](/docs/components-and-props.html) {#components} -React components are small, reusable pieces of code that return a React element to be rendered to the page. The simplest version of React component is a plain JavaScript function that returns a React element: +React компоненты — это маленькие, повторно используемые части кода, которые возвращают React елементы для отображения на странице. +Самый простой компонент React — это простая JavaScript функция, которая возвращает елементы React: ```js function Welcome(props) { @@ -67,7 +69,7 @@ function Welcome(props) { } ``` -Components can also be ES6 classes: +Компоненты могуть быть классами ES6: ```js class Welcome extends React.Component { @@ -77,30 +79,29 @@ class Welcome extends React.Component { } ``` -Components can be broken down into distinct pieces of functionality and used within other components. Components can return other components, arrays, strings and numbers. A good rule of thumb is that if a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be a reusable component. Component names should also always start with a capital letter (`` **not** ``). See [this documentation](/docs/components-and-props.html#rendering-a-component) for more information on rendering components. +Компоненты можно разбить на отдельные части в зависимости от выполняемой функции и использовать внутри других компонентов. Компоненты могут возвращать другие компоненты, массивы, строки и числа. Если какая-то часть интерфейса повторяется многократно (`Button`, `Panel`, `Avatar`) или сама по себе достаточно сложная (`App`, `FeedStory`, `Comment`), имеет смысл вынести её в независимый компонент. Имена компонентов всегда должны начинатся с заглавной буквы (`` **не** ``). За более детальной информацией по рендерингу компонентов [обратитесь к этой документации](/docs/components-and-props.html#rendering-a-component). -### [`props`](/docs/components-and-props.html) {#props} +### [`пропсы`](/docs/components-and-props.html) {#props} -`props` are inputs to a React component. They are data passed down from a parent component to a child component. +`пропсы` — это входные данные компонентов React, передаваемые от компонента-родителя дочернему компоненту. -Remember that `props` are readonly. They should not be modified in any way: +Помните, `пропсы` предназначены только для чтения. Ни в каком случае их не следует менять: ```js -// Wrong! +// Неправильно! props.number = 42; ``` - -If you need to modify some value in response to user input or a network response, use `state` instead. +Если вам нужно поменять значение в ответ на пользовательский ввод или ответ сервера, используйте `состояние`. ### `props.children` {#propschildren} -`props.children` is available on every component. It contains the content between the opening and closing tags of a component. For example: +`props.children` доступны каждому компоненту. Это контент между открывающим и закрывающим тегом компонента. Например: ```js Hello world! ``` -The string `Hello world!` is available in `props.children` in the `Welcome` component: +Строка `Hello world!` доступна в `props.children` в компоненте `Welcome`: ```js function Welcome(props) { @@ -108,7 +109,7 @@ function Welcome(props) { } ``` -For components defined as classes, use `this.props.children`: +Для компонентов-классов используйте `this.props.children`: ```js class Welcome extends React.Component { @@ -118,49 +119,55 @@ class Welcome extends React.Component { } ``` -### [`state`](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) {#state} +### [`состояние`](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) {#state} + +Компонент нуждается в `состоянии`, когда данные в нем со временем изменяются. Например, компоненту `Checkbox` может понадобится состояние `isChecked`, а компоненту `NewsFeed` необходимо отслеживать посты при помощи состояния `fetchedPosts`. + +Самая большая разница между `состоянием` и `пропсами` состоит в том, что `пропсы` передаются от родителя потомку, а `состояние` управляется самим компонентом. Компонент не может воздействовать на `пропсы`, но может изменять `состояние`. Для этого он должен вызвать `this.setState()`. Только классовые компоненты могут иметь состояние. + + +Для каждой отдельной части изменяемых данных должен существовать только один компонент, который "регулирует" изменение состояния. Не пытайтесь синхронизировать сосотояния двух разных компонентов. Вместо этого, [поднимите](/docs/lifting-state-up.html) их до ближайшего компонента-родителя и передайте через пропсы необходимым дочерним компонентам. + +## [Методы жизненного цикла](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) {#lifecycle-methods} + +Методы жизненного цикла — это настраиваемые функции, которые выполняются на различных этапах жизни компонента. Существуют специальные методы для первоначального рендеринга компонента в DOM ([монтирование](/docs/react-component.html#mounting)), его обновления, размонтирования и удаления. -A component needs `state` when some data associated with it changes over time. For example, a `Checkbox` component might need `isChecked` in its state, and a `NewsFeed` component might want to keep track of `fetchedPosts` in its state. -The most important difference between `state` and `props` is that `props` are passed from a parent component, but `state` is managed by the component itself. A component cannot change its `props`, but it can change its `state`. To do so, it must call `this.setState()`. Only components defined as classes can have state. + ## [Управляемые](/docs/forms.html#controlled-components) и [неуправляемые компоненты](/docs/uncontrolled-components.html) -For each particular piece of changing data, there should be just one component that "owns" it in its state. Don't try to synchronize states of two different components. Instead, [lift it up](/docs/lifting-state-up.html) to their closest shared ancestor, and pass it down as props to both of them. +В React существует два различных подхода для управления формами. -## [Lifecycle Methods](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) {#lifecycle-methods} +Значением элемента формы input под контролем React — это *управляемый компонент*. Когда пользователь вводит данные в управляемый компонент, обработчик события изменений приходит в действие, и ваш код определяет допустим ли ввод (повторно рендерясь с обновленныем значением). Если повторный рендеринг не происходит, елемент формы остаётся без изменений. -Lifecycle methods are custom functionality that gets executed during the different phases of a component. There are methods available when the component gets created and inserted into the DOM ([mounting](/docs/react-component.html#mounting)), when the component updates, and when the component gets unmounted or removed from the DOM. +*Неуправляемый компонент* работает как обычный елемент формы вне React. Когда пользователь вводит данные в поле формы (поле ввода, выпадающий список и т.д.), обновлённая информация отображается без помощи React. Однако, это также значит, что некоторые значения не могут быть применены. - ## [Controlled](/docs/forms.html#controlled-components) vs. [Uncontrolled Components](/docs/uncontrolled-components.html) +В большинстве случаев вам стоит использовать управляемые компоненты. -React has two different approaches to dealing with form inputs. -An input form element whose value is controlled by React is called a *controlled component*. When a user enters data into a controlled component a change event handler is triggered and your code decides whether the input is valid (by re-rendering with the updated value). If you do not re-render then the form element will remain unchanged. +## [Ключи](/docs/lists-and-keys.html) {#keys} -An *uncontrolled component* works like form elements do outside of React. When a user inputs data into a form field (an input box, dropdown, etc) the updated information is reflected without React needing to do anything. However, this also means that you can't force the field to have a certain value. +«Ключ» – это специальный строковый атрибут, который нужно указывать при создании списка элементов. Ключи помогают React определять, какие элементы были изменены, добавлены или удалены. Их необходимо указывать, чтобы React мог сопоставлять элементы массива с течением времени. -In most cases you should use controlled components. +Ключи внутри массива должны быть уникальными только среди своих соседних элементов. Им не нужно быть уникальными во всем приложении или даже в общем компоненте. -## [Keys](/docs/lists-and-keys.html) {#keys} -A "key" is a special string attribute you need to include when creating arrays of elements. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside an array to give the elements a stable identity. +Не передавайте что-либо по типу `Math.random()` через ключи. Важно чтобы ключи имели "стабильное ID" при повторном рендеринге, чтобы React мог определить когда элементы добавлены, удалены или реорганизованы. В идеале, ключи должны соответствовать уникальному и стабильному идентификатору поступающему из ваших данных, такому как post.id`. -Keys only need to be unique among sibling elements in the same array. They don't need to be unique across the whole application or even a single component. +## [Рефы](/docs/refs-and-the-dom.html) {#refs} -Don't pass something like `Math.random()` to keys. It is important that keys have a "stable identity" across re-renders so that React can determine when items are added, removed, or re-ordered. Ideally, keys should correspond to unique and stable identifiers coming from your data, such as `post.id`. +React поддерживает особый атрибут, который можно добавить к любому компоненту. Атрибут `реф` может быть объектом, созданным при помощи [`React.createRef()` function](/docs/react-api.html#reactcreateref) или функцией-колбэком, или строкой (устаревшее API). Когда атрибут `реф` выступает в роли функции-колбэка, функция получает основной DOM элемент или экземпляр класса (в зависимости от типа элемента) в качестве аргумента. Это позволяет вам иметь прямой доступ к элементу DOM или экземпляру компонента. -## [Refs](/docs/refs-and-the-dom.html) {#refs} +Используйте рефы в исключительных случаях. Если вы часто обращаетесь к рефам за помощью, ознакомьтесь со [снисходящим потоком данных](/docs/lifting-state-up.html). -React supports a special attribute that you can attach to any component. The `ref` attribute can be an object created by [`React.createRef()` function](/docs/react-api.html#reactcreateref) or a callback function, or a string (in legacy API). When the `ref` attribute is a callback function, the function receives the underlying DOM element or class instance (depending on the type of element) as its argument. This allows you to have direct access to the DOM element or component instance. -Use refs sparingly. If you find yourself often using refs to "make things happen" in your app, consider getting more familiar with [top-down data flow](/docs/lifting-state-up.html). -## [Events](/docs/handling-events.html) {#events} +## [События](/docs/handling-events.html) {#events} -Handling events with React elements has some syntactic differences: +Обработка событий в React-элементах имеет некоторые синтактические особенности: -* React event handlers are named using camelCase, rather than lowercase. -* With JSX you pass a function as the event handler, rather than a string. +* Обработчики событий в React именуются в стиле camelCase вместо нижнего регистра. +* С JSX вы передаёте функцию как обработчик события вместо строки. -## [Reconciliation](/docs/reconciliation.html) {#reconciliation} +## [Согласование](/docs/reconciliation.html) {#reconciliation} -When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called "reconciliation". +Когда пропсы или состояние компонента изменяются, React сравнивает нововозвращенный и предыдуще отрендеренный элементы, и решает нужно ли обновлять DOM. Этот процесс называется "согласование". From c2ff92b46ba46141da11c239d983045ef16ff1d3 Mon Sep 17 00:00:00 2001 From: "Marichka (Tsiuriak) Offen" <40467112+marichka-offen@users.noreply.github.com> Date: Thu, 28 Feb 2019 11:24:32 -0500 Subject: [PATCH 2/5] Apply suggestions from code review Co-Authored-By: marichka-offen <40467112+marichka-offen@users.noreply.github.com> --- content/docs/reference-glossary.md | 56 +++++++++++++++--------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md index a777ce478..7ea8242b4 100644 --- a/content/docs/reference-glossary.md +++ b/content/docs/reference-glossary.md @@ -9,18 +9,18 @@ permalink: docs/glossary.html ## Одностраничное приложение {#single-page-application} -Одностраничное приложение — это приложение, которое состоит из единственной HTML страницы и прочих средств (таких как JavaScript и CSS), необходимых для успешной работы. Любое взаимодействие с главной или последующими ей страницами не требует контакта с сервером, что значит — страница не требует перезагрузки. +Одностраничное приложение — это приложение, которое состоит из единственной HTML-страницы и прочих ресурсов (таких как JavaScript и CSS), необходимых для успешной работы. Любое взаимодействие с главной или последующими ей страницами не требует контакта с сервером, что значит — страница не требует перезагрузки. -Хоть React и позволяет создавать одностраничные приложения, это совсем не обязательно. React можно использовать для совершенствования небольших частей уже существующих сайтов, чтобы придать дополнительную интерактивность. Код, написанный в React, может мирно сосуществовать с разметкой отрендеренной на сервере с помощью PHP, или с любыми другими фронтендовыми библиотеками. По сути, именно так React используется для Facebook. +Хоть React и позволяет создавать одностраничные приложения, это совсем не обязательно. React можно использовать для совершенствования небольших частей уже существующих сайтов, чтобы придать дополнительную интерактивность. Код, написанный в React, может мирно сосуществовать с разметкой отрендеренной на сервере с помощью PHP, или с любыми другими фронтенд-библиотеками. По сути, именно так React используется для Facebook. -## ES6, ES2015, ES2016, и т.д. {#es6-es2015-es2016-etc} +## ES6, ES2015, ES2016 и т.д. {#es6-es2015-es2016-etc} -Все эти акронимы относяться к самым последним версиям спецификации стандарта ECMAScript — языка программирования лежащего в основе JavaScript. Версия ES6 (также известная как ES2015) включает много дополнений к предыдущим версиям: стрелочную функцию, классы, шаблонные строки, переменные `let` и `const`. Более подробно о конкретных версиях вы можно узнать [тут](https://ru.wikipedia.org/wiki/ECMAScript). +Все эти акронимы относяться к самым последним версиям спецификации стандарта ECMAScript, реализацией которого является язык программирования JavaScript. Версия ES6 (также известная как ES2015) включает много дополнений к предыдущим версиям: стрелочные функции, классы, шаблонные строки, ключевые слова `let` и `const`. Более подробно о конкретных версиях вы можно узнать [тут](https://ru.wikipedia.org/wiki/ECMAScript). ## Компиляторы {#compilers} -Компайлер JavaScript преобразует и возвращает изменённый код. Самый известный случай использования — преобразование синтаксиса ES6 для поддержки в старых браузерах. В работе с React чаще всего используется [Babel](https://babeljs.io/) +Компиляторы JavaScript преобразует и возвращает изменённый код. Самый известный случай использования — преобразование синтаксиса ES6 для поддержки в старых браузерах. В работе с React чаще всего используется [Babel](https://babeljs.io/) ## Бандлеры {#bundlers} @@ -28,16 +28,16 @@ permalink: docs/glossary.html ## Менеджер пакетов {#package-managers} -Менеджер пакетов — это инструмент позволяющий управлять зависимостями в вашем проекте. [npm](https://www.npmjs.com/) и [Yarn](https://yarnpkg.com/) — менеджеры пакетов наиболее используемые в приложениях React. Оба являются клиентам реестра пакетов npm. +Менеджер пакетов — это инструмент позволяющий управлять зависимостями в вашем проекте. [npm](https://www.npmjs.com/) и [Yarn](https://yarnpkg.com/) — менеджеры пакетов наиболее используемые в приложениях React. Оба являются клиентами реестра пакетов npm. ## CDN {#cdn} -Сеть доставки содержимого (англ. Content Delivery Network, CDN) — это сетевая инфраструктура, распространяющая кэшированный, статически контент через сеть серверов по всему миру. +Сеть доставки содержимого (англ. Content Delivery Network, CDN) — это сетевая инфраструктура, распространяющая кешированный, статический контент через сеть серверов по всему миру. ## JSX {#jsx} -JSX — расширение синтаксиса JavaScript, которое выглядит как шаблон, но имеет полную силу языка. В результате компиляции JSX и вызова `React.createElement()` возникают простые объекты — "элементы React". Чтобы ознакомиться с введением в JSX, [обратитесь к этой документации](/docs/introducing-jsx.html), более подробную информацию вы можете найти [здесь](/docs/jsx-in-depth.html). +JSX — расширение синтаксиса JavaScript, которое выглядит как шаблон, но имеет полную силу языка. В результате компиляции JSX и вызова `React.createElement()` возникают простые объекты — «элементы React». Чтобы ознакомиться с введением в JSX, [обратитесь к соответствующему разделу документации](/docs/introducing-jsx.html), а более подробную информацию про JSX вы можете найти [здесь](/docs/jsx-in-depth.html). -React DOM использует camelCase стиль именования свойств вместо обычных имён HTML атрибутов. Например, в JSX `tabindex` становится `tabIndex`, а атрибут `class` становится `className` поскольку слово `class` уже зарезервировано в JavaScript: +React DOM использует стиль именования camelCase для свойств вместо обычных имён HTML-атрибутов. Например, в JSX атрибут `tabindex` станет `tabIndex`. В то время как атрибут `class` записывается как `className`, поскольку слово `class` уже зарезервировано в JavaScript: ```js const name = 'Clementine'; @@ -48,7 +48,7 @@ ReactDOM.render( ``` ## [Элементы](/docs/rendering-elements.html) {#elements} -Элементы React — это составляющие блоки React-приложений. Их можно перепутать с более известной концепцией «компонентов», но в отличии от компонента, элемент описывает то, что вы хотите увидеть на экране. Элементы React иммутабельны. +Элементы React — это составляющие блоки React-приложений. Их можно перепутать с более известной концепцией «компонентов», но в отличие от компонента, элемент описывает то, что вы хотите увидеть на экране. Элементы React иммутабельны. ```js const element =

Hello, world

; @@ -58,8 +58,8 @@ const element =

Hello, world

; ## [Компоненты](/docs/components-and-props.html) {#components} -React компоненты — это маленькие, повторно используемые части кода, которые возвращают React елементы для отображения на странице. -Самый простой компонент React — это простая JavaScript функция, которая возвращает елементы React: +React компоненты — это маленькие, повторно используемые части кода, которые возвращают React-элементы для отображения на странице. +Самый простой компонент React — это простая функция JavaScript, которая возвращает элементы React: ```js function Welcome(props) { @@ -77,19 +77,19 @@ class Welcome extends React.Component { } ``` -Компоненты можно разбить на отдельные части в зависимости от выполняемой функции и использовать внутри других компонентов. Компоненты могут возвращать другие компоненты, массивы, строки и числа. Если какая-то часть интерфейса повторяется многократно (`Button`, `Panel`, `Avatar`) или сама по себе достаточно сложная (`App`, `FeedStory`, `Comment`), имеет смысл вынести её в независимый компонент. Имена компонентов всегда должны начинатся с заглавной буквы (`` **не** ``). За более детальной информацией по рендерингу компонентов [обратитесь к этой документации](/docs/components-and-props.html#rendering-a-component). +Компоненты можно разбить на отдельные части в зависимости от выполняемой функции и использовать внутри других компонентов. Компоненты могут возвращать другие компоненты, массивы, строки и числа. Если какая-то часть интерфейса повторяется многократно (`Button`, `Panel`, `Avatar`) или сама по себе достаточно сложная (`App`, `FeedStory`, `Comment`), имеет смысл вынести её в независимый компонент. Имена компонентов всегда должны начинатся с заглавной буквы (``, а **не** ``). За более детальной информацией по рендерингу компонентов [обратитесь к соответствующему разделу документации](/docs/components-and-props.html#rendering-a-component). -### [`пропсы`](/docs/components-and-props.html) {#props} +### [`props`](/docs/components-and-props.html) {#props} -`пропсы` — это входные данные компонентов React, передаваемые от компонента-родителя дочернему компоненту. +`props` (пропсы) — это входные данные компонентов React, передаваемые от компонента-родителя дочернему компоненту. -Помните, `пропсы` предназначены только для чтения. Ни в каком случае их не следует менять: +Помните, `props` предназначены только для чтения. Ни в каком случае их не следует изменять: ```js // Неправильно! props.number = 42; ``` -Если вам нужно поменять значение в ответ на пользовательский ввод или ответ сервера, используйте `состояние`. +Если вам нужно поменять значение в ответ на пользовательский ввод или ответ сервера, используйте `state` (состояние). ### `props.children` {#propschildren} @@ -107,7 +107,7 @@ function Welcome(props) { } ``` -Для компонентов-классов используйте `this.props.children`: +Для классовых компонентов используйте `this.props.children`: ```js class Welcome extends React.Component { @@ -117,27 +117,27 @@ class Welcome extends React.Component { } ``` -### [`состояние`](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) {#state} +### [`state`](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) {#state} -Компонент нуждается в `состоянии`, когда данные в нем со временем изменяются. Например, компоненту `Checkbox` может понадобится состояние `isChecked`, а компоненту `NewsFeed` необходимо отслеживать посты при помощи состояния `fetchedPosts`. +Компонент нуждается в `state` (состоянии), когда данные в нем со временем изменяются. Например, компоненту `Checkbox` может понадобится состояние `isChecked`, а компоненту `NewsFeed` необходимо отслеживать посты при помощи состояния `fetchedPosts`. -Самая большая разница между `состоянием` и `пропсами` состоит в том, что `пропсы` передаются от родителя потомку, а `состояние` управляется самим компонентом. Компонент не может воздействовать на `пропсы`, но может изменять `состояние`. Для этого он должен вызвать `this.setState()`. Только классовые компоненты могут иметь состояние. +Самая большая разница между `state` и `props` состоит в том, что `props` передаются от родителя потомку, а `state` управляется самим компонентом. Компонент не может воздействовать на `props`, но может изменять `state`. Для этого он должен вызвать `this.setState()`. Только классовые компоненты могут иметь состояние. -Для каждой отдельной части изменяемых данных должен существовать только один компонент, который "регулирует" изменение состояния. Не пытайтесь синхронизировать сосотояния двух разных компонентов. Вместо этого, [поднимите](/docs/lifting-state-up.html) их до ближайшего компонента-родителя и передайте через пропсы необходимым дочерним компонентам. +Для каждой отдельной части изменяемых данных должен существовать только один компонент, который «регулирует» изменение состояния. Не пытайтесь синхронизировать сосотояния двух разных компонентов. Вместо этого [поднимите](/docs/lifting-state-up.html) их до ближайшего компонента-родителя и передайте через пропсы необходимым дочерним компонентам. ## [Методы жизненного цикла](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) {#lifecycle-methods} Методы жизненного цикла — это настраиваемые функции, которые выполняются на различных этапах жизни компонента. Существуют специальные методы для первоначального рендеринга компонента в DOM ([монтирование](/docs/react-component.html#mounting)), его обновления, размонтирования и удаления. - ## [Управляемые](/docs/forms.html#controlled-components) и [неуправляемые компоненты](/docs/uncontrolled-components.html) + ## [Контролируемые](/docs/forms.html#controlled-components) и [неконтролируемые компоненты](/docs/uncontrolled-components.html) В React существует два различных подхода для управления формами. Значением элемента формы input под контролем React — это *управляемый компонент*. Когда пользователь вводит данные в управляемый компонент, обработчик события изменений приходит в действие, и ваш код определяет допустим ли ввод (повторно рендерясь с обновленныем значением). Если повторный рендеринг не происходит, елемент формы остаётся без изменений. -*Неуправляемый компонент* работает как обычный елемент формы вне React. Когда пользователь вводит данные в поле формы (поле ввода, выпадающий список и т.д.), обновлённая информация отображается без помощи React. Однако, это также значит, что некоторые значения не могут быть применены. +*Неконтролируемый компонент* работает как обычный элемент формы вне React. Когда пользователь вводит данные в поле формы (поле ввода, выпадающий список и т.д.), обновлённая информация отображается без помощи React. Однако, это также значит, что некоторые значения не могут быть применены. В большинстве случаев вам стоит использовать управляемые компоненты. @@ -146,14 +146,14 @@ class Welcome extends React.Component { «Ключ» – это специальный строковый атрибут, который нужно указывать при создании списка элементов. Ключи помогают React определять, какие элементы были изменены, добавлены или удалены. Их необходимо указывать, чтобы React мог сопоставлять элементы массива с течением времени. -Ключи внутри массива должны быть уникальными только среди своих соседних элементов. Им не нужно быть уникальными во всем приложении или даже в общем компоненте. +Ключи внутри массива должны быть уникальными только среди своих соседних элементов. Им не нужно быть уникальными во всём приложении или даже в общем компоненте. -Не передавайте что-либо по типу `Math.random()` через ключи. Важно чтобы ключи имели "стабильное ID" при повторном рендеринге, чтобы React мог определить когда элементы добавлены, удалены или реорганизованы. В идеале, ключи должны соответствовать уникальному и стабильному идентификатору поступающему из ваших данных, такому как post.id`. +Не передавайте что-либо по типу `Math.random()` через ключи. Необходимо создавать для ключей «постоянные идентификаторы» при повторных рендерингах, чтобы React мог определить когда элементы добавлены, удалены или пересортированы. В идеале, ключи должны соответствовать уникальному и постоянному идентификатору поступающему из ваших данных, такому как `post.id`. ## [Рефы](/docs/refs-and-the-dom.html) {#refs} -React поддерживает особый атрибут, который можно добавить к любому компоненту. Атрибут `реф` может быть объектом, созданным при помощи [`React.createRef()` function](/docs/react-api.html#reactcreateref) или функцией-колбэком, или строкой (устаревшее API). Когда атрибут `реф` выступает в роли функции-колбэка, функция получает основной DOM элемент или экземпляр класса (в зависимости от типа элемента) в качестве аргумента. Это позволяет вам иметь прямой доступ к элементу DOM или экземпляру компонента. +React поддерживает особый атрибут, который можно добавить к любому компоненту. Атрибут `ref` может быть объектом, созданным при помощи [функции `React.createRef()`](/docs/react-api.html#reactcreateref) или колбэком, либо же строкой (устаревшее API). Когда атрибут `ref` выступает в роли колбэка, функция получает основной DOM-элемент или экземпляр класса (в зависимости от типа элемента) в качестве аргумента. Это позволяет вам иметь прямой доступ к элементу DOM или экземпляру компонента. Используйте рефы в исключительных случаях. Если вы часто обращаетесь к рефам за помощью, ознакомьтесь со [снисходящим потоком данных](/docs/lifting-state-up.html). @@ -168,4 +168,4 @@ React поддерживает особый атрибут, который мо ## [Согласование](/docs/reconciliation.html) {#reconciliation} -Когда пропсы или состояние компонента изменяются, React сравнивает нововозвращенный и предыдуще отрендеренный элементы, и решает нужно ли обновлять DOM. Этот процесс называется "согласование". +Когда пропсы или состояние компонента изменяются, React сравнивает нововозвращенный и предыдущий отрендеренные элементы, и решает нужно ли обновлять DOM. Этот процесс называется «согласование» (reconciliation). From 0e28cf097a4485ee77ddaa9e08a24c7f8c6c34d0 Mon Sep 17 00:00:00 2001 From: "Marichka (Tsiuriak) Offen" <40467112+marichka-offen@users.noreply.github.com> Date: Thu, 28 Feb 2019 11:29:44 -0500 Subject: [PATCH 3/5] Update reference-glossary.md --- content/docs/reference-glossary.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md index 7ea8242b4..0d220a69a 100644 --- a/content/docs/reference-glossary.md +++ b/content/docs/reference-glossary.md @@ -16,7 +16,7 @@ permalink: docs/glossary.html ## ES6, ES2015, ES2016 и т.д. {#es6-es2015-es2016-etc} -Все эти акронимы относяться к самым последним версиям спецификации стандарта ECMAScript, реализацией которого является язык программирования JavaScript. Версия ES6 (также известная как ES2015) включает много дополнений к предыдущим версиям: стрелочные функции, классы, шаблонные строки, ключевые слова `let` и `const`. Более подробно о конкретных версиях вы можно узнать [тут](https://ru.wikipedia.org/wiki/ECMAScript). +Все эти акронимы относятся к самым последним версиям спецификации стандарта ECMAScript, реализацией которого является язык программирования JavaScript. Версия ES6 (также известная как ES2015) включает много дополнений к предыдущим версиям: стрелочные функции, классы, шаблонные строки, ключевые слова `let` и `const`. Более подробно о конкретных версиях вы можно узнать [тут](https://ru.wikipedia.org/wiki/ECMAScript). ## Компиляторы {#compilers} @@ -135,7 +135,7 @@ class Welcome extends React.Component { В React существует два различных подхода для управления формами. -Значением элемента формы input под контролем React — это *управляемый компонент*. Когда пользователь вводит данные в управляемый компонент, обработчик события изменений приходит в действие, и ваш код определяет допустим ли ввод (повторно рендерясь с обновленныем значением). Если повторный рендеринг не происходит, елемент формы остаётся без изменений. +Элемент формы input, управляемый React — это *контролируемый компонент*. Когда пользователь вводит данные в управляемый компонент, обработчик события изменений приходит в действие, и ваш код определяет допустим ли ввод (повторно рендерясь с обновленныем значением). Если повторный рендеринг не происходит, елемент формы остаётся без изменений. *Неконтролируемый компонент* работает как обычный элемент формы вне React. Когда пользователь вводит данные в поле формы (поле ввода, выпадающий список и т.д.), обновлённая информация отображается без помощи React. Однако, это также значит, что некоторые значения не могут быть применены. From 9722d896717fef42b0fd0eb5bdd47d8427f3ddc4 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Fri, 1 Mar 2019 17:50:08 -0500 Subject: [PATCH 4/5] Apply suggestions from code review Co-Authored-By: marichka-offen <40467112+marichka-offen@users.noreply.github.com> --- content/docs/reference-glossary.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md index 0d220a69a..25d6bc0f8 100644 --- a/content/docs/reference-glossary.md +++ b/content/docs/reference-glossary.md @@ -35,7 +35,7 @@ permalink: docs/glossary.html ## JSX {#jsx} -JSX — расширение синтаксиса JavaScript, которое выглядит как шаблон, но имеет полную силу языка. В результате компиляции JSX и вызова `React.createElement()` возникают простые объекты — «элементы React». Чтобы ознакомиться с введением в JSX, [обратитесь к соответствующему разделу документации](/docs/introducing-jsx.html), а более подробную информацию про JSX вы можете найти [здесь](/docs/jsx-in-depth.html). +JSX — расширение синтаксиса JavaScript, которое выглядит как шаблон, но имеет полную силу языка. В результате компиляции JSX и вызова `React.createElement()` возникают простые объекты — «React-элементы». Чтобы ознакомиться с введением в JSX, [обратитесь к соответствующему разделу документации](/docs/introducing-jsx.html), а более подробную информацию про JSX вы можете найти [здесь](/docs/jsx-in-depth.html). React DOM использует стиль именования camelCase для свойств вместо обычных имён HTML-атрибутов. Например, в JSX атрибут `tabindex` станет `tabIndex`. В то время как атрибут `class` записывается как `className`, поскольку слово `class` уже зарезервировано в JavaScript: @@ -48,7 +48,7 @@ ReactDOM.render( ``` ## [Элементы](/docs/rendering-elements.html) {#elements} -Элементы React — это составляющие блоки React-приложений. Их можно перепутать с более известной концепцией «компонентов», но в отличие от компонента, элемент описывает то, что вы хотите увидеть на экране. Элементы React иммутабельны. +React-элементы — это составляющие блоки React-приложений. Их можно перепутать с более известной концепцией «компонентов», но в отличие от компонента, элемент описывает то, что вы хотите увидеть на экране. React-элементы иммутабельны. ```js const element =

Hello, world

; @@ -58,8 +58,8 @@ const element =

Hello, world

; ## [Компоненты](/docs/components-and-props.html) {#components} -React компоненты — это маленькие, повторно используемые части кода, которые возвращают React-элементы для отображения на странице. -Самый простой компонент React — это простая функция JavaScript, которая возвращает элементы React: +React-компоненты — это маленькие, повторно используемые части кода, которые возвращают React-элементы для отображения на странице. +Самый простой React-компонент — это простая функция JavaScript, которая возвращает элементы React: ```js function Welcome(props) { @@ -81,7 +81,7 @@ class Welcome extends React.Component { ### [`props`](/docs/components-and-props.html) {#props} -`props` (пропсы) — это входные данные компонентов React, передаваемые от компонента-родителя дочернему компоненту. +`props` (пропсы) — это входные данные React-компонентов, передаваемые от родительского компонента дочернему компоненту. Помните, `props` предназначены только для чтения. Ни в каком случае их не следует изменять: @@ -149,7 +149,7 @@ class Welcome extends React.Component { Ключи внутри массива должны быть уникальными только среди своих соседних элементов. Им не нужно быть уникальными во всём приложении или даже в общем компоненте. -Не передавайте что-либо по типу `Math.random()` через ключи. Необходимо создавать для ключей «постоянные идентификаторы» при повторных рендерингах, чтобы React мог определить когда элементы добавлены, удалены или пересортированы. В идеале, ключи должны соответствовать уникальному и постоянному идентификатору поступающему из ваших данных, такому как `post.id`. +Не используйте что-либо по типу `Math.random()` как ключи. Необходимо создавать для ключей «постоянные идентификаторы» при повторных рендерингах, чтобы React мог определить когда элементы добавлены, удалены или пересортированы. В идеале, ключи должны соответствовать уникальному и постоянному идентификатору поступающему из ваших данных, такому как `post.id`. ## [Рефы](/docs/refs-and-the-dom.html) {#refs} @@ -168,4 +168,4 @@ React поддерживает особый атрибут, который мо ## [Согласование](/docs/reconciliation.html) {#reconciliation} -Когда пропсы или состояние компонента изменяются, React сравнивает нововозвращенный и предыдущий отрендеренные элементы, и решает нужно ли обновлять DOM. Этот процесс называется «согласование» (reconciliation). +Когда пропсы или состояние компонента изменяются, React сравнивает нововозвращённый и предыдущий отрендеренные элементы, и решает нужно ли обновлять DOM. Этот процесс называется «согласование» (reconciliation). From 611b707512467e9f5e21cc1a99f63dab13691294 Mon Sep 17 00:00:00 2001 From: "Marichka (Tsiuriak) Offen" <40467112+marichka-offen@users.noreply.github.com> Date: Sat, 2 Mar 2019 18:04:53 -0500 Subject: [PATCH 5/5] Apply suggestions from code review Co-Authored-By: marichka-offen <40467112+marichka-offen@users.noreply.github.com> --- content/docs/reference-glossary.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md index 25d6bc0f8..b87abc81a 100644 --- a/content/docs/reference-glossary.md +++ b/content/docs/reference-glossary.md @@ -12,7 +12,7 @@ permalink: docs/glossary.html Одностраничное приложение — это приложение, которое состоит из единственной HTML-страницы и прочих ресурсов (таких как JavaScript и CSS), необходимых для успешной работы. Любое взаимодействие с главной или последующими ей страницами не требует контакта с сервером, что значит — страница не требует перезагрузки. -Хоть React и позволяет создавать одностраничные приложения, это совсем не обязательно. React можно использовать для совершенствования небольших частей уже существующих сайтов, чтобы придать дополнительную интерактивность. Код, написанный в React, может мирно сосуществовать с разметкой отрендеренной на сервере с помощью PHP, или с любыми другими фронтенд-библиотеками. По сути, именно так React используется для Facebook. +Хоть React и позволяет создавать одностраничные приложения, это совсем не обязательно. React можно использовать для совершенствования небольших частей уже существующих сайтов, чтобы придать дополнительную интерактивность. Код, написанный в React, может мирно сосуществовать с разметкой отрендеренной на сервере с помощью PHP, или с любыми другими фронтенд-библиотеками. По сути, именно так React и используется в Facebook. ## ES6, ES2015, ES2016 и т.д. {#es6-es2015-es2016-etc} @@ -20,22 +20,22 @@ permalink: docs/glossary.html ## Компиляторы {#compilers} -Компиляторы JavaScript преобразует и возвращает изменённый код. Самый известный случай использования — преобразование синтаксиса ES6 для поддержки в старых браузерах. В работе с React чаще всего используется [Babel](https://babeljs.io/) +Компилятор JavaScript принимает на вход JavaScript код, преобразует его и возвращает в изменённом формате. Самый известный случай использования — преобразование синтаксиса ES6 для поддержки в старых браузерах. При работе с React чаще всего используется [Babel](https://babeljs.io/) ## Бандлеры {#bundlers} -Бандлеры совмещают отдельные модули JavaScript и CSS для лучшей оптимизации в браузерах. В работе с React чаще всего используются [Webpack](https://webpack.js.org/) и [Browserify](http://browserify.org/). +Бандлеры берут отдельные модули JavaScript и CSS и соединяют их в меньшее количество файлов, которые оптимзированы под браузеры. В работе с React чаще всего используются [Webpack](https://webpack.js.org/) и [Browserify](http://browserify.org/). ## Менеджер пакетов {#package-managers} -Менеджер пакетов — это инструмент позволяющий управлять зависимостями в вашем проекте. [npm](https://www.npmjs.com/) и [Yarn](https://yarnpkg.com/) — менеджеры пакетов наиболее используемые в приложениях React. Оба являются клиентами реестра пакетов npm. +Менеджер пакетов — это инструмент, позволяющий управлять зависимостями в вашем проекте. [npm](https://www.npmjs.com/) и [Yarn](https://yarnpkg.com/) — менеджеры пакетов наиболее используемые в приложениях React. Оба являются клиентами реестра пакетов npm. ## CDN {#cdn} Сеть доставки содержимого (англ. Content Delivery Network, CDN) — это сетевая инфраструктура, распространяющая кешированный, статический контент через сеть серверов по всему миру. ## JSX {#jsx} -JSX — расширение синтаксиса JavaScript, которое выглядит как шаблон, но имеет полную силу языка. В результате компиляции JSX и вызова `React.createElement()` возникают простые объекты — «React-элементы». Чтобы ознакомиться с введением в JSX, [обратитесь к соответствующему разделу документации](/docs/introducing-jsx.html), а более подробную информацию про JSX вы можете найти [здесь](/docs/jsx-in-depth.html). +JSX — расширение синтаксиса JavaScript. Этот синтаксис выглядит как язык шаблонов, но наделён всеми языковыми возможностями JavaScript. В результате компиляции JSX и вызова `React.createElement()` возникают простые объекты — «React-элементы». Чтобы ознакомиться с введением в JSX, [обратитесь к соответствующему разделу документации](/docs/introducing-jsx.html), а более подробную информацию про JSX вы можете найти [здесь](/docs/jsx-in-depth.html). React DOM использует стиль именования camelCase для свойств вместо обычных имён HTML-атрибутов. Например, в JSX атрибут `tabindex` станет `tabIndex`. В то время как атрибут `class` записывается как `className`, поскольку слово `class` уже зарезервировано в JavaScript: @@ -59,7 +59,7 @@ const element =

Hello, world

; ## [Компоненты](/docs/components-and-props.html) {#components} React-компоненты — это маленькие, повторно используемые части кода, которые возвращают React-элементы для отображения на странице. -Самый простой React-компонент — это простая функция JavaScript, которая возвращает элементы React: +Самый простой React-компонент — это простая функция JavaScript, которая возвращает элементы React: ```js function Welcome(props) { @@ -77,7 +77,7 @@ class Welcome extends React.Component { } ``` -Компоненты можно разбить на отдельные части в зависимости от выполняемой функции и использовать внутри других компонентов. Компоненты могут возвращать другие компоненты, массивы, строки и числа. Если какая-то часть интерфейса повторяется многократно (`Button`, `Panel`, `Avatar`) или сама по себе достаточно сложная (`App`, `FeedStory`, `Comment`), имеет смысл вынести её в независимый компонент. Имена компонентов всегда должны начинатся с заглавной буквы (``, а **не** ``). За более детальной информацией по рендерингу компонентов [обратитесь к соответствующему разделу документации](/docs/components-and-props.html#rendering-a-component). +Компоненты можно разбить на отдельные части в зависимости от выполняемой функции и использовать внутри других компонентов. Компоненты могут возвращать другие компоненты, массивы, строки и числа. Если какая-то часть интерфейса повторяется многократно (`Button`, `Panel`, `Avatar`) или сама по себе достаточно сложная (`App`, `FeedStory`, `Comment`), имеет смысл вынести её в независимый компонент. Имена компонентов всегда должны начинатся с заглавной буквы (``, а **не** ``). За более детальной информацией о рендеринге компонентов [обратитесь к соответствующему разделу документации](/docs/components-and-props.html#rendering-a-component). ### [`props`](/docs/components-and-props.html) {#props} @@ -93,7 +93,7 @@ props.number = 42; ### `props.children` {#propschildren} -`props.children` доступны каждому компоненту. Это контент между открывающим и закрывающим тегом компонента. Например: +В любом компоненте доступны `props.children`. Это контент между открывающим и закрывающим тегом компонента. Например: ```js Hello world! @@ -119,12 +119,12 @@ class Welcome extends React.Component { ### [`state`](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) {#state} -Компонент нуждается в `state` (состоянии), когда данные в нем со временем изменяются. Например, компоненту `Checkbox` может понадобится состояние `isChecked`, а компоненту `NewsFeed` необходимо отслеживать посты при помощи состояния `fetchedPosts`. +Компонент нуждается в `state`, когда данные в нём со временем изменяются. Например, компоненту `Checkbox` может понадобится состояние `isChecked`, а компоненту `NewsFeed` необходимо отслеживать посты при помощи состояния `fetchedPosts`. Самая большая разница между `state` и `props` состоит в том, что `props` передаются от родителя потомку, а `state` управляется самим компонентом. Компонент не может воздействовать на `props`, но может изменять `state`. Для этого он должен вызвать `this.setState()`. Только классовые компоненты могут иметь состояние. -Для каждой отдельной части изменяемых данных должен существовать только один компонент, который «регулирует» изменение состояния. Не пытайтесь синхронизировать сосотояния двух разных компонентов. Вместо этого [поднимите](/docs/lifting-state-up.html) их до ближайшего компонента-родителя и передайте через пропсы необходимым дочерним компонентам. +Для каждой отдельной части изменяемых данных должен существовать только один компонент, который «управляет» изменением состояния. Не пытайтесь синхронизировать состояния двух разных компонентов. Вместо этого [поднимите оба этих состояния](/docs/lifting-state-up.html) до ближайшего компонента-родителя и передайте через пропсы необходимым дочерним компонентам. ## [Методы жизненного цикла](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) {#lifecycle-methods} @@ -135,11 +135,11 @@ class Welcome extends React.Component { В React существует два различных подхода для управления формами. -Элемент формы input, управляемый React — это *контролируемый компонент*. Когда пользователь вводит данные в управляемый компонент, обработчик события изменений приходит в действие, и ваш код определяет допустим ли ввод (повторно рендерясь с обновленныем значением). Если повторный рендеринг не происходит, елемент формы остаётся без изменений. +Элемент формы input, управляемый React — это *контролируемый компонент*. Когда пользователь вводит данные в управляемый компонент, обработчик события изменений приходит в действие, и ваш код определяет допустим ли ввод (повторно рендерясь с обновленныем значением). Если повторный рендеринг не происходит, элемент формы остаётся без изменений. *Неконтролируемый компонент* работает как обычный элемент формы вне React. Когда пользователь вводит данные в поле формы (поле ввода, выпадающий список и т.д.), обновлённая информация отображается без помощи React. Однако, это также значит, что некоторые значения не могут быть применены. -В большинстве случаев вам стоит использовать управляемые компоненты. +В большинстве случаев вам следует использовать управляемые компоненты. ## [Ключи](/docs/lists-and-keys.html) {#keys} @@ -149,13 +149,13 @@ class Welcome extends React.Component { Ключи внутри массива должны быть уникальными только среди своих соседних элементов. Им не нужно быть уникальными во всём приложении или даже в общем компоненте. -Не используйте что-либо по типу `Math.random()` как ключи. Необходимо создавать для ключей «постоянные идентификаторы» при повторных рендерингах, чтобы React мог определить когда элементы добавлены, удалены или пересортированы. В идеале, ключи должны соответствовать уникальному и постоянному идентификатору поступающему из ваших данных, такому как `post.id`. +Не используйте что-либо наподобие `Math.random()` как ключи. Необходимо создавать для ключей «стабильные идентификаторы» при повторных рендерингах, чтобы React мог определить когда элементы добавлены, удалены или переупорядочены. В идеале, ключи должны соответствовать уникальному и постоянному идентификатору поступающему из ваших данных, например `post.id`. ## [Рефы](/docs/refs-and-the-dom.html) {#refs} -React поддерживает особый атрибут, который можно добавить к любому компоненту. Атрибут `ref` может быть объектом, созданным при помощи [функции `React.createRef()`](/docs/react-api.html#reactcreateref) или колбэком, либо же строкой (устаревшее API). Когда атрибут `ref` выступает в роли колбэка, функция получает основной DOM-элемент или экземпляр класса (в зависимости от типа элемента) в качестве аргумента. Это позволяет вам иметь прямой доступ к элементу DOM или экземпляру компонента. +React поддерживает особый атрибут, который можно прикрепить к любому компоненту. Атрибут `ref` может быть объектом, созданным при помощи [функции `React.createRef()`](/docs/react-api.html#reactcreateref) или колбэком, либо же строкой (устаревшее API). Когда в роли атрибута `ref` выступает колбэк, функция получает DOM-элемент, лежащий в основе компонента, или экземпляр класса (в зависимости от типа элемента) в качестве аргумента. Это позволяет вам иметь прямой доступ к элементу DOM или экземпляру компонента. -Используйте рефы в исключительных случаях. Если вы часто обращаетесь к рефам за помощью, ознакомьтесь со [снисходящим потоком данных](/docs/lifting-state-up.html). +Используйте рефы в исключительных случаях. Если вы часто обращаетесь к рефам за помощью, ознакомьтесь с [нисходящим потоком данных](/docs/lifting-state-up.html).