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

Fixed several mistake of naming translations. (#21532)

Browse Source
This commit is contained in:
Anton Boyko
2018-11-11 16:54:19 +02:00
committed by Gregory Gubarev
parent 9e688056ef
commit fbe428e787
1 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,12 @@
--- ---
title: React title: React
localeTitle: реагировать localeTitle: React
--- ---
# реагировать # React
React - это библиотека JavaScript для создания пользовательских интерфейсов. Он был признан самым любимым в категории «Рамки, библиотеки и другие технологии» опроса разработчиков Stack Overflow 2017. 1 React - это библиотека JavaScript для создания пользовательских интерфейсов. Он был признан самым любимым в категории «Фреймворки, библиотеки и другие технологии» опроса разработчиков Stack Overflow 2017. 1
React - это библиотека JavaScript и приложения React, созданные на ней, запускаются в браузере, а не на сервере. Приложения такого рода только взаимодействуют с сервером, когда это необходимо, что делает их очень быстрыми по сравнению с традиционными веб-сайтами, которые заставляют пользователя ждать, пока сервер повторно развернет целые страницы и отправит их в браузер. React - это библиотека JavaScript и React приложения, созданные с помощью неё, запускаются в браузере, а НЕ на сервере. Приложения такого рода только взаимодействуют с сервером, когда это необходимо, что делает их очень быстрыми по сравнению с традиционными веб-сайтами, которые заставляют пользователя ждать, пока сервер повторно развернет целые страницы и отправит их в браузер.
React используется для создания пользовательских интерфейсов - то, что пользователь видит на своем экране и взаимодействует с вашим веб-приложением. Этот интерфейс разделяется на компоненты, вместо того, чтобы иметь одну огромную страницу, вы разбиваете ее на более мелкие части, известные как компоненты. В более общих терминах этот подход называется модулярностью. React используется для создания пользовательских интерфейсов - то, что пользователь видит на своем экране и взаимодействует с вашим веб-приложением. Этот интерфейс разделяется на компоненты, вместо того, чтобы иметь одну огромную страницу, вы разбиваете ее на более мелкие части, известные как компоненты. В более общих терминах этот подход называется модулярностью.
@ -16,7 +16,7 @@ React используется для создания пользователь
## Зачем изучать React? ## Зачем изучать React?
1. Реакция включает в себя композицию, состоящую из множества компонентов, которые обертывают функциональные возможности в инкапсулированный контейнер. Многие популярные сайты используют 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 = () => {
@ -44,23 +44,23 @@ const Component2 = () => {
); );
``` ```
2. Реакция является декларативной для большей части, в которой нас больше интересует «Что делать, а не как выполнять определенную задачу». Декларативное программирование - это парадигма программирования, которая выражает логику вычисления без описания его потока управления. Декларативное программирование имеет определенные преимущества, такие как уменьшенные побочные эффекты (возникает, когда мы модифицируем какое-либо состояние или что-то изменяем или делаем запрос API), сводя к минимуму изменчивость (как много абстрагируется), улучшенная читаемость, меньшие ошибки. 2. React является декларативной для большей части, в которой нас больше интересует «Что делать, а не как выполнять определенную задачу». Декларативное программирование - это парадигма программирования, которая выражает логику вычисления без описания его потока управления. Декларативное программирование имеет определенные преимущества, такие как уменьшенные побочные эффекты (возникает, когда мы модифицируем какое-либо состояние или что-то изменяем или делаем запрос API), сводя к минимуму изменчивость (как много абстрагируется), улучшенная читаемость, меньшие ошибки.
3. Однонаправленный поток данных. Пользовательский интерфейс в реактиве фактически является функцией состояния, которое означает, что состояние обновляет его и обновляет пользовательский интерфейс. Поэтому наш пользовательский интерфейс прогрессирует по мере изменения состояния. 3. Однонаправленный поток данных. UI в React фактически является функцией состояния, которое означает, что состояние обновляет его и обновляет пользовательский интерфейс. Поэтому наш пользовательский интерфейс прогрессирует по мере изменения состояния.
## Преимущества реакции ## Преимущества React
Некоторые причины использования React: Некоторые причины использования React:
1. Быстро. Приложения, созданные в React, могут обрабатывать сложные обновления и по-прежнему быстро реагировать. 1. Быстро. Приложения, созданные в React, могут обрабатывать сложные обновления, но при этом не теряя в отзывчивости.
2. Modular. Вместо того, чтобы писать большие, плотные файлы кода, вы можете писать много меньших, многоразовых файлов. РЕАКТ модульность может быть красивым решением в 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 для интересных проектов, которые не имеют никакого отношения к созданию веб-приложения. Люди все еще понимают потенциал Реакта. [Есть возможность исследовать](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) .
### Виртуальный DOM ### Виртуальный DOM
Магия Реагта исходит из его интерпретации DOM и ее стратегии создания пользовательских интерфейсов. Магия React исходит из его интерпретации DOM и ее стратегии создания пользовательских интерфейсов.
React использует виртуальную DOM, чтобы сначала визуализировать дерево HTML, а затем, каждый раз, когда изменяется состояние, и мы получаем новое дерево HTML, которое нужно взять в DOM браузера, вместо того, чтобы писать все новое дерево. React будет писать только разница между новым деревом и предыдущим деревом (так как у React есть оба дерева в памяти). Этот процесс известен как «Дерево примирения». React использует виртуальную DOM, чтобы сначала визуализировать дерево HTML, а затем, каждый раз, когда изменяется состояние, и мы получаем новое дерево HTML, которое нужно взять в DOM браузера, вместо того, чтобы писать все новое дерево. React будет писать только разница между новым деревом и предыдущим деревом (так как у React есть оба дерева в памяти). Этот процесс известен как «Дерево примирения».
@ -72,9 +72,9 @@ React имеет интеллектуальный дифференцирующи
Затем React предложит браузеру обновить только вычисляемый diff, а не весь узел DOM. Независимо от того, сколько раз мы обновляем наш интерфейс, React берет в браузер только новые «частичные» обновления. Затем React предложит браузеру обновить только вычисляемый diff, а не весь узел DOM. Независимо от того, сколько раз мы обновляем наш интерфейс, React берет в браузер только новые «частичные» обновления.
## Реакция с нуля ## React с нуля
Хотели бы вы начать изучать основы реагирования, не увязнув в создании среды разработки? Скорее всего, если вы не знакомы с веб-разработкой, то создание среды разработки может заставить вас чувствовать себя немного запуганным, когда вы просто пытаетесь изучить React или просто узнать об React в первый раз. Хотели бы вы начать изучать основы React, не увязнув в создании среды разработки? Скорее всего, если вы не знакомы с веб-разработкой, то создание среды разработки может заставить вас чувствовать себя немного запуганным, когда вы просто пытаетесь изучить React или просто узнать об React в первый раз.
В этой статье мы рассмотрим, как мы можем начать работу с React, используя только текстовый редактор и браузер, и больше ничего. В этой статье мы рассмотрим, как мы можем начать работу с React, используя только текстовый редактор и браузер, и больше ничего.
@ -105,11 +105,11 @@ html:5
</html> </html>
``` ```
Мы можем заполнить заголовок «Время реагировать!». Мы можем заполнить заголовок «Пришло время для React!».
Этот контент не будет отображаться на вашей веб-странице. Все, что находится в главном разделе файла HTML, будет метаданных, которые наш браузер будет интерпретировать нашим кодом в разделе тела. Этот заголовок будет отображаться на вкладке для нашей страницы, а не на странице. Этот контент не будет отображаться на вашей веб-странице. Все, что находится в главном разделе файла HTML, будет метаданных, которые наш браузер будет интерпретировать нашим кодом в разделе тела. Этот заголовок будет отображаться на вкладке для нашей страницы, а не на странице.
### 2 - Получить теги скриптов, чтобы использовать силу Реактных и Вавилонских библиотек ### 2 - Получить теги скриптов, чтобы использовать силу библиотек React и Babel
Хорошо, первый элемент отключен от нашего списка. Давайте рассмотрим второй пункт. Мы собираемся настроить среду разработки, используя теги скриптов, чтобы включить React и Babel. Это не настоящая среда разработки. Это будет довольно сложная установка. Это также оставило бы нас с большим количеством кодовых табличек и библиотек, которые отвлекут нас от изучения основ React. Цель этой серии - перейти к основному синтаксису React и получить право на кодирование. Мы будем использовать теги `<script>` чтобы принести библиотеку React, библиотеку React DOM (почему) и библиотеку Babel. Хорошо, первый элемент отключен от нашего списка. Давайте рассмотрим второй пункт. Мы собираемся настроить среду разработки, используя теги скриптов, чтобы включить React и Babel. Это не настоящая среда разработки. Это будет довольно сложная установка. Это также оставило бы нас с большим количеством кодовых табличек и библиотек, которые отвлекут нас от изучения основ React. Цель этой серии - перейти к основному синтаксису React и получить право на кодирование. Мы будем использовать теги `<script>` чтобы принести библиотеку React, библиотеку React DOM (почему) и библиотеку Babel.
@ -129,9 +129,9 @@ html:5
Вы можете использовать более обновленные версии этих библиотек по мере их выхода. Они не должны создавать никаких изменений для контента, который мы рассматриваем. Вы можете использовать более обновленные версии этих библиотек по мере их выхода. Они не должны создавать никаких изменений для контента, который мы рассматриваем.
Что мы тут делаем? Элемент: 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. Мы создали код котловой плиты и создали среду разработки. Что мы тут делаем? Элемент: 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 - Render React to DOM ### 3 - Отрисовка React в DOM
Наши следующие два шага будут состоять в том, чтобы выбрать наше местоположение в DOM, которое мы хотим отобразить для нашего контента React. И используя другой тег скрипта для нашего контента React внутри тела. Как правило, как хорошее разделение опасностей практики, это будет в собственном файле, а затем связано с этим html-документом. Мы сделаем это позже на предстоящих уроках. На данный момент мы позволим этому зайти в тело html-документа, в котором мы сейчас находимся. Теперь мы рассмотрим, как просто выбрать место в DOM для отображения нашего контента React. Мы пойдем в тело. И лучшая практика заключается не только в том, чтобы бросать React в тег тела, который будет отображаться, но и создать отдельный элемент, часто div, который можно рассматривать как корневой элемент для вставки содержимого React. Наши следующие два шага будут состоять в том, чтобы выбрать наше местоположение в DOM, которое мы хотим отобразить для нашего контента React. И используя другой тег скрипта для нашего контента React внутри тела. Как правило, как хорошее разделение опасностей практики, это будет в собственном файле, а затем связано с этим html-документом. Мы сделаем это позже на предстоящих уроках. На данный момент мы позволим этому зайти в тело html-документа, в котором мы сейчас находимся. Теперь мы рассмотрим, как просто выбрать место в DOM для отображения нашего контента React. Мы пойдем в тело. И лучшая практика заключается не только в том, чтобы бросать React в тег тела, который будет отображаться, но и создать отдельный элемент, часто div, который можно рассматривать как корневой элемент для вставки содержимого React.
@ -141,7 +141,7 @@ html:5
</body> </body>
``` ```
Мы создадим простой элемент `<div>` и дадим ему идентификатор «app». Мы собираемся настроить таргетинг на это место, чтобы вставить наш контент React так же, как вы могли бы использовать CSS для таргетинга идентификатора для стиля по вашему выбору. Любой отредактированный контент будет отображаться в тегах div с идентификатором приложения. Тем временем мы оставим текст, говорящий, что «React еще не отображен». Если мы увидим это, когда мы просматриваем нашу страницу, это означает, что где-то мы пропустили рендеринг React. Теперь давайте продолжим и создаем тег скрипта внутри нашего тела, где мы будем создавать, чтобы реагировать в первый раз. Синтаксис, который нам понадобится для нашего тега скрипта, заключается в добавлении атрибута «type». Указывает тип медиафайла скрипта. Выше в нашей голове мы использовали атрибут src, который указывал на внешние файлы сценариев для библиотеки React, библиотеки ReactDOM и библиотеки Babel. Мы создадим простой элемент `<div>` и дадим ему идентификатор «app». Мы собираемся настроить таргетинг на это место, чтобы вставить наш контент React так же, как вы могли бы использовать CSS для таргетинга идентификатора для стиля по вашему выбору. Любой отредактированный контент будет отображаться в тегах div с идентификатором приложения. Тем временем мы оставим текст, говорящий, что «React еще не отображен». Если мы увидим это, когда мы просматриваем нашу страницу, это означает, что где-то мы пропустили рендеринг React. Теперь давайте продолжим и создаем тег script внутри body, где мы будем использовать React впервые. Синтаксис, который нам понадобится для нашего тега скрипта, заключается в добавлении атрибута «type». Указывает тип медиафайла скрипта. Выше в нашей голове мы использовали атрибут src, который указывал на внешние файлы сценариев для библиотеки React, библиотеки ReactDOM и библиотеки Babel.
```javascript ```javascript
<body> <body>
@ -162,7 +162,7 @@ html:5
</body> </body>
``` ```
Первый аргумент - это «что» реагировать. Второй аргумент - это «где» местоположения, которое вы хотите, чтобы оно было помещено в DOM. Начнем с вызова нашего метода ReactDOM.render (). Наш первый аргумент будет нашим JSX. Первый аргумент - это «что» рендерить. Второй аргумент - это «где» место (в DOM) в которое вы хотите это поместить. Начнем с вызова нашего метода ReactDOM.render(). Наш первый аргумент будет нашим JSX.
```javascript ```javascript
<body> <body>
@ -177,11 +177,11 @@ html:5
```](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)[Официальные реакции docs заявляют](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. Часто JSX удивляет людей, которые были разработчиками на некоторое время, потому что это выглядит как HTML. В очень раннем возрасте разработчики обучаются разграничению проблем. HTML имеет свое место, CSS имеет свое место, и JavaScript имеет свое место. Кажется, что JSX размывает линии. Вы используете то, что выглядит как HTML, но, как говорит Facebook, поставляется с полной мощью JavaScript.
Это может вызывать увлечение ветеранами, так что многие реактивные учебники начинаются без JSX, что может быть довольно сложным. Мы этого не сделаем. Поскольку этот курс направлен на тех, кто очень молод в своей карьере, вы можете не принести эти красные флаги, когда увидите этот синтаксис. Это может вызывать увлечение ветеранами, так что многие учебники по React начинаются без JSX, что может быть довольно сложным. Мы этого не сделаем. Поскольку этот курс направлен на тех, кто очень молод в своей карьере, вы можете не принести эти красные флаги, когда увидите этот синтаксис.
И JSX просто интуитивно понятен. Возможно, вы довольно легко прочитали этот код и увидите, что это будет самый большой тег заголовка, отображающий текст «Hello World». Никакой тайны и довольно простой. Теперь давайте посмотрим, каков будет наш второй аргумент. И JSX просто интуитивно понятен. Возможно, вы довольно легко прочитали этот код и увидите, что это будет самый большой тег заголовка, отображающий текст «Hello World». Никакой тайны и довольно простой. Теперь давайте посмотрим, каков будет наш второй аргумент.