gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

docs: update Russian translation for the whole React guide (#23636)

Browse Source 
* docs: update translation for React guide in Russian

* fix: removed extra line before frontmatter block

* fix: removed extra line in frontmatter block

* fix: corrected frontmatter block

* fix: corrected localeTitle in frontmatter block

* Update index.md

* fix: corrected localeTitle for Installation

* Update index.md

* Update index.md
This commit is contained in:
Egor
2018-11-22 19:49:48 +01:00
committed by Gregory Gubarev
parent a489ac9df8
commit 346b0a7ce1
23 changed files with 698 additions and 617 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
guide/english/react/a-react-environment-using-a-remote-code-repository/index.md
View File

@ -36,5 +36,7 @@ babel-polyfill is used for older browsers compatibility.
</html> </html>
``` ```
If this code is saved with the html file extension (helloReact.html), it can be opened in a web browser If this code is saved with the html file extension (helloReact.html), it can be opened in a web browser
it will run React and Babel. it will run React and Babel.

2
guide/english/react/life-cycle-methods-of-a-component/index.md
View File

@ -57,7 +57,7 @@ Note:
> "Even in version 17, it will still be possible to use them, but they will be aliased with an “UNSAFE_” prefix to indicate that they might cause issues. We have also prepared an [automated script to rename them](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) in existing code."<sup>1</sup> > "Even in version 17, it will still be possible to use them, but they will be aliased with an “UNSAFE_” prefix to indicate that they might cause issues. We have also prepared an [automated script to rename them](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) in existing code."<sup>1</sup>
In other words, these previouse lifecycles methods will still be available as: In other words, these previously lifecycle methods will still be available as:
* `UNSAFE_componentWillMount` * `UNSAFE_componentWillMount`
* `UNSAFE_componentWillReceiveProps` * `UNSAFE_componentWillReceiveProps`
* `UNSAFE_componentWillUpdate` * `UNSAFE_componentWillUpdate`

12
guide/english/react/what-are-react-props/index.md
View File

@ -3,7 +3,7 @@ title: React TypeChecking with PropTypes
--- ---
## React PropTypes ## React PropTypes
These serve as a method of typechecking as an application tends to grow, with this a very big base of bugs tends to be corrected with the use of this feature. These serve as a method of typechecking as an application tends go grow, with this a very big base of bugs tends to be corrected with the use of this feature.
## How to get PropTypes ## How to get PropTypes
@ -14,8 +14,8 @@ In order to use it, it's required to be added to the project as a dependency by
```sh ```sh
npm install --save prop-types npm install --save prop-types
``` ```
After that, a whole range of validators can be used to make sure the data the developer recieves is actually valid. After that a whole range of validators that can be used to make sure the data the developer is going to recieve is actually valid.
When an invalid value is provided a warning will appear in the JavaScript console. When an invalid value is provided there will be warning appearing in the JavaScript console.
Note that for performance reasons the PropTypes defined are only checked while in development mode. Note that for performance reasons the PropTypes defined are only checked while in development mode.
@ -23,9 +23,9 @@ Also on the contrary of the component state, that can be manipulated as needed,
It's value cannot be changed by the component. It's value cannot be changed by the component.
## Proptypes available ## PropTypes available
Below is a code example with the different validators provided by the package, and how to inject them in the component. Bellow is a code example with the different validators provided by the package, and how to inject them in the component.
```javascript ```javascript
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -99,7 +99,7 @@ As a part of this feature it's also possible to define default values for any gi
These make sure that the prop will have a value even if not specified by the parent component. These make sure that the prop will have a value even if not specified by the parent component.
The code below illustrates how to use this funcionality. The code bellow ilustrates how to use this funcionality.
```javascript ```javascript
import React,{Component} from 'react'; import React,{Component} from 'react';

5
guide/russian/react/a-react-environment-using-a-remote-code-repository/index.md
View File

@ -23,6 +23,7 @@ localeTitle: Среда разработки для React с использов
</script> </script>
</head> </head>
<body> <body>
<div id="helloreact"></div> <div id="helloreact"></div>
<script type="text/babel"> <script type="text/babel">
@ -33,5 +34,7 @@ localeTitle: Среда разработки для React с использов
</html> </html>
``` ```
Если данный код сохранить с расширением html-файла (helloReact.html), его можно открыть в веб-браузере, он будет использовать библиотеку React и транспилятор Babel.
Если этот код сохраняется с расширением .html (helloReact.html), то его можно открыть в веб-браузере,
который, в свою очередь, запустит React и Babel.

25
guide/russian/react/component/index.md
View File

@ -6,21 +6,24 @@ localeTitle: React - Компоненты
## React - Компоненты ## React - Компоненты
В библиотеке react.js создаваемые компоненты могут быть использованы повторно. Вы можете передавать различные значения в компоненты с помощью свойств - props, как приведено ниже:
Компоненты могут повторно использоваться в react.js. Вы можете ввести значение в props, как указано ниже:
```jsx ```jsx
function Welcome(props) { function Welcome(props) {
return <h1>Hello, {props.name}</h1>; return <h1>Hello, {props.name}</h1>;
} }
const element = <Welcome name="Faisal Arkan" />; const element = <Welcome name="Faisal Arkan" />;
ReactDOM.render( ReactDOM.render(
element, element,
document.getElementById('root') document.getElementById('root')
); );
``` ```
В данном случае, значение свойства name - `name="Faisal Arkan"` будет сохранено в `{props.name}` из `function Welcome(props)` и возвратит компонент `<h1>Hello, Faisal Arkan</h1>`, который сохраняется в константу `elements`. Далее компонент отрисовывается с помощью вызова функции `ReactDOM.render(element, document.getElementById('root'));`. В данном случае `document.getElementById('root')`, элемент в котором вы хотите разместить и визуализировать созданный компонент. В данном случае, значение свойства name - `name="Faisal Arkan"` будет сохранено в `{props.name}` из `function Welcome(props)` и возвратит компонент `<h1>Hello, Faisal Arkan</h1>`, который сохраняется в константу `elements`. Далее компонент отрисовывается с помощью вызова функции `ReactDOM.render(element, document.getElementById('root'));`. В данном случае `document.getElementById('root')`, элемент в котором вы хотите разместить и визуализировать созданный компонент.
### Другие способы объявления компонентов ### Другие способы объявления компонентов
@ -29,6 +32,7 @@ function Welcome(props) {
### Компоненты с состоянием ### Компоненты с состоянием
#### Компоненты с использованием классов #### Компоненты с использованием классов
@ -54,9 +58,11 @@ class Cat extends React.Component {
} }
``` ```
### Компоненты без состояния
#### Функциональные компоненты (стрелочные функции из ES6) ### Stateless
#### Функциональные компоненты (Arrow Function из стандарта ES6)
```jsx ```jsx
const Cat = props => { const Cat = props => {
@ -66,16 +72,17 @@ const Cat = props => {
<p>{props.color}</p> <p>{props.color}</p>
</div>; </div>;
); );
}; };
``` ```
#### Неявно возвращаемые компоненты #### Неявно возвращаемые компоненты
```jsx ```jsx
const Cat = props => const Cat = props =>
<div> <div>
<h1>{props.name}</h1> <h1>{props.name}</h1>
<p>{props.color}</p> <p>{props.color}</p>
</div>; </div>;
```

8
guide/russian/react/fragments/index.md
View File

@ -4,7 +4,11 @@ localeTitle: Фрагменты
--- ---
# Фрагменты # Фрагменты
Фрагменты - это способ визуализации нескольких элементов без использования элемента-обертки. При попытке визуализации элементов без закрывающего тега в JSX вы увидите сообщение об ошибке. `Adjacent JSX elements must be wrapped in an enclosing tag` . Это связано с тем, что когда JSX транслирует, он создает элементы с соответствующими именами тегов и не знает, какое имя тега использовать, если найдено несколько элементов. Раньше частым решением для этого было использование обертки div для решения этой проблемы. Тем не менее, в версии 16 React появилось дополнение `Fragment` , что делает ненужным это. Фрагменты - это способ визуализации нескольких элементов без использования элемента-обертки.
При попытке визуализации элементов без закрывающего тега в JSX вы увидите сообщение об ошибке. `Adjacent JSX elements must be wrapped in an enclosing tag`.
Это связано с тем, что когда JSX транслирует код, он создает элементы с соответствующими именами тегов и не знает,
какое имя тега использовать, если найдено несколько элементов. Раньше частым решением этой проблемы было использование обертки div.
Тем не менее, в React 16-ой версии появилось дополнение `Fragment`, которое полностью заменяет предыдушее решение.
`Fragment` выполняет обертку, не добавляя ненужные div в DOM. Вы можете использовать его непосредственно из импорта React или деконструировать его: `Fragment` выполняет обертку, не добавляя ненужные div в DOM. Вы можете использовать его непосредственно из импорта React или деконструировать его:
@ -43,7 +47,7 @@ import React from 'react';
export default MyComponent; export default MyComponent;
``` ```
React версия 16.2 упростила этот процесс далее, позволяя пустым тегам JSX интерпретироваться как фрагменты: React версия 16.2 упростил этот процесс далее, позволяя пустым тегам JSX интерпретироваться как фрагменты:
```jsx ```jsx
return ( return (

24
guide/russian/react/functional-components-vs-class-components/index.md
View File

@ -11,6 +11,7 @@ localeTitle: Функциональные компоненты и компоне
## Функциональные компоненты ## Функциональные компоненты
* Функциональные компоненты - это обыкновенные функции JavaScript. Они обычно создаются с помощью стрелочных функций, но также могут быть созданы с помощью ключевого слова `function`. * Функциональные компоненты - это обыкновенные функции JavaScript. Они обычно создаются с помощью стрелочных функций, но также могут быть созданы с помощью ключевого слова `function`.
* Иногда они называются «простыми» или «без состояния», поскольку они просто принимают данные и отображают их в какой-либо форме; то есть они в основном отвечают за отрисовку пользовательского интерфейса. * Иногда они называются «простыми» или «без состояния», поскольку они просто принимают данные и отображают их в какой-либо форме; то есть они в основном отвечают за отрисовку пользовательского интерфейса.
* React методы жизненного цикла (например, `componentDidMount` ) не могут использоваться в функциональных компонентах. * React методы жизненного цикла (например, `componentDidMount` ) не могут использоваться в функциональных компонентах.
@ -19,29 +20,32 @@ localeTitle: Функциональные компоненты и компоне
* Функциональные компоненты могут принимать и использовать свойства (props). * Функциональные компоненты могут принимать и использовать свойства (props).
* Функциональные компоненты являются более предпочтительными для использования в вашем коде, если вам не нужно использовать состояние React. * Функциональные компоненты являются более предпочтительными для использования в вашем коде, если вам не нужно использовать состояние React.
```js ```js
import React from "react"; import React from "react";
const Person = props => ( const Person = props => (
<div> <div>
<h1>Hello, {props.name}</h1> <h1>Hello, {props.name}</h1>
</div> </div>
); );
export default Person; export default Person;
``` ```
## Компоненты с использованием классов ## Компоненты с использованием классов
* Компоненты с классами используют ключевое слово class из ES6 и расширяют класс `Component` в React.
* Иногда они называются «умными» или «с состоянием», поскольку они предназначены для реализации логики и состояние приложения. * Компоненты класса используют класс ES6 и расширяют класс `Component` в React.
* Иногда они называются "smart" или "stateful", поскольку они склонны реализовывать логику и состояние.
* Методы жизненного цикла React могут использоваться внутри компонентов класса (например, `componentDidMount` ). * Методы жизненного цикла React могут использоваться внутри компонентов класса (например, `componentDidMount` ).
* Вы передаете свойства (props) вниз к классовым компонентам и получаете доступ к соответствующим свойствам с помощью `this.props` * Вы передаете props до компонентов класса и `this.props` доступ к ним с помощью `this.props`
```js ```js
import React, { Component } from "react"; import React, { Component } from "react";
class Person extends Component { class Person extends Component {
constructor(props){ constructor(props){
super(props); super(props);
this.state = { this.state = {
@ -56,14 +60,16 @@ import React, { Component } from "react";
</div> </div>
); );
} }
} }
export default Person; export default Person;
``` ```
## Дополнительная информация ## Дополнительная информация
* [React компоненты](https://reactjs.org/docs/components-and-props.html) * [React компоненты](https://reactjs.org/docs/components-and-props.html)
* [Функциональные компоненты класса vs компоненты с использованием классов](https://react.christmas/16) * [Функциональные компоненты класса vs компоненты с использованием классов](https://react.christmas/16)
* [Компоненты с состоянием vs компонентов без состояния](https://code.tutsplus.com/tutorials/stateful-vs-stateless-functional-components-in-react--cms-29541) * [Компоненты с состоянием vs компонентов без состояния](https://code.tutsplus.com/tutorials/stateful-vs-stateless-functional-components-in-react--cms-29541)
* [Состояние и жизненный цикл](https://reactjs.org/docs/state-and-lifecycle.html) * [Состояние и жизненный цикл](https://reactjs.org/docs/state-and-lifecycle.html)

28
guide/russian/react/handling-data-with-props-in-react/index.md
View File

@ -1,10 +1,10 @@
--- ---
title: Handling Data with Props in React title: Handling Data with Props in React
localeTitle: Обработка данных с помощью реквизита в действии localeTitle: Обработка данных с помощью Props в React
--- ---
## Обработка данных с помощью реквизита в действии ## Обработка данных с помощью Props в React
Реквизиты обеспечивают способ передачи и доступа к данным в компонентах React. Props обеспечивают способ передачи и доступа к данным в компонентах React.
Данные передаются для компонентов React как атрибут в JSX. Данные передаются для компонентов React как атрибут в JSX.
@ -12,7 +12,7 @@ localeTitle: Обработка данных с помощью реквизит
<MyComponent someAttribute={data.value} /> <MyComponent someAttribute={data.value} />
``` ```
В JSX фигурные скобки указывают на выражение JavaScript, которое должно возвращать значение. Переданные данные доступны через реквизиты в определенном компоненте. В JSX фигурные скобки указывают на выражение JavaScript, которое должно возвращать значение. Переданные данные доступны через props в определенном компоненте.
```javascript ```javascript
const MyComponent = props => { const MyComponent = props => {
@ -22,19 +22,19 @@ const MyComponent = props => {
Теперь давайте рассмотрим пример в CodePen. Теперь давайте рассмотрим пример в CodePen.
### Начиная ### Установка
Если вы еще этого не сделали, зайдите и зарегистрируйтесь для [бесплатной учетной записи CodePen](https://codepen.io/accounts/signup/user/free) . Если вы еще этого не сделали, зайдите и зарегистрируйтесь на [бесплатной учетной записи CodePen](https://codepen.io/accounts/signup/user/free) .
Создайте новое перо, выбрав «Создать»> «Новая пера» рядом с вашим профилем профиля CodePen. Создайте новый pen, выбрав 'Create' > 'New Pen' рядом с вашим профилем CodePen.
Затем мы добавим соответствующие библиотеки для рендеринга наших компонентов React. Затем мы добавим соответствующие библиотеки для рендеринга наших компонентов React.
Откройте панель настроек JavaScript, выбрав «Настройки»> «JavaScript». Выберите «Babel» в разделе «Препроцессор JavaScript». Откройте панель настроек JavaScript, выбрав 'Settings' > 'JavaScript. Выберите 'Babel' в разделе 'JavaScript Preprocessor'.
Затем добавим наши библиотеки React. В разделе «Внешний JavaScript» выберите раскрывающийся список «Быстрое добавление» и добавьте библиотеки «React» и «React DOM». Затем добавим наши библиотеки React. В разделе 'External JavaScript' выберите раскрывающийся список 'Quick-add' и добавьте библиотеки 'React' и 'React DOM'.
### Использование реквизита ### Использование props
Сначала давайте определим некоторые фиктивные данные в нашем файле JavaScript. Сначала давайте определим некоторые фиктивные данные в нашем файле JavaScript.
@ -45,7 +45,7 @@ const blogData = {
}; };
``` ```
Затем давайте определим наши компоненты блога. Затем определим наши компоненты блога.
```javascript ```javascript
const Heading = () => { const Heading = () => {
@ -64,9 +64,9 @@ const Heading = () => {
}; };
``` ```
Заметил, как мы использовали объект реквизита для рендеринга значений заголовка и тела, которые будут переданы компоненту Blog. Реквизиты доступны только для чтения или неизменяемы, поэтому нам не нужно беспокоиться об изменении значений реквизита. Заметил, как мы использовали объект props для рендеринга значений заголовка и тела, которые будут переданы компоненту Blog. Props доступны только для чтения или неизменяемы, поэтому нам не нужно беспокоиться об изменении значений props.
Перед тем, как написать наш компонент App, мы должны защитить наш компонент будет определение типа переменной, которая передается каждому реквизита. Мы определим это с помощью React.PropTypes. Добавьте в свой файл JavaScript следующее. Перед тем, как написать наш компонент App, мы должны защитить наш компонент будет определение типа переменной, которая передается каждому props. Мы определим это с помощью React.PropTypes. Добавьте в свой файл JavaScript следующее.
```javascript ```javascript
Blog.propTypes = { Blog.propTypes = {
@ -101,6 +101,6 @@ ReactDOM.render(
); );
``` ```
Теперь вы должны видеть, что наши компоненты блога визуализируются с помощью фиктивных данных, передаваемых через реквизиты. Теперь вы должны увидеть, что наши компоненты блога визуализируются с помощью фиктивных данных, передаваемых через props.
Вы можете увидеть пример CodePen [здесь](https://codepen.io/trey-davis/pen/MvdZGX) . Вы можете увидеть пример CodePen [здесь](https://codepen.io/trey-davis/pen/MvdZGX) .

2
guide/russian/react/hello-world/index.md
View File

@ -1,5 +1,6 @@
--- ---
title: Hello World title: Hello World
localeTitle: Hello World
--- ---
## Hello World!! ## Hello World!!
@ -65,3 +66,4 @@ npm install -g create-react-app
Поздравляю! Вы создали свое первое приложение React Hello world. Вы узнаете больше о React в следующих статьях. Поздравляю! Вы создали свое первое приложение React Hello world. Вы узнаете больше о React в следующих статьях.
Веселого кодинга! Веселого кодинга!

27
guide/russian/react/higher-order-components/index.md
View File

@ -1,12 +1,12 @@
--- ---
title: Higher-Order Components title: Higher-Order Components
localeTitle: Компоненты более высокого порядка localeTitle: Higher-Order Components
--- ---
## Компоненты более высокого порядка ## Higher-Order Components
В реакторе **компонент более** высокого **порядка** (HOC) - это функция, которая принимает компонент и возвращает новый компонент. Программисты используют HOC для обеспечения **повторного использования компонентной логики** . В React ***Higher-Order Components*** (HOC) - это функция, которая принимает компонент и возвращает новый компонент. Программисты используют HOC для обеспечения **повторного использования компонентной логики** .
Если вы использовали Redux - х `connect` , вы уже работали с более высоким порядком компонентами. Если вы использовали Redux `connect`, то это значит, что вы уже работали с Higher-Order Components.
Основная идея: Основная идея:
@ -15,13 +15,11 @@ const EnhancedComponent = enhance(WrappedComponent);
``` ```
Куда: Куда:
* `enhance` - это Higher-Order Component;
* `enhance` - это компонент `enhance` высокого порядка; * `WrappedComponent` - это компонент, который вы хотите улучшить; а также
* `WrappedComponent` - это компонент, который вы хотите улучшить; а также * `EnhancedComponent` - это новый компонент.
* `EnhancedComponent` - это новый компонент.
Это может стать телом `enhance` HOC: Это может стать телом `enhance` HOC:
```jsx ```jsx
function enhance(WrappedComponent) { function enhance(WrappedComponent) {
return class extends React.Component { return class extends React.Component {
@ -40,14 +38,13 @@ function enhance(WrappedComponent) {
} }
``` ```
В этом случае `React.Component` `enhance` возвращает **анонимный класс,** который расширяет `React.Component` . Этот новый компонент выполняет три простых элемента: В этом случае `React.Component` `enhance` возвращает **anonymous class** который расширяет `React.Component` . Этот новый компонент выполняет три простых действия:
* Оказание `WrappedComponent` в элементе `div` ; * Отрисовывание `WrappedComponent` в элементе `div` ;
* Передача собственных реквизитов для `WrappedComponent` ; а также * Передача собственных реквизитов для `WrappedComponent` ; а также
* Внедрение дополнительной поддержки для `WrappedComponent` . * Внедрение дополнительной поддержки для `WrappedComponent` .
HOC - это всего лишь образец, который использует силу композиционной природы Реакта. **Они добавляют функции к компоненту** . С ними вы можете многое сделать! HOC - это всего лишь образец, который использует силу композиционной природы Реакта. **Они добавляют функции к компоненту** . С ними вы можете многое сделать!
## Другие источники ## Другие источники
* [React docs: Компоненты более высокого порядка](https://reactjs.org/docs/higher-order-components.html)
* [React docs: Компоненты более высокого порядка](https://reactjs.org/docs/higher-order-components.html)

144
guide/russian/react/index.md
View File

@ -4,7 +4,9 @@ localeTitle: React
--- ---
# React # React
React - это библиотека JavaScript для создания пользовательских интерфейсов. Он был признан самым любимым в категории «Фреймворки, библиотеки и другие технологии» опроса разработчиков Stack Overflow 2017. 1
React - это библиотека JavaScript для создания пользовательских интерфейсов. Он был признан самым любимым в категории "Frameworks, Libraries, и другие технологии" опроса разработчиков Stack Overflow 2017.<sup>1</sup>
React - это библиотека JavaScript и React приложения, созданные с помощью неё, запускаются в браузере, а НЕ на сервере. Приложения такого рода только взаимодействуют с сервером, когда это необходимо, что делает их очень быстрыми по сравнению с традиционными веб-сайтами, которые заставляют пользователя ждать, пока сервер повторно развернет целые страницы и отправит их в браузер. React - это библиотека JavaScript и React приложения, созданные с помощью неё, запускаются в браузере, а НЕ на сервере. Приложения такого рода только взаимодействуют с сервером, когда это необходимо, что делает их очень быстрыми по сравнению с традиционными веб-сайтами, которые заставляют пользователя ждать, пока сервер повторно развернет целые страницы и отправит их в браузер.
@ -16,45 +18,50 @@ React используется для создания пользователь
## Зачем изучать React? ## Зачем изучать React?
1. React включает в себя композицию, состоящую из множества компонентов, которые обертывают функциональные возможности в инкапсулированный контейнер. Многие популярные сайты используют React для реализации архитектурного шаблона MVC. Facebook (частично), Instagram (полностью), Академия Khan (частично), Codecademy (частично), New York Times (частично), Yahoo Mail (полностью), новое приложение для фото и видео Dropbox Карусель (полностью) - популярные популярные сайты использовать React. Как эти большие приложения создаются с использованием React? Простой ответ заключается в создании небольших приложений или компонентов. Пример: 1. React включает в себя композицию, состоящую из множества компонентов, которые обертывают функциональные возможности в инкапсулированный контейнер. Многие популярные сайты используют React для реализации архитектурного шаблона MVC. Facebook (частично), Instagram (полностью), Академия Khan (частично), Codecademy (частично), New York Times (частично), Yahoo Mail (полностью), новое приложение для фото и видео Dropbox Карусель (полностью) - популярные популярные сайты использовать React. Как эти большие приложения создаются с использованием React? Простой ответ заключается в создании небольших приложений или компонентов. Пример:
```jsx ```jsx
const Component2 = () => { const Component2 = () => {
return ( return (
<div></div> <div></div>
); );
}; };
const Component3 = () => { const Component3 = () => {
return ( return (
<div></div> <div></div>
); );
}; };
const Component1 = () => { const Component1 = () => {
return ( return (
<div> <div>
<Component2 /> <Component2 />
<Component3 /> <Component3 />
</div> </div>
); );
}; };
ReactDOM.render( ReactDOM.render(
<Component1 />, <Component1 />,
document.getElementById("app") document.getElementById("app")
); );
``` ```
2. React является декларативной для большей части, в которой нас больше интересует «Что делать, а не как выполнять определенную задачу». Декларативное программирование - это парадигма программирования, которая выражает логику вычисления без описания его потока управления. Декларативное программирование имеет определенные преимущества, такие как уменьшенные побочные эффекты (возникает, когда мы модифицируем какое-либо состояние или что-то изменяем или делаем запрос API), сводя к минимуму изменчивость (как много абстрагируется), улучшенная читаемость, меньшие ошибки. 2. React является декларативной для большей части, в которой нас больше интересует «Что делать, а не как выполнять определенную задачу». Декларативное программирование - это парадигма программирования, которая выражает логику вычисления без описания его потока управления. Декларативное программирование имеет определенные преимущества, такие как уменьшенные побочные эффекты (возникает, когда мы модифицируем какое-либо состояние или что-то изменяем или делаем запрос API), сводя к минимуму изменчивость (как много абстрагируется), улучшенная читаемость, меньшие ошибки.
3. Однонаправленный поток данных. UI в React фактически является функцией состояния, которое означает, что состояние обновляет его и обновляет пользовательский интерфейс. Поэтому наш пользовательский интерфейс прогрессирует по мере изменения состояния. 3. Однонаправленный поток данных. UI в React фактически является функцией состояния, которое означает, что состояние обновляет его и обновляет пользовательский интерфейс. Поэтому наш пользовательский интерфейс прогрессирует по мере изменения состояния.
## Преимущества React ## Преимущества React
Некоторые причины использования React: Некоторые причины использования React:
1. Быстро. Приложения, созданные в React, могут обрабатывать сложные обновления, но при этом не теряя в отзывчивости. 1. Быстро. Приложения, созданные в React, могут обрабатывать сложные обновления, но при этом не теряя в отзывчивости.
2. Modular. Вместо того, чтобы писать большие, плотные файлы кода, вы можете писать много меньших, многоразовых файлов. React модульность может быть красивым решением в JavaScript [проблем ремонтопригодности](https://en.wikipedia.org/wiki/Spaghetti_code) . 2. Modular. Вместо того, чтобы писать большие, плотные файлы кода, вы можете писать много меньших, многоразовых файлов. React модульность может быть красивым решением в JavaScript [проблем ремонтопригодности](https://en.wikipedia.org/wiki/Spaghetti_code) .
3. Масштабируемость. Большие программы, отображающие много изменяющихся данных, - это где React лучше всего работает. 3. Масштабируемость. Большие программы, отображающие много изменяющихся данных, - это где React лучше всего работает.
4. Гибкое. Вы можете использовать React для интересных проектов, которые не имеют никакого отношения к созданию веб-приложения. Люди все еще понимают потенциал React. [Есть возможность исследовать](https://medium.mybridge.co/22-amazing-open-source-react-projects-cb8230ec719f) . 4. Гибкое. Вы можете использовать React для интересных проектов, которые не имеют никакого отношения к созданию веб-приложения. Люди все еще понимают потенциал React. [Есть возможность исследовать](https://medium.mybridge.co/22-amazing-open-source-react-projects-cb8230ec719f) .
@ -66,9 +73,9 @@ React использует виртуальную DOM, чтобы сначала
### сверка ### сверка
React имеет интеллектуальный дифференцирующий алгоритм, который он использует для восстановления только в своем узле DOM, который на самом деле нуждается в регенерации, в то время как он сохраняет все остальное как есть. Этот сложный процесс возможен из-за виртуального DOM React. React имеет интеллектуальный дифференцирующий алгоритм, который он использует для восстановления только в своем узле DOM, который на самом деле нуждается в восстановлении, в то время как он сохраняет все остальное как есть. Этот сложный процесс возможен из-за виртуального DOM React.
Используя виртуальную DOM, React сохраняет последнюю версию DOM в памяти и, когда она имеет новую версию DOM для браузера, эта новая версия DOM также будет в памяти, поэтому React может вычислить разницу между новой и старой версиями , Используя виртуальную DOM, React сохраняет последнюю версию DOM в памяти и, когда она имеет новую версию DOM для браузера, эта новая версия DOM также будет в памяти, поэтому React может вычислить разницу между новой и старой версиями,
Затем React предложит браузеру обновить только вычисляемый diff, а не весь узел DOM. Независимо от того, сколько раз мы обновляем наш интерфейс, React берет в браузер только новые «частичные» обновления. Затем React предложит браузеру обновить только вычисляемый diff, а не весь узел DOM. Независимо от того, сколько раз мы обновляем наш интерфейс, React берет в браузер только новые «частичные» обновления.
@ -80,9 +87,9 @@ React имеет интеллектуальный дифференцирующи
[!["Смотреть](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI) [!["Смотреть](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI)
[### 1 - Настроить код котла с помощью Emmet [### 1 - Установить Boiler Plate Code с помощью Emmet
Давайте начнем с шага 1. Начнем с файла в нашем браузере под названием «index.html». Начнем с кода HTML кода котельного плиты. Для быстрого начала я рекомендую использовать Emmet с любым текстовым редактором, который у вас есть, и в первой строке ввода в `html:5` затем нажав клавишу shift, чтобы получить код ниже. Или вы можете продолжить и скопировать и вставить код снизу. Давайте начнем с шага 1. Начнем с файла в нашем браузере под названием «index.html». Начнем с кода HTML текущего boiler plate. Для быстрого начала я рекомендую использовать Emmet с любым текстовым редактором, который у вас есть, и в первой строке ввода в `html:5` затем нажав клавишу shift, чтобы получить код ниже. Или вы можете продолжить и скопировать и вставить код снизу.
```javascript ```javascript
html:5 html:5
@ -102,16 +109,18 @@ html:5
<body> <body>
</body> </body>
</html> </html>
``` ```
Мы можем заполнить заголовок «Пришло время для React!». Мы можем заполнить заголовок «Пришло время для React!».
Этот контент не будет отображаться на вашей веб-странице. Все, что находится в главном разделе файла HTML, будет метаданных, которые наш браузер будет интерпретировать нашим кодом в разделе тела. Этот заголовок будет отображаться на вкладке для нашей страницы, а не на странице. Этот контент не будет отображаться на вашей веб-странице. Все, что находится в главном разделе файла HTML, будет метаданных, которые наш браузер будет интерпретировать нашим кодом в разделе тела. Этот заголовок будет отображаться на вкладке для нашей страницы, а не на странице.
### 2 - Получить теги скриптов, чтобы использовать силу библиотек React и Babel ### 2 - Получить теги скриптов, чтобы использовать силу библиотек React и Babel
Хорошо, первый элемент отключен от нашего списка. Давайте рассмотрим второй пункт. Мы собираемся настроить среду разработки, используя теги скриптов, чтобы включить React и Babel. Это не настоящая среда разработки. Это будет довольно сложная установка. Это также оставило бы нас с большим количеством кодовых табличек и библиотек, которые отвлекут нас от изучения основ React. Цель этой серии - перейти к основному синтаксису React и получить право на кодирование. Мы будем использовать теги `<script>` чтобы принести библиотеку React, библиотеку React DOM (почему) и библиотеку Babel.
Хорошо, первый элемент первый элемент нашего списка пройден. Давайте рассмотрим второй пункт. Мы собираемся настроить среду разработки, используя теги скриптов, чтобы включить React и Babel. Это не настоящая среда разработки. Это будет довольно сложная установка. Это также оставило бы нас с большим количеством кодовых табличек и библиотек, которые отвлекут нас от изучения основ React. Цель этой серии - перейти к основному синтаксису React и получить возможность программировать. Мы будем использовать теги `<script>`, чтобы принести библиотеку React, библиотеку React DOM (почему) и библиотеку Babel.
```javascript ```javascript
<head> <head>
@ -124,34 +133,64 @@ html:5
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
... ...
<title>Time to React!</title> <title>Time to React!</title>
</head> </head>
``` ```
Вы можете использовать более обновленные версии этих библиотек по мере их выхода. Они не должны создавать никаких изменений для контента, который мы рассматриваем. Вы можете использовать более обновленные версии этих библиотек по мере их выхода. Они не должны создавать никаких изменений для контента, который мы рассматриваем.
Что мы тут делаем? Элемент: HTML `<script>` используется для встраивания или ссылки на исполняемый скрипт. Атрибут «src» указывает на внешние файлы сценариев для библиотеки React, библиотеки ReactDOM и библиотеки Babel. Это похоже на электрическую бритву. В любом случае вам не нравится, как бы необычная электрическая бритва, если вы не можете подключить ее к стене и получить доступ к электричеству. Наш код React, который мы напишем, будет нехорошим для нас, если наш браузер не сможет подключиться к этим библиотекам, чтобы понимать и интерпретировать то, что мы делаем. Это то, как наше приложение получит силу React, мы собираемся вставить React в Dom. Причина, по которой у нас есть React и ReactDOM в виде двух разных библиотек, заключается в том, что существуют такие случаи, как React Native, где рендеринг в DOM не нужен для разработки мобильных устройств, поэтому библиотека была разделена на людей, чтобы принять решение о том, что им нужно в зависимости о проекте, над которым они работают. Поскольку нам понадобится наш React, чтобы добраться до DOM, мы будем использовать оба сценария. Babel - это то, как мы используем сценарий ECMA за пределами ES5 и занимаемся тем, что называется JSX (JavaScript как XML), которое мы будем использовать в React. Мы рассмотрим магию Babel на предстоящем уроке :) Хорошо, мы выполнили шаги 1 и 2. Мы создали код котловой плиты и создали среду разработки.
### 3 - Отрисовка React в DOM Что мы тут делаем? Элемент: HTML `<script>` используется для встраивания или ссылки на исполняемый скрипт.
Атрибут «src» указывает на внешние файлы сценариев для библиотеки React, библиотеки ReactDOM и библиотеки Babel.
Это похоже на электрическую бритву. В любом случае вам не нравится, как бы необычная электрическая бритва,
если вы не можете подключить ее к стене и получить доступ к электричеству. Наш код React, который мы напишем, будет нехорошим для нас,
если наш браузер не сможет подключиться к этим библиотекам, чтобы понимать и интерпретировать то, что мы делаем.
Это то, как наше приложение получит силу React, мы собираемся вставить React в Dom.
Причина, по которой у нас есть React и ReactDOM в виде двух разных библиотек, заключается в том, что существуют такие случаи,
как React Native, где рендеринг в DOM не нужен для разработки мобильных устройств, поэтому библиотека была разделена на людей,
чтобы принять решение о том, что им нужно в зависимости о проекте, над которым они работают. Поскольку нам понадобится наш Реакт,
чтобы добраться до DOM, мы будем использовать оба сценария. Babel - это то, как мы используем сценарий ECMA за пределами ES5 и занимаемся тем,
что называется JSX (JavaScript как XML), которое мы будем использовать в React. Мы рассмотрим магию Вавилона на предстоящем уроке :)
Хорошо, мы выполнили шаги 1 и 2. Мы создали код нашего boiler plate и создали среду разработки.
### 3 - Render React в DOM
Наши следующие два шага будут состоять в том, чтобы выбрать наше местоположение в DOM,
которое мы хотим отобразить для нашего контента React. И используя другой тег скрипта для нашего контента React внутри тела.
Как правило, как хорошая практика разделения, все будет в собственных файлах, а затем связано с этим html-документом.
Мы сделаем это позже на предстоящих уроках. На данный момент мы позволим этому зайти в тело html-документа, в котором мы сейчас находимся.
Теперь мы рассмотрим, как просто выбрать место в DOM для отображения нашего контента React. Мы пойдем в тело.
И лучшая практика заключается не только в том, чтобы бросать React в тег тела, который будет отображаться, но и создать отдельный элемент,
часто div, который можно рассматривать как корневой элемент для вставки содержимого React.
Наши следующие два шага будут состоять в том, чтобы выбрать наше местоположение в DOM, которое мы хотим отобразить для нашего контента React. И используя другой тег скрипта для нашего контента React внутри тела. Как правило, как хорошее разделение опасностей практики, это будет в собственном файле, а затем связано с этим html-документом. Мы сделаем это позже на предстоящих уроках. На данный момент мы позволим этому зайти в тело html-документа, в котором мы сейчас находимся. Теперь мы рассмотрим, как просто выбрать место в DOM для отображения нашего контента React. Мы пойдем в тело. И лучшая практика заключается не только в том, чтобы бросать React в тег тела, который будет отображаться, но и создать отдельный элемент, часто div, который можно рассматривать как корневой элемент для вставки содержимого React.
```javascript ```javascript
<body> <body>
<div id="app">React has not rendered yet</div> <div id="app">React has not rendered yet</div>
</body> </body>
``` ```
Мы создадим простой элемент `<div>` и дадим ему идентификатор «app». Мы собираемся настроить таргетинг на это место, чтобы вставить наш контент React так же, как вы могли бы использовать CSS для таргетинга идентификатора для стиля по вашему выбору. Любой отредактированный контент будет отображаться в тегах div с идентификатором приложения. Тем временем мы оставим текст, говорящий, что «React еще не отображен». Если мы увидим это, когда мы просматриваем нашу страницу, это означает, что где-то мы пропустили рендеринг React. Теперь давайте продолжим и создаем тег script внутри body, где мы будем использовать React впервые. Синтаксис, который нам понадобится для нашего тега скрипта, заключается в добавлении атрибута «type». Указывает тип медиафайла скрипта. Выше в нашей голове мы использовали атрибут src, который указывал на внешние файлы сценариев для библиотеки React, библиотеки ReactDOM и библиотеки Babel.
Мы создадим простой элемент `<div>` и дадим ему идентификатор «app». Мы собираемся настроить таргетинг на это место,
чтобы вставить наш контент React так же, как вы могли бы использовать CSS для таргетинга идентификатора для стиля по вашему выбору.
Любой отредактированный контент будет отображаться в тегах div с идентификатором приложения. Тем временем мы оставим текст, говорящий,
что «React еще не отображен». Если мы увидим это, когда мы просматриваем нашу страницу, это означает, что где-то мы пропустили рендеринг React.
Теперь давайте продолжим и создаем тег скрипта внутри нашего тела, где мы будем создавать, чтобы реагировать в первый раз. Синтаксис,
который нам понадобится для нашего тега скрипта, заключается в добавлении атрибута «type». Указывает тип медиафайла скрипта.
Выше в нашей голове мы использовали атрибут src, который указывал на внешние файлы сценариев для библиотеки React, библиотеки ReactDOM и библиотеки Babel.
```javascript ```javascript
<body> <body>
<div id="app">React has not rendered yet</div> <div id="app">React has not rendered yet</div>
<script type="text/babel"> <script type="text/babel">
</script> </script>
</body> </body>
``` ```
«Тип» скрипта, который мы используем, мы завершим в кавычки и установим его в `"text/babel"` . Нам понадобится эта возможность сразу использовать Babel, поскольку мы работаем с JSX. Во-первых, мы собираемся оказать React в DOM. Для этого мы будем использовать метод `ReactDOM.render()` . Это будет метод, и помните, что метод - это просто функция, привязанная к объекту. Этот метод будет принимать два аргумента. «Тип» скрипта, который мы используем, мы заключим в кавычки и установим его в `"text/babel"`.
Нам понадобится эта возможность сразу использовать Babel, поскольку мы работаем с JSX. Во-первых, мы собираемся оказать React в DOM.
Для этого мы будем использовать метод `ReactDOM.render()`. Это будет метод, и помните, что метод - это просто функция, привязанная к объекту.
Этот метод будет принимать два аргумента.
```javascript ```javascript
<body> <body>
@ -159,10 +198,13 @@ html:5
<script type="text/babel"> <script type="text/babel">
ReactDOM.render(React What, React Where); ReactDOM.render(React What, React Where);
</script> </script>
</body> </body>
``` ```
Первый аргумент - это «что» рендерить. Второй аргумент - это «где» место (в DOM) в которое вы хотите это поместить. Начнем с вызова нашего метода ReactDOM.render(). Наш первый аргумент будет нашим JSX.
Первый аргумент - это «что» реагировать. Второй аргумент - это «где» местоположения, которое вы хотите, чтобы оно было помещено в DOM.
Начнем с вызова нашего метода ReactDOM.render(). Наш первый аргумент будет нашим JSX.
```javascript ```javascript
<body> <body>
@ -173,17 +215,25 @@ html:5
React Where React Where
); );
</script> </script>
</body> </body>
```](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI) ```](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI)
[](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI)[Официальная документация React гласит](https://reactjs.org/docs/introducing-jsx.html) : «Этот синтаксис смешного тега не является ни строкой, ни HTML. Он называется JSX, и это расширение синтаксиса JavaScript. Мы рекомендуем использовать его с React для описания того, как должен выглядеть пользовательский интерфейс. JSX может напомнить вам о языке шаблонов, но он поставляется с полной мощью JavaScript. JSX создает «элементы» для реагирования ». [](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI)[Официальная документация React гласит](https://reactjs.org/docs/introducing-jsx.html) : «Этот синтаксис смешного тега не является ни строкой, ни HTML. Он называется JSX, и это расширение синтаксиса JavaScript. Мы рекомендуем использовать его с React для описания того, как должен выглядеть пользовательский интерфейс. JSX может напомнить вам о языке шаблонов, но он поставляется с полной мощью JavaScript. JSX создает «элементы» для реагирования ».
Часто JSX удивляет людей, которые были разработчиками на некоторое время, потому что это выглядит как HTML. В очень раннем возрасте разработчики обучаются разграничению проблем. HTML имеет свое место, CSS имеет свое место, и JavaScript имеет свое место. Кажется, что JSX размывает линии. Вы используете то, что выглядит как HTML, но, как говорит Facebook, поставляется с полной мощью JavaScript.
Это может вызывать увлечение ветеранами, так что многие учебники по React начинаются без JSX, что может быть довольно сложным. Мы этого не сделаем. Поскольку этот курс направлен на тех, кто очень молод в своей карьере, вы можете не принести эти красные флаги, когда увидите этот синтаксис. Часто JSX удивляет людей, которые были разработчиками на некоторое время, потому что это выглядит как HTML.
В очень раннем возрасте разработчики обучаются разграничению проблем. HTML имеет свое место, CSS имеет свое место, и JavaScript имеет свое место.
Кажется, что JSX размывает линии. Вы используете то, что выглядит как HTML, но, как говорит Facebook, поставляется с полной мощью JavaScript.
И JSX просто интуитивно понятен. Возможно, вы довольно легко прочитали этот код и увидите, что это будет самый большой тег заголовка, отображающий текст «Hello World». Никакой тайны и довольно простой. Теперь давайте посмотрим, каков будет наш второй аргумент.
Это может вызывать увлечение ветеранами, так что многие учебники по React начинаются без JSX, что может быть довольно сложным.
Мы этого не делаем. Поскольку этот курс направлен на тех, кто очень молод в своей карьере, вы не восстаните, когда увидите этот синтаксис.
И JSX просто интуитивно понятен. Возможно, вы довольно легко прочитали этот код и увидите, что это будет самый большой тег заголовка,
отображающий текст «Hello World». Никакой тайны и довольно простой. Теперь давайте посмотрим, каков будет наш второй аргумент.
```javascript ```javascript
<body> <body>
@ -194,30 +244,40 @@ html:5
document.getElementById("app") document.getElementById("app")
); );
</script> </script>
</body> </body>
``` ```
Здесь мы хотим, чтобы наш обработанный контент был передан в дом. Вы, наверное, делали это несколько раз в прошлом. Мы просто наберем `document.getElementById()` . И мы перейдем к аргументу id приложения. И это все. Теперь мы настроим таргетинг на div с id приложения, чтобы вставить наш обработанный контент. Здесь мы хотим, чтобы наш обработанный контент был передан в дом. Вы, наверное, делали это несколько раз в прошлом.
Мы просто наберем `document.getElementById()`. И мы перейдем к аргументу id приложения. И это все.
Теперь мы настроим таргетинг на div с id приложения, чтобы вставить наш обработанный контент.
Мы хотим, чтобы наш контент был сохранен. Идите вперед и откройте это в браузере, и вы увидите «Hello World». Как вы можете догадаться, использование React - это не самый быстрый или лучший способ создать приложение Hello World. Мы пока не видим преимуществ этого. Но теперь мы знаем, что все работает. Мы хотим, чтобы наш контент был сохранен. Скорее откройте это в браузере, и вы увидите «Hello World».
Как вы можете догадаться, использование React - это не самый быстрый или лучший способ создать приложение Hello World.
Мы пока не видим преимуществ этого. Но теперь мы знаем, что все работает.
Идите вперед и откройте консоль и посмотрите на «элементы». Вы можете сделать это на mac с командой + shift + j или в Windows и Linux: Ctrl + Shift + J Скорее откройте консоль и посмотрите на «элементы».
Вы можете сделать это на mac с командой + shift + j или в Windows и Linux: Ctrl + Shift + J
Если вы нажмете на тег заголовка, мы увидим наши библиотеки скриптов, которые мы включили. Тогда мы сможем перейти к тексту нашего документа. Давайте нажимаем на наш div с идентификатором «app». И когда мы это делаем, мы видим наш `<h1>` с содержимым «Hello World». Если мы нажмем на тег заголовка, мы увидим скрипты наших библиотек, которые мы подключили.
Тогда мы сможем перейти к тексту нашего документа. Давайте нажмем на наш div с идентификатором «app».
И когда мы это сделаем, мы увидим наш `<h1>` с содержимым «Hello World».
[Просмотреть весь код здесь](https://github.com/robgmerrill/hello-react/blob/master/section-one/index.html) [Весь код здесь](https://github.com/robgmerrill/hello-react/blob/master/section-one/index.html)
или или
[!["Смотреть](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI) <a href="http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg"
alt="Watch Video Here" width="240" height="180" border="10" /></a>
[ ### Итого
### резюмировать Итак, давайте сделаем краткое описание. В нашем тесте head мы взяли теги скриптов для React, ReactDOM и Babel.
Эти инструменты, в которых наш браузер нуждается в метаданных для чтения нашего кода React и JSX.
Затем мы разместили позицию внутри DOM, которую мы хотели вставить в наш React, создав элемент div с идентификатором «app».
Затем мы создали тег скрипта для ввода нашего кода React. Мы использовали метод ReactDOM.render(),
который принимает два аргумента. «Что» из контента React, в данном случае нашего JSX и второго аргумента - это «где»,
в который вы хотите вставить содержимое React в DOM. В этом случае это место с идентификатором «app».
Итак, давайте сделаем краткое описание. В нашем тесте head мы схватили теги скриптов для React, ReactDOM и Babel. Это инструменты, которые наш браузер нуждается в метаданных для чтения нашего кода React и JSX. Затем мы разместили позицию внутри DOM, которую мы хотели вставить в наш React, создав элемент div с идентификатором «app». Затем мы создали тег скрипта для ввода нашего кода React. Мы использовали метод ReactDOM.render (), который принимает два аргумента. «Что» из контента React, в данном случае нашего JSX и второго аргумента - это «где», в которое вы хотите вставить содержимое React в DOM. В этом случае это место с идентификатором «app».
](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI)
[В качестве альтернативы JSX вы можете использовать компилятор ES6 и Javascript, например, Babel.](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI) [https://babeljs.io/](https://babeljs.io/) [В качестве альтернативы JSX вы можете использовать компилятор ES6 и Javascript, например, Babel.](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI) [https://babeljs.io/](https://babeljs.io/)
@ -225,8 +285,8 @@ html:5
* [Главная страница](https://reactjs.org/) * [Главная страница](https://reactjs.org/)
* [Твиттер Дэн Абрамов](https://twitter.com/dan_abramov) * [Твиттер Дэн Абрамов](https://twitter.com/dan_abramov)
* [Реагировать на учебники на Egghead.io](https://egghead.io/browse/frameworks/react) * [Учебники по React на Egghead.io](https://egghead.io/browse/frameworks/react)
### источники ### Источники
1. [«Результаты опроса разработчиков 2017.»](https://insights.stackoverflow.com/survey/2017#technology-most-loved-dreaded-and-wanted-frameworks-libraries-and-other-technologies) _Переполнение стека._ Доступ: 28 октября 2017 года. 1. [«Результаты опроса разработчиков 2017.»](https://insights.stackoverflow.com/survey/2017#technology-most-loved-dreaded-and-wanted-frameworks-libraries-and-other-technologies) _Переполнение стека._ Доступ: 28 октября 2017 года.

16
guide/russian/react/installation/index.md
View File

@ -6,15 +6,13 @@ localeTitle: Монтаж
### Создание нового проекта React ### Создание нового проекта React
Вы можете просто вставить библиотеку React на свою веб-страницу так: 2 : Вы можете просто встроить библиотеку React на свою веб-страницу так как в <sup>2</sup>:
```html ```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/cjs/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/cjs/react.production.min.js"></script>
``` ```
Умные программисты хотят использовать более практичный и продуктивный способ: [создать приложение React](https://github.com/facebookincubator/create-react-app) Умные программисты хотят использовать более практичный и продуктивный способ: [создать приложение React](https://github.com/facebookincubator/create-react-app)
```bash ```bash
npm install -g create-react-app npm install -g create-react-app
create-react-app my-app create-react-app my-app
@ -23,16 +21,16 @@ npm install -g create-react-app
npm start npm start
``` ```
Это создаст среду разработки, чтобы вы могли использовать новейшие функции JavaScript, обеспечить хороший опыт разработчиков и оптимизировать свое приложение для производства. Это создаст среду разработки, чтобы вы могли использовать новейшие функции JavaScript, обеспечит хороший опыт разработчиков и оптимизирует ваше приложение для производства.
`npm start` запустит сервер разработки, который позволяет осуществлять живую перезагрузку 3 . `npm start` запустит сервер разработки, который позволяет осуществлять live reloading<sup>3</sup>.
После того, как вы закончите свой проект и готовы развернуть свое приложение на производство, вы можете просто использовать `npm run build` для создания оптимизированной сборки вашего приложения в папке `build` . После того, как вы закончите свой проект и готовы развернуть свое приложение на production, вы можете просто использовать `npm run build` для создания оптимизированной сборки вашего приложения в папке `build` .
#### Полезные ссылки #### Полезные ссылки
[Создать репозиторий приложений React](https://github.com/facebookincubator/create-react-app#create-react-app-) [Создать репозиторий приложения React](https://github.com/facebookincubator/create-react-app#create-react-app-)
#### источники #### Источники
[1\. Учебное пособие по установке](https://reactjs.org/docs/installation.html) [2\. Ссылка на минимальную библиотеку JavaScript React на cdnjs.org](https://cdnjs.com/libraries/react) [3\. Команда запуска npm](https://docs.npmjs.com/cli/start) [1\. Учебное пособие по установке](https://reactjs.org/docs/installation.html) [2\. Ссылка на минимизированную библиотеку JavaScript React на cdnjs.org](https://cdnjs.com/libraries/react) [3\. Команда запуска npm](https://docs.npmjs.com/cli/start)

22
guide/russian/react/jsx/index.md
View File

@ -6,7 +6,7 @@ localeTitle: JSX
> JSX является коротким для JavaScript XML. > JSX является коротким для JavaScript XML.
JSX - это выражение, которое использует допустимые HTML-инструкции в JavaScript. Вы можете назначить это выражение переменной и использовать ее в другом месте. Вы можете комбинировать другие действующие выражения JavaScript и JSX в этих выражениях HTML, помещая их в фигурные скобки ( `{}` ). Babel далее компилирует JSX в объект типа `React.createElement()` . JSX - это выражение, которое использует допустимые HTML-инструкции в JavaScript. Вы можете назначить это выражение переменной и использовать ее в другом месте. Вы можете комбинировать другие действующие выражения JavaScript и JSX в этих выражениях HTML, помещая их в фигурные скобки ( `{}` ). Babel, в дальнейшем, скомпилирует JSX в объект типа `React.createElement()` .
### Однострочные и многострочные выражения ### Однострочные и многострочные выражения
@ -27,19 +27,19 @@ const two = (
); );
``` ```
### Использование только тегов HTML ### Использование только HTML тегов
```jsx ```jsx
const greet = <h1>Hello World!</h1>; const greet = <h1>Hello World!</h1>;
``` ```
### Объединение выражения JavaScript с тегами HTML ### Объединение выражения JavaScript с HTML тегами
Мы можем использовать переменные JavaScript в фигурных скобках. Мы можем использовать переменные JavaScript в фигурных скобках.
```jsx ```jsx
const who = "Quincy Larson"; const who = "Quincy Larson";
const greet = <h1>Hello {who}!</h1>; const greet = <h1>Hello {who}!</h1>;
``` ```
Мы также можем вызвать другие функции JavaScript в фигурных скобках. Мы также можем вызвать другие функции JavaScript в фигурных скобках.
@ -47,25 +47,25 @@ const who = "Quincy Larson";
```jsx ```jsx
function who() { function who() {
return "World"; return "World";
} }
const greet = <h1>Hello {who()}!</h1>; const greet = <h1>Hello {who()}!</h1>;
``` ```
### Разрешен только один родительский тег ### Только один родительский тег разрешен
Выражение JSX должно иметь только один родительский тег. Мы можем добавить несколько тегов, вложенных только в родительский элемент. Выражение JSX должно иметь только один родительский тег. Мы можем добавить несколько тегов, обязательно вложенных в родительский элемент.
```jsx ```jsx
// This is valid. // This is valid.
const tags = ( const tags = (
<ul> <ul>
<li>Once</li> <li>Once</li>
<li>Twice</li> <li>Twice</li>
</ul> </ul>
); );
// This is not valid. // This is not valid.
const tags = ( const tags = (
<h1>Hello World!</h1> <h1>Hello World!</h1>
<h3>This is my special list:</h3> <h3>This is my special list:</h3>
<ul> <ul>

39
guide/russian/react/life-cycle-methods-of-a-component/index.md
View File

@ -1,19 +1,20 @@
--- ---
title: Life Cycle Methods Of A Component title: Life Cycle Methods Of A Component
localeTitle: Методы жизненного цикла компонента localeTitle: Методы жизненного цикла компоненты
--- ---
## Методы жизненного цикла компоненты
Когда мы начинаем работать с компонентами, нам нужно выполнить несколько действий для обновления состояния или для выполнения некоторых действий, когда что-то изменяется в этом компоненте. В этом случае пригодятся методы жизненного цикла компонента! Поэтому давайте в этой статье погрузимся в них.
В широком смысле мы можем разделить методы жизненного цикла на **3** категории. В широком смысле мы можем разделить методы жизненного цикла на **3** категории.
1. Mounting
1. монтаж 2. Updating
2. обновление 3. Unmounting
Поскольку методы жизненного цикла являются очевидными, я просто упомянул имена методов. Пожалуйста, не стесняйтесь внести свой вклад в эту статью, если это необходимо.
## Mounting:
а. `constructor()` а. `constructor()`
@ -23,7 +24,7 @@ localeTitle: Методы жизненного цикла компонента
д. `componentDidMount()` д. `componentDidMount()`
## Updating:
а. `componentWillRecieveProps()` а. `componentWillRecieveProps()`
@ -35,25 +36,25 @@ localeTitle: Методы жизненного цикла компонента
е. `componentDidUpdate()` е. `componentDidUpdate()`
## Unmounting:
а. `componentWillUnmount()` а. `componentWillUnmount()`
## Некоторые интересные факты, которые можно заметить:
* `constructor` , `componentWillMount` , `componentDidMount` и `componentWillUnmount` будут вызываться только один раз в течение жизненного цикла компонента. * `constructor` , `componentWillMount` , `componentDidMount` и `componentWillUnmount` будут вызываться только один раз в течение жизненного цикла компонента.
* `constructor` , `componentWillMount` , `componentDidMount` и `componentWillUnmount` будут вызываться только один раз в течение жизненного цикла компонента. * `componentWillUpdate` и `componentDidUpdate` будет выполняться тогда и только тогда, когда `shouldComponentUpdate` возвращает true.
* `componentWillUpdate` и `componentDidUpdate` будет выполняться только тогда и только тогда, когда `shouldComponentUpdate` возвращает true. * `componentWillUnmount()` будет вызываться непосредственно перед unmounting любого компонента и, следовательно, может использоваться для освобождения используемой памяти, закрытия любых подключений к БД и т.д.
Многие вещи можно узнать, погрузившись в код. Так что заставляйте себя больше программировать.
Заметка: Заметка:
> «Предупреждения об устаревании будут включены с будущим выпуском 16.x, **но устаревшие жизненные циклы будут продолжать работать до версии 17.**<sup>1</sup>
> >
> > «Даже в версии 17 все равно будет возможно использовать их, но они будут сглажены префиксом 'UNSAFE_', чтобы указать, что они могут вызвать проблемы. Мы также подготовили [автоматический сценарий, чтобы переименовать их](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) в существующий код». 1
Другими словами, эти методы жизненного цикла будут по-прежнему доступны как:
* `UNSAFE_componentWillMount` * `UNSAFE_componentWillMount`
* `UNSAFE_componentWillReceiveProps` * `UNSAFE_componentWillReceiveProps`
@ -66,9 +67,9 @@ localeTitle: Методы жизненного цикла компонента
* `getDerivedStateFromProps` будет более безопасной альтернативой `componentWillReceiveProps` . * `getDerivedStateFromProps` будет более безопасной альтернативой `componentWillReceiveProps` .
* `getSnapshotBeforeUpdate` будет добавлен для поддержки безопасного чтения свойств из обновлений DOM. * `getSnapshotBeforeUpdate` будет добавлен для поддержки безопасного чтения свойств из обновлений DOM.
Многие вещи можно узнать, погрузившись в код. Так что заставляйте себя больше программировать.
### Источники
1. [Вон, Брайан. «React v16.3.0: новый жизненный цикл и контекстный API». 29 марта 2018 года. Доступ: 22 мая 2018 года.](https://reactjs.org/blog/2018/03/29/react-v-16-3.html) 1. [Вон, Брайан. «React v16.3.0: новый жизненный цикл и контекстный API». 29 марта 2018 года. Доступ: 22 мая 2018 года.](https://reactjs.org/blog/2018/03/29/react-v-16-3.html)

7
guide/russian/react/props/index.md
View File

@ -1,8 +1,10 @@
--- ---
title: Props title: Props
localeTitle: Свойства localeTitle: Props
--- ---
### Что такое свойства? ### Что такое props?
Props (упр. от слова properties) - это дата, переданная в компонент. Они неизменяемы (только для чтения).
Свойства - это произвольные данные, переданные в компонент. Все компоненты React, должны действовать как чистые функции (оставлять свойства неизменными). Свойства - это произвольные данные, переданные в компонент. Все компоненты React, должны действовать как чистые функции (оставлять свойства неизменными).
@ -25,3 +27,4 @@ localeTitle: Свойства
``` ```
name является свойством, которое через props.name может получить компонент Welcome. name является свойством, которое через props.name может получить компонент Welcome.

68
guide/russian/react/react-props-state/index.md
View File

@ -1,24 +1,24 @@
--- ---
title: React Props and State title: React Props and State
localeTitle: Реактивы и государство localeTitle: React Props и State
--- ---
## Опоры и государство ## Props & State
Существует два типа данных, которые управляют компонентом: реквизитом и состоянием. Реквизит устанавливается родителем, и они фиксируются на протяжении всего жизненного цикла компонента. Для данных, которые будут меняться, мы должны использовать состояние. Существует два типа данных, которые управляют компонентом: props и state. Props устанавливается родителем, и они фиксируются на протяжении всего жизненного цикла компонента. Для данных, которые будут меняться, мы должны использовать состояние.
### Реквизит ### Props
Большинство компонентов могут быть настроены с различными параметрами при их создании. Эти параметры создания называются `props` . Большинство компонентов могут быть настроены с различными параметрами при их создании. Эти параметры создания называются `props`.
Ваши собственные компоненты также могут использовать реквизиты. Это позволяет вам создать один компонент, который используется во многих разных местах вашего приложения, с немного разными свойствами в каждом месте. См. `this.props` в вашей функции рендеринга: Ваши собственные компоненты также могут использовать props. Это позволяет вам создать один компонент, который используется во многих разных местах вашего приложения, с немного разными свойствами в каждом месте. См. `this.props` в вашей функции рендеринга:
``` ```
class Welcome extends React.Component { class Welcome extends React.Component {
render() { render() {
return <h1>Hello {this.props.name}</h1>; return <h1>Hello {this.props.name}</h1>;
} }
} }
const element = <Welcome name="neel" />; const element = <Welcome name="neel" />;
``` ```
Строка `<Welcome name="neel" />` создает имя свойства со значением `"neel"` . Строка `<Welcome name="neel" />` создает имя свойства со значением `"neel"` .
@ -27,7 +27,7 @@ class Welcome extends React.Component {
``` ```
function Welcome(props) { function Welcome(props) {
return <h1>Hello {props.name}</h1>; return <h1>Hello {props.name}</h1>;
} }
``` ```
Мы можем сделать свойство name необязательным, добавив defaultProps в класс приветствия: Мы можем сделать свойство name необязательным, добавив defaultProps в класс приветствия:
@ -36,30 +36,30 @@ class Welcome extends React.Component {
render() { render() {
return <h1>Hello {this.props.name}</h1>; return <h1>Hello {this.props.name}</h1>;
} }
} }
Welcome.defaultProps = { Welcome.defaultProps = {
name: "world", name: "world",
}; };
``` ```
Если Welcome вызывается без имени, он просто отображает `<h1> Hello world</h1>` . Если Welcome вызывается без имени, он просто отображает `<h1> Hello world</h1>`.
Таким образом, `props` может исходить от родителя или может быть установлен самим компонентом. Таким образом, `props` может исходить от родителя или может быть установлен самим компонентом.
Раньше вы меняли реквизит с помощью setProps и replaceProps, но они **устарели** . Во время жизненного цикла компонента реквизит не должен меняться (считайте его неизменным). Раньше вы меняли props с помощью setProps и replaceProps, но они **устарели**. Во время жизненного цикла компонента props не должен меняться (считайте его неизменным).
Поскольку реквизиты передаются, и они не могут измениться, вы можете подумать о любом компоненте React, который использует только реквизит (и не состояние) как «чистый», то есть он всегда будет отображать один и тот же результат с одним и тем же входом. Это делает их очень простыми для тестирования. Поскольку props передаются, и они не могут измениться, вы можете подумать о любом компоненте React, который использует только props (и не состояние) как «чистый», то есть он всегда будет отображать один и тот же результат с одним и тем же входом. Это делает их очень простыми для тестирования.
### состояние ### State
Как и `props` , `state` хранит информацию о компоненте. Однако вид информации и то, как она обрабатывается, различна. Как и `props`, `state` (далее `состояния`) хранит информацию о компоненте. Однако вид информации и то, как она обрабатывается, различен.
По умолчанию компонент не имеет состояния. Компонент `Welcome` сверху является апатридом: По умолчанию компонент не имеет состояния. Компонент `Welcome` сверху является апатридом:
``` ```
function Welcome(props) { function Welcome(props) {
return <h1>Hello {props.name}</h1>; return <h1>Hello {props.name}</h1>;
} }
``` ```
Когда компонент должен отслеживать информацию между визуализациями, сам компонент может создавать, обновлять и использовать состояние. Когда компонент должен отслеживать информацию между визуализациями, сам компонент может создавать, обновлять и использовать состояние.
@ -89,10 +89,10 @@ class Button extends React.Component {
Clicked {this.state.count} times Clicked {this.state.count} times
</button>); </button>);
} }
} }
``` ```
### состояние создается в компоненте ### State создается в компоненте
Давайте посмотрим на метод `constructor` : Давайте посмотрим на метод `constructor` :
``` ```
@ -101,12 +101,12 @@ constructor() {
this.state = { this.state = {
count: 0, count: 0,
}; };
} }
``` ```
Здесь состояние получает исходные данные. Исходные данные могут быть жестко закодированы (как указано выше), но могут также поступать из `props` . Здесь состояние получает исходные данные. Исходные данные могут быть жестко закодированы (как указано выше), но могут также поступать из `props` .
### `state` изменчиво ### `state` изменчив
Вот метод `updateCount` : Вот метод `updateCount` :
``` ```
@ -114,32 +114,32 @@ updateCount() {
this.setState((prevState, props) => { this.setState((prevState, props) => {
return { count: prevState.count + 1 } return { count: prevState.count + 1 }
}); });
} }
``` ```
Мы меняем состояние, чтобы отслеживать общее количество кликов. Важным битом является setState. Во-первых, обратите внимание, что setState принимает функцию, потому что setState может запускаться асинхронно. Он должен принимать функцию обратного вызова, а не напрямую обновлять состояние. Вы можете видеть, что у нас есть доступ к prevState в обратном вызове, это будет содержать предыдущее состояние, даже если состояние уже обновлено где-то в другом месте. Мы меняем состояние, чтобы отслеживать общее количество кликов. Важным момантом является setState. Во-первых, обратите внимание, что setState принимает функцию, потому что setState может запускаться асинхронно. Он должен принимать функцию обратного вызова, а не напрямую обновлять состояние. Вы можете видеть, что у нас есть доступ к prevState в обратном вызове, это будет содержать предыдущее состояние, даже если состояние уже обновлено где-то в другом месте.
Реакция идет на один шаг лучше, setState обновляет объект `state` **и** автоматически ретранслирует компонент. React идет на один шаг лучше, setState обновляет объект `state` **и** автоматически ретранслирует компонент.
### предупреждения о `state` ### предупреждения о `state`
> Заманчиво написать `this.state.count = this.state.count + 1` . > Заманчиво написать `this.state.count = this.state.count + 1` .
**Не делайте этого.** React не может прослушать состояние, которое будет обновляться таким образом, поэтому ваш компонент не будет повторно отображать. Всегда используйте `setState` . **Не делайте этого.** React не может прослушать состояние, которое будет обновляться таким образом, поэтому ваш компонент не будет повторно отображаться. Всегда используйте `setState`.
Также может возникнуть соблазн написать что-то вроде этого: Также может возникнуть соблазн написать что-то вроде этого:
``` ```
// DO NOT USE // DO NOT USE
this.setState({ this.setState({
count: this.state.count + 1 count: this.state.count + 1
}); });
``` ```
Хотя это может показаться разумным, оно не вызывает ошибок, и вы можете найти примеры, которые используют этот синтаксис в Интернете, это неправильно. Это не учитывает асинхронный характер, который может использовать `setState` и может вызывать ошибки с отсутствием данных состояния синхронизации. Хотя это может показаться разумным, оно не вызывает ошибок, и вы можете найти примеры, которые используют этот синтаксис в Интернете, но это неправильно. Это не учитывает асинхронный характер, который может использовать `setState` и может вызывать ошибки с отсутствием данных состояния синхронизации.
### Программа продолжается !!! ### Программа продолжается!!!
И , наконец, `render` И, наконец, `render`
``` ```
render() { render() {
return (<button return (<button
@ -147,11 +147,11 @@ render() {
> >
Clicked {this.state.count} times Clicked {this.state.count} times
</button>); </button>);
} }
``` ```
`onClick={() => this.updateCount()}` означает, что при нажатии кнопки будет вызываться метод updateCount. Нам нужно использовать **функцию со стрелкой** ES6, так что updateCount будет иметь доступ к состоянию этого экземпляра. `onClick={() => this.updateCount()}` означает, что при нажатии кнопки будет вызываться метод updateCount. Нам нужно использовать **функцию со стрелкой** ES6, так что updateCount будет иметь доступ к состоянию этого экземпляра.
Текст, отображаемый на кнопке, - это `Clicked {this.state.count} times` , который будет использовать то, что this.state.count находится во время рендеринга. Текст, отображаемый на кнопке - это `Clicked {this.state.count} times`, который будет использовать значение, которое находится в this.state.count во время рендеринга.
Дополнительная информация о: [**Реагирует реквизит и состояние**](https://facebook.github.io/react-vr/docs/components-props-and-state.html) Дополнительная информация: [**React Props и State**](https://facebook.github.io/react-vr/docs/components-props-and-state.html)

24
guide/russian/react/react-router/index.md
View File

@ -7,38 +7,48 @@ localeTitle: React Router
# Установка # Установка
React Router был разбит на три пакета: `react-router` , `react-router-dom` и `react-router-native` . React Router был разбит на три пакета: `react-router`, `react-router-dom` и `react-router-native`.
Вам почти никогда не придется устанавливать react-router напрямую. Этот пакет предоставляет основные компоненты и функции маршрутизации для приложений React Router. Оставшиеся два пакета предоставляют компоненты специфические для среды исполнения (браузеры и react-native), но оба они также экспортируют все необходимое, что экспортируется пакетом react-router.
Мы создаем веб-сайт (что-то, что будет запускаться в браузерах), поэтому мы установим response-router-dom. Вам почти никогда не придется устанавливать react-router напрямую. Этот пакет предоставляет основные компоненты и функции маршрутизации для приложений React Router. Другие два предоставляют специфические для среды (браузеры и реагирующие на) компоненты, но оба они также реэкспортируют все экспортные react-router.
Мы создаем веб-сайт (что-то, что будет запускаться в браузерах), поэтому мы нам надо установить response-router-dom.
`npm install --save react-router-dom` `npm install --save react-router-dom`
# Маршрутизатор # Маршрутизатор
При запуске нового проекта вам необходимо определить, какой тип маршрутизатора использовать. В нашем случае, для проектов работающих в браузере, существуют `<BrowserRouter>` и `<HashRouter>`. `<BrowserRouter>` следует использовать, когда у вас есть сервер, который будет обрабатывать динамические запросы (знает, как реагировать на любой возможный URI), в то время как `<HashRouter>` должен использоваться для статических веб-сайтов (где сервер может отвечать только на запросы файлов, о которых он знает).
Обычно рекомендуется использовать `<BrowserRouter>`, но если ваш сайт будет размещен на сервере, который обслуживает только статические файлы, то маршрутизатор `<HashRouter>` является хорошим решением. При запуске нового проекта вам необходимо определить, какой тип маршрутизатора использовать. Для проектов на базе браузера есть также компоненты <BrowserRouter> и <HashRouter>. `<BrowserRouter>` вы должны использовать еслить у вас есть сервер с обработкой динамических запросов (знает как ответить на любой возможный URI), в то время как <HashRouter> должен использоваться для статических сайтов (где сервер может ответить только на запросы файлов о которых он знает).
Обычно рекомендуется использовать `<BrowserRouter>`, но если ваш сайт будет размещен на сервере, который обслуживает только статические файлы, то `<HashRouter>` является хорошим решением.
Для нашего проекта мы сделаем допущение, что веб-сайт поддерживаться динамическим сервером, поэтому нашим компонентом маршрутизатора будет является `<BrowserRouter>` . Для нашего проекта мы сделаем допущение, что веб-сайт поддерживаться динамическим сервером, поэтому нашим компонентом маршрутизатора будет является `<BrowserRouter>` .
# Импортирование # Импортирование
```javascript ```javascript
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
``` ```
## Компонент Link ## Компонент Link
Теперь давайте добавим навигацию, чтобы у нас получилось перемещаться между страницами. Теперь давайте добавим навигацию, чтобы у нас получилось перемещаться между страницами.
Для этого мы будем использовать компонент `<Link>` . Использование компонента `<Link>` похоже на использование тегов ссылок в html. Для этого мы будем использовать компонент `<Link>` . Использование компонента `<Link>` похоже на использование тегов ссылок в html.
Из официальной документации: Из официальной документации:
Основной способ реализации перемещения по вашему приложению. Компонент `<Link>` отрисовывает полностью рабочий тег ссылки, с соответствующим адресом href. Для начала создадим компонент Nav. Наш компонент Nav будет содержать компоненты `<Link>` и выглядит следующим образом: Основной способ реализации перемещения по вашему приложению. Компонент `<Link>` отрисовывает полностью рабочий тег ссылки, с соответствующим адресом href. Для начала создадим компонент Nav. Наш компонент Nav будет содержать компоненты `<Link>` и выглядит следующим образом:
```javascript ```javascript
const Nav = () => ( const Nav = () => (
@ -46,5 +56,7 @@ const Nav = () => (
<Link to='/'>Home</Link>&nbsp; <Link to='/'>Home</Link>&nbsp;
<Link to='/address'>Address</Link> <Link to='/address'>Address</Link>
</div> </div>
)
)
``` ```

20
guide/russian/react/render-props-component/index.md
View File

@ -1,10 +1,10 @@
--- ---
title: Render Props Component title: Render Props Component
localeTitle: Компонент рендеринга реквизита localeTitle: Рендеринг props компонент
--- ---
## Компонент рендеринга реквизита ## Рендеринг props компонент
Рендеринг реквизита - это передовая модель React, но так просто! Рендеринг props - это передовая модель React, да, так просто!
### пример ### пример
@ -13,7 +13,7 @@ localeTitle: Компонент рендеринга реквизита
```jsx ```jsx
import React, { PureComponent } from "react"; import React, { PureComponent } from "react";
class Toggle extends PureComponent { class Toggle extends PureComponent {
state = { state = {
on: false on: false
}; };
@ -31,12 +31,12 @@ import React, { PureComponent } from "react";
toggle: this.toggle toggle: this.toggle
}); });
} }
} }
export default Toggle; export default Toggle;
``` ```
Этот компонент Toggle возвращает его состояние `state.on` и функцию toggle. Который может быть использован в его дочерних компонентах. Этот компонент Toggle возвращает состояние его дочерних элементов `state.on` и функцию toggle. Которые могут быть использованы в его дочерних компонентах.
Этот Toggle можно использовать следующим образом: Этот Toggle можно использовать следующим образом:
@ -48,11 +48,11 @@ import React, { PureComponent } from "react";
{on && <h1>I can be toggled on or off!</h1>} {on && <h1>I can be toggled on or off!</h1>}
</Fragment> </Fragment>
)} )}
</Toggle> </Toggle>
``` ```
Как вы можете видеть, функция переключения может использоваться дочерней кнопкой Button для переключения некоторого содержимого. if on is true, h1-tag будет отображаться иначе. Как вы можете заметить, функция переключения может использоваться дочерней кнопкой Button для переключения некоторого содержимого. if on is true, h1-tag будет отображаться иначе.
## Другие источники ## Другие источники
* [Реагировать на документы: Render реквизит](https://reactjs.org/docs/render-props.html) * [React docs: Render реквизит](https://reactjs.org/docs/render-props.html)

50
guide/russian/react/state-vs-props/index.md
View File

@ -1,6 +1,5 @@
--- ---
title: State vs Props title: State vs Props
localeTitle: Состояние vs свойства localeTitle: Состояние vs свойства
--- ---
## Состояние vs свойства ## Состояние vs свойства
@ -16,9 +15,11 @@ localeTitle: Состояние vs свойства
См. Приведенный ниже пример, чтобы получить представление о состоянии: См. Приведенный ниже пример, чтобы получить представление о состоянии:
#### Person.js #### Person.js
```javascript ```javascript
import React from 'react'; import React from 'react';
class Person extends React.Component{ class Person extends React.Component{
@ -45,48 +46,47 @@ localeTitle: Состояние vs свойства
} }
} }
export default Person; export default Person;
``` ```
В приведенном выше примере `age` - это состояние компонента `Person`.
В приведенном выше примере `age` - это состояние компонента `Person` . ## Props:
## Свойства: * Props похожи на аргументы метода. Они передаются компоненту, в котором используется этот компонент.
* Props неизменен. Они доступны только для чтения.
* Свойства похожи на аргументы метода. Они передаются компоненту, в котором используется этот компонент.
* Свойства неизменяемы. Они доступны только для чтения.
См. Пример ниже, чтобы получить представление о свойствах:
См. Пример ниже, чтобы получить представление о props:
#### Person.js #### Person.js
```javascript ```javascript
import React from 'react';
class Person extends React.Component{ import React from 'react';
render(){
return( class Person extends React.Component{
<div> render(){
<label>I am a {this.props.character} person.</label> return(
</div> <div>
); <label>I am a {this.props.character} person.</label>
} </div>
);
} }
}
export default Person; export default Person;
const person = <Person character = "good"></Person> const person = <Person character = "good"></Person>
``` ```
В приведенном выше примере `const person = <Person character = "good"></Person>` мы передаем `character = "good"` prop к компоненту `Person`.
В приведенном выше примере `const person = <Person character = "good"></Person>` мы передаем `character = "good"` свойство к компоненту `Person` . Это дает результат как «Я хороший человек», действительно это я.
Это дает результат как "I am a good person". Гораздо больше узнать о state и props. Многие вещи можно узнать, фактически погрузившись в кодирование. Так что заставляйте себя программировать.
Гораздо больше узнать о состояниях и свойствах можно только на практике. Так что заставляйте свой руки писать код. При необходимости вы можете найти меня на [твиттере](https://twitter.com/getifyJr) .
При необходимости пишите мне в [твиттере](https://twitter.com/getifyJr) . Счастливого программирования!!!
Счастливого программирования !!!

46
guide/russian/react/state/index.md
View File

@ -1,12 +1,12 @@
--- ---
title: State title: State
localeTitle: состояние localeTitle: State
--- ---
# состояние # State
Состояние - это место, откуда поступают данные. State (состояние) - это место, откуда поступают данные.
Мы всегда должны стараться максимально упростить наше состояние и свести к минимуму количество компонентов состояния. Если у нас есть, например, десять компонентов, которым нужны данные из состояния, мы должны создать один компонент контейнера, который будет сохранять состояние для всех из них. Мы всегда должны стараться максимально упростить наше состояние и свести к минимуму количество компонентов состояния. Если у нас есть, например, десять компонентов, которым нужны данные из состояния, мы должны создать один компонент контейнера, который будет сохранять состояние для них всех.
Состояние в основном похоже на глобальный объект, доступный везде в компоненте. Состояние в основном похоже на глобальный объект, доступный везде в компоненте.
@ -69,7 +69,7 @@ import React from 'react';
export default App; export default App;
``` ```
## Состояние обновления ## Обновление State
Вы можете изменить данные, хранящиеся в состоянии вашего приложения, используя метод `setState` на вашем компоненте. Вы можете изменить данные, хранящиеся в состоянии вашего приложения, используя метод `setState` на вашем компоненте.
@ -79,7 +79,7 @@ this.setState({ value: 1 });
Имейте в виду, что `setState` является асинхронным, поэтому вы должны быть осторожны при использовании текущего состояния для установки нового состояния. Хорошим примером этого может быть, если вы хотите увеличить значение в своем состоянии. Имейте в виду, что `setState` является асинхронным, поэтому вы должны быть осторожны при использовании текущего состояния для установки нового состояния. Хорошим примером этого может быть, если вы хотите увеличить значение в своем состоянии.
#### Неправильный путь #### Неправильно
```js ```js
this.setState({ value: this.state.value + 1 }); this.setState({ value: this.state.value + 1 });
@ -87,37 +87,13 @@ this.setState({ value: this.state.value + 1 });
Это может привести к непредвиденному поведению в вашем приложении, если код выше вызывается несколько раз в том же цикле обновлений. Чтобы этого избежать, вы можете передать функцию обратного вызова `setState` для `setState` вместо объекта. Это может привести к непредвиденному поведению в вашем приложении, если код выше вызывается несколько раз в том же цикле обновлений. Чтобы этого избежать, вы можете передать функцию обратного вызова `setState` для `setState` вместо объекта.
#### Правильный путь #### Правильно
```js ```js
this.setState(prevState => ({ value: prevState.value + 1 })); this.setState(prevState => ({ value: prevState.value + 1 }));
``` ```
## Состояние обновления ##### Правильнее
Вы можете изменить данные, хранящиеся в состоянии вашего приложения, используя метод `setState` на вашем компоненте.
```js
this.setState({value: 1});
```
Имейте в виду, что `setState` может быть асинхронным, поэтому вы должны быть осторожны при использовании текущего состояния для установки нового состояния. Хорошим примером этого может быть, если вы хотите увеличить значение в своем состоянии.
##### Неправильный путь
```js
this.setState({value: this.state.value + 1});
```
Это может привести к непредвиденному поведению в вашем приложении, если код выше вызывается несколько раз в том же цикле обновлений. Чтобы этого избежать, вы можете передать функцию обратного вызова `setState` для `setState` вместо объекта.
##### Правильный путь
```js
this.setState(prevState => ({value: prevState.value + 1}));
```
##### Чистый путь
``` ```
this.setState(({ value }) => ({ value: value + 1 })); this.setState(({ value }) => ({ value: value + 1 }));
``` ```
@ -126,6 +102,6 @@ this.setState(({ value }) => ({ value: value + 1 }));
### Больше информации ### Больше информации
* [Реакция - состояние и жизненный цикл](https://reactjs.org/docs/state-and-lifecycle.html) * [React - State and Lifecycle](https://reactjs.org/docs/state-and-lifecycle.html)
* [Реакция - подъемное положение вверх](https://reactjs.org/docs/lifting-state-up.html) * [React - Lifting State Up](https://reactjs.org/docs/lifting-state-up.html)
* [React Native - State Up](https://facebook.github.io/react-native/docs/state.html) * [React Native - State Up](https://facebook.github.io/react-native/docs/state.html)

72
guide/russian/react/what-are-react-props/index.md
View File

@ -1,7 +1,8 @@
--- ---
title: React TypeChecking with PropTypes title: React TypeChecking with PropTypes
localeTitle: React TypeChecking with PropTypes localeTitle: React TypeChecking с помошью PropTypes
--- ---
## React PropTypes
Они служат в качестве метода проверки типов, поскольку приложение имеет тенденцию к росту, при этом очень большая база ошибок, как правило, исправляется с использованием этой функции. Они служат в качестве метода проверки типов, поскольку приложение имеет тенденцию к росту, при этом очень большая база ошибок, как правило, исправляется с использованием этой функции.
@ -15,17 +16,18 @@ localeTitle: React TypeChecking with PropTypes
npm install --save prop-types npm install --save prop-types
``` ```
После этого, на самом деле, доступен целый ряд валидаторов, которые могут быть использованы для обеспечения того, чтобы данные, получаемы разработчиком верны.
Когда отображается недопустимое значение, в консоли JavaScript появится предупреждение.
Обратите внимание, что по соображениям производительности определенные PropTypes проверяются только в режиме разработки. Обратите внимание, что по соображениям производительности определенные PropTypes проверяются только в режиме разработки.
Также, напротив, состояние компонента, которое можно манипулировать по мере необходимости, эти props только для чтения.
Это значение не может быть изменено компонентой.
## Доступные PropTypes
Ниже пример кода с различными валидаторами, предоставляемыми пакетом, и пример как их добавлять в компоненту.
```javascript ```javascript
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -41,8 +43,7 @@ import PropTypes from 'prop-types';
} }
MyComponent.propTypes = { MyComponent.propTypes = {
MyComponent.propTypes = { // prop, который описывает примитивные типы данных в JS. По умолчинаию они необязательны
// A prop that is a specific JS primitive. By default, these
optionalArray: PropTypes.array, optionalArray: PropTypes.array,
optionalBool: PropTypes.bool, optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func, optionalFunc: PropTypes.func,
@ -51,45 +52,44 @@ import PropTypes from 'prop-types';
optionalString: PropTypes.string, optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol, optionalSymbol: PropTypes.symbol,
// Все что может быть отрисовано: числа, строки, элементы или массивы
// Anything that can be rendered: numbers, strings, elements or an array // или fragment, содержащий эти типы данных.
optionalNode: PropTypes.node, optionalNode: PropTypes.node,
// React элемент в качестве PropType
optionalElement: PropTypes.element, optionalElement: PropTypes.element,
// Определение того что prop это экзампляр класса. Для этого нужно использовать
// Declaring that a prop is an instance of a class. This uses // JS's instanceof оператор.
optionalMessage: PropTypes.instanceOf(AnotherComponent), optionalMessage: PropTypes.instanceOf(AnotherComponent),
// Вы можете ограничить prop определив конкретное значание для него
// You can ensure that your prop is limited to specific values by treating
optionalEnum: PropTypes.oneOf(['News', 'Photos']), optionalEnum: PropTypes.oneOf(['News', 'Photos']),
// Объект определенный как несколько различных типов
optionalUnion: PropTypes.oneOfType([ optionalUnion: PropTypes.oneOfType([
PropTypes.string, PropTypes.string,
PropTypes.number, PropTypes.number,
PropTypes.instanceOf(AnotherComponent) PropTypes.instanceOf(AnotherComponent)
]), ]),
// Массив с элементами определенного типа
optionalArrayOf: PropTypes.arrayOf(PropTypes.number), optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// Объект с элементами определенного типа
optionalObjectOf: PropTypes.objectOf(PropTypes.number), optionalObjectOf: PropTypes.objectOf(PropTypes.number),
// Объект с определенной формой
optionalObjectWithShape: PropTypes.shape({ optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string, color: PropTypes.string,
fontSize: PropTypes.number fontSize: PropTypes.number
}), }),
// Вы можете добавить в цепочке определение ключевое слово `isRequired`,
// You can chain any of the above with `isRequired` to make sure a warning // чтобы быть уверенным что будет показано предупреждение, что prop отсутсвует
requiredFunc: PropTypes.func.isRequired, requiredFunc: PropTypes.func.isRequired,
// Любой тип данных
requiredAny: PropTypes.any.isRequired, requiredAny: PropTypes.any.isRequired,
}; };
``` ```
@ -104,20 +104,20 @@ import PropTypes from 'prop-types';
```javascript ```javascript
import React,{Component} from 'react'; import React,{Component} from 'react';
import React,{Component} from 'react'; import PropTypes from 'prop-types';
import PropTypes from 'prop-types'; class MyComponent extends Component{
class MyComponent extends Component{ constructor(props){
constructor(props){ super(props);
super(props); }
} render(){
render(){ return (
return ( <h3>Hello, {this.props.name}</h3>
<h3>Hello, {this.props.name}</h3> );
); }
} }
} MyComponent.defaultProps = {
name: 'Stranger' name: 'Stranger'
name: 'Stranger' };
``` ```
Для получения дополнительной информации о PropTypes и других документах в React. Для получения дополнительной информации о PropTypes и других документах в React.

10
guide/russian/react/why-react/index.md
View File

@ -6,18 +6,23 @@ localeTitle: Почему React
### Простота ### Простота
React не является полноценным Javascript фреймворком, как например Angular.js, или другими популярными фреймворками. Вместо этого React действует как «V» в MVC (Model View Controller). Это просто механизм просмотра, который можно отбросить и использовать с множеством других инструментов для части данных и модели MVC (наиболее популярно Redux и Node.js).
React.js не является полноценной инфраструктурой Javascript, например Angular.js или другими популярными framework. Вместо этого React.js действует как «V» в MVC (Model View Controller). Это просто механизм просмотра, который можно отбросить и использовать с множеством других инструментов для части данных и модели MVC (наиболее популярно Redux и Node.js).
### Производительность ### Производительность
Так как React использует _виртуальную DOM_ , он может выборочно обновлять части страницы по мере необходимости, а не всегда заполнять всю перезагрузку страницы. Во многих случаях не обновление всей DOM значительно экономит на производительности. Более того, многие из встроенных функций (таких как функции Lifecycle) также имеют преимущества в производительности, поскольку они часто помогают проверить, требуется ли повторная обработка даже для начала. Так как React использует _Virtual DOM_ , он может выборочно обновлять части страницы по мере необходимости, а не всегда заполнять всю перезагрузку страницы. Во многих случаях не обновление всего DOM значительно экономит производительность. Более того, многие из встроенных функций (таких как функции Lifecycle) также имеют преимущества в производительности, поскольку они часто помогают проверить, требуется ли повторная обработка даже для начала.
### Низкая кривая обучения ### Низкая кривая обучения
Из доступных основных фреймворков, у React относительно низкий порог вхождения, а также более быстрый процесс обучения. Кроме того, официальная документация React является предельно ясной и дает множество примеров для большинства распространенных случаев использования. Из доступных основных фреймворков, у React относительно низкий порог вхождения, а также более быстрый процесс обучения. Кроме того, официальная документация React является предельно ясной и дает множество примеров для большинства распространенных случаев использования.
### Инструментарий ### Инструментарий
Инструменты и программное обеспечение, обычно используемые с React, невероятно хорошо поддерживаются и поддерживаются и предоставляют несколько различных способов передового опыта, которые следует соблюдать при разработке веб-приложений. Некоторые из этих инструментов включают Redux, React-router, Thunk и многие другие. Существует также ряд средств разработки, таких как Chrome расширения для React и Redux, которые помогают отлаживать ваши React приложения. Инструменты и программное обеспечение, обычно используемые с React, невероятно хорошо поддерживаются и поддерживаются и предоставляют несколько различных способов передового опыта, которые следует соблюдать при разработке веб-приложений. Некоторые из этих инструментов включают Redux, React-router, Thunk и многие другие. Существует также ряд средств разработки, таких как Chrome расширения для React и Redux, которые помогают отлаживать ваши React приложения.
### Поддержка ### Поддержка
@ -26,6 +31,7 @@ React создается и поддерживается людьми в Faceboo
Помимо вышеизложенного, мы можем принять наши знания о необходимости разработки мобильных нативных приложений с использованием react-nativ, а также воспользоваться нашими знаниями и расширить его до VR с помощью react-vr. В основном обучение React, открывая нам различные другие возможности, такие как использование его для Web, VR, PWA (Progressive Web App) и многих других Помимо вышеизложенного, мы можем принять наши знания о необходимости разработки мобильных нативных приложений с использованием react-nativ, а также воспользоваться нашими знаниями и расширить его до VR с помощью react-vr. В основном обучение React, открывая нам различные другие возможности, такие как использование его для Web, VR, PWA (Progressive Web App) и многих других
#### Больше информации #### Больше информации
Чтобы узнать больше о том, почему React настолько хорош, посмотрите [официальный сайт](https://reactjs.org/) Чтобы узнать больше о том, почему React настолько хорош, посмотрите [официальный сайт](https://reactjs.org/)

42
guide/russian/react/your-first-app/index.md
View File

@ -2,37 +2,41 @@
title: Your first React App title: Your first React App
localeTitle: Ваше первое приложение React localeTitle: Ваше первое приложение React
--- ---
## Ваше первое приложение React ## Ваше первое React приложение
### Монтаж ### Установка
Как указано в предыдущей статье (Установка), запустите инструмент `Create React App` . После того, как все закончится, введите `cd` в папку приложения и запустите `npm start` . Это запустит сервер разработки, и вы все готовы начать разработку своего приложения! Как указано в предыдущей статье (Установка), запустите инструмент `Create React App`. После того, как все закончится, введите `cd` перейдя в папку приложения и запустите `npm start`. Это запустит сервер разработки, и все, вы готовы начать разработку своего приложения!
```bash ```bash
npm install -g react-create-app npm install -g react-create-app
create-react-app my-first-app create-react-app my-first-app
cd my-first-app cd my-first-app
npm start npm start
``` ```
### Редактирование кода ### Редактирование кода
Запустите свой редактор или IDE по выбору и отредактируйте файл `App.js` в папке `src` . При создании с помощью средства `react-create-app` в этом файле уже будет некоторый код. Запустите свой редактор или IDE по выбору и отредактируйте файл `App.js` в папке `src`. При создании с помощью средства `react-create-app` в этом файле уже будет некоторый код.
Код будет состоять из следующих частей: Код будет состоять из следующих частей:
#### импорт #### Импорт
```JavaScript ```JavaScript
import React, { Component } from 'react'; import React, { Component } from 'react';
import logo from './logo.svg'; import logo from './logo.svg';
import './App.css'; import './App.css';
``` ```
Это используется [webpack](https://webpack.js.org/) для импорта всех необходимых модулей, чтобы ваш код мог их использовать. Этот код импортирует 3 модуля: 1) `React` и `Component` , которые позволяют нам использовать Реакт, как он должен использоваться. (С компонентами) 2) `logo` , который позволяет использовать `logo.svg` в этом файле. 3) `./App.css` , который импортирует таблицу стилей для этого файла. Это используется [webpack](https://webpack.js.org/) для импорта всех необходимых модулей, чтобы ваш код мог их использовать.
Этот код импортирует 3 модуля:
1) `React` и `Component` , которые позволяют нам использовать React, как он должен использоваться. (С компонентами)
2) `logo`, который позволяет использовать `logo.svg` в этом файле.
3) `./App.css` , который импортирует таблицу стилей для этого файла.
#### классы / компоненты #### Классы / Компоненты
```JavaScript ```JavaScript
class App extends Component { class App extends Component {
@ -49,16 +53,16 @@ class App extends Component {
</div> </div>
); );
} }
} }
``` ```
React - это библиотека, в которой используются компоненты, которые позволяют разделить ваш интерфейс на независимые, многоразовые фрагменты и подумать о каждой части отдельно. Уже создан один компонент, компонент `App` . Если вы использовали инструмент `create-react-app` , этот компонент является основным компонентом проекта, и вы должны строить вокруг этого центрального класса. React - это библиотека, в которой используются компоненты, которые позволяют разделить ваш интерфейс на независимые, многоразовые фрагменты и подумать о каждой части отдельно. Уже создан одна компонента, компонента `App`. Если вы использовали инструмент `create-react-app`, эта компонента является основным компонентом проекта, и вы должны строиться вокруг этого центрального класса.
Мы рассмотрим детали, более подробно описанные в следующих главах. Мы рассмотрим детали, более подробно описанные в следующих главах.
#### экспорт #### Экспорт
При создании класса в реакции вы должны экспортировать их после объявления, что позволяет использовать компонент в другом файле с помощью ключевого слова `import` . Вы можете использовать `default` после ключевого слова `export` чтобы сообщить React, что это основной класс этого файла. При создании класса в реакции вы должны экспортировать их после объявления, что позволяет использовать компонент в другом файле с помощью ключевого слова `import`. Вы можете использовать `default` после ключевого слова `export`, чтобы сообщить React, что это основной класс этого файла.
```JavaScript ```JavaScript
export default App; export default App;
@ -66,8 +70,8 @@ export default App;
### Просмотрите результаты! ### Просмотрите результаты!
Когда вы запустили сервер разработки, выпустив команду `npm start` , вы можете просмотреть изменения, которые вы добавляете в свой проект в прямом эфире в своем браузере. После выдачи команды npm должен открыть браузер, автоматически отображающий ваше приложение. Когда вы запускаете сервер разработки, написав команду `npm start`, вы можете просматривать в своем браузере изменения, которые вы делаете в своем проекте в режиме реального времени. После исполнения команды, npm должен открыть браузер, автоматически отображающий ваше приложение.
### источники ### Источники
[1\. Реагировать на документацию](https://reactjs.org/docs/hello-world.html) [1. React documentation](https://reactjs.org/docs/hello-world.html)