<section id="description">
<p>Используя jQuery, вы можете изменить текст между начальным и конечным тегами элемента. Вы даже можете изменить разметку HTML. В jQuery есть функция, называемая <code>.html()</code> которая позволяет добавлять HTML-теги и текст внутри элемента. Любое содержимое, ранее содержавшееся в элементе, будет полностью заменено содержимым, которое вы предоставляете, используя эту функцию. Вот как вы могли бы переписать и подчеркнуть текст нашего заголовка: <code>$("h3").html("&#x3C;em>jQuery Playground&#x3C;/em>");</code> jQuery также имеет аналогичную функцию под названием <code>.text()</code> которая изменяет текст без добавления тегов. Другими словами, эта функция не будет оценивать любые теги HTML, переданные ей, но вместо этого будет рассматривать ее как текст, который вы хотите заменить существующим контентом. Измените кнопку с id <code>target4</code> , выделив ее текст. Проверьте эту <a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/em" target="_blank">ссылку,</a> чтобы узнать больше о различии между <code>&#x3C;i></code> и <code>&#x3C;em></code> и их использованием. Обратите внимание, что, хотя <code>&#x3C;i></code> традиционно используется для подчеркивания текста, с тех пор он был использован для использования в качестве тега для значков. Тег <code>&#x3C;em></code> теперь широко признан тегом для акцента. Либо будет работать для этой задачи.</p></section>

Change Text Inside an Element Using jQuery

<section id="description">
<p><strong>Цель.</strong> Создайте приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально похожее на это: <a href="https://codepen.io/freeCodeCamp/full/MJyNMd" target="_blank">https://codepen.io/freeCodeCamp/full/MJyNMd</a> . Выполните приведенные ниже <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и получите все тесты для прохождения. Придайте ему свой личный стиль. Вы можете использовать любое сочетание HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux и jQuery для завершения этого проекта. Вы должны использовать фреймворк frontend (например, React), потому что этот раздел посвящен изучению интерфейсных фреймворков. Дополнительные технологии, не перечисленные выше, не рекомендуются, и используются на свой страх и риск. Мы смотрим на поддержку других интерфейсных фреймворков, таких как Angular и Vue, но в настоящее время они не поддерживаются. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! <strong>User Story # 1:</strong> Я должен видеть внешний контейнер с соответствующим <code>id="drum-machine"</code> который содержит все остальные элементы. <strong>User Story # 2:</strong> Внутри <code>#drum-machine</code> я вижу элемент с соответствующим <code>id="display"</code> . <strong>User Story # 3:</strong> В <code>#drum-machine</code> я могу увидеть 9 кликабельных элементов ударной площадки, каждая из которых имеет имя класса <code>drum-pad</code> , уникальный идентификатор, который описывает аудиоклип, который будет настроен на ударную площадку для запуска, и внутренний текст, который соответствует одной из следующих клавиш на клавиатуре: Q, W, E, A, S, D, Z, X, C. Барабанные площадки должны быть в этом порядке. <strong>User Story # 4:</strong> внутри каждого <code>.drum-pad</code> должен быть <code>audio</code> элемент HTML5, который имеет атрибут <code>src</code> указывающий на аудиоклип, имя класса <code>clip</code> и идентификатор, соответствующий внутреннему тексту его родительского <code>.drum-pad</code> (например, <code>id="Q"</code> , <code>id="W"</code> , <code>id="E"</code> и т. д.). <strong>User Story # 5:</strong> Когда я нажимаю элемент <code>.drum-pad</code> , должен запускаться аудиоклип, содержащийся в его дочернем <code>audio</code> элементе. <strong>User Story # 6:</strong> Когда я <code>.drum-pad</code> клавишу триггера, связанную с каждым <code>.drum-pad</code> , должен запускаться аудиоклип, содержащийся в его дочернем <code>audio</code> элементе (например, нажатие клавиши Q должно запускать ударную панель, содержащую строку «Q», нажатие клавиши W должно запускать ударную панель, содержащую строку «W» и т. д.). <strong>User Story # 7:</strong> Когда <code>.drum-pad</code> , строка, описывающая связанный аудиоклип, отображается как внутренний текст элемента <code>#display</code> (каждая строка должна быть уникальной). Вы можете создать свой проект, <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">нажимая эту ручку CodePen</a> . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод <a href="https://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask,</a> если вы застряли.</p></section>

Build a Drum Machine

<section id="description">
<p>React - это библиотека с открытым исходным кодом, созданная и поддерживаемая Facebook. Это отличный инструмент для создания пользовательского интерфейса (UI) современных веб-приложений. React использует синтаксическое расширение JavaScript под названием JSX, которое позволяет вам писать HTML непосредственно в JavaScript. Это имеет несколько преимуществ: он позволяет использовать полную программную мощность JavaScript в HTML и помогает сохранить читаемость кода. 
</p>
<p>  
По большей части JSX похож на HTML, который вы уже узнали, однако есть несколько ключевых различий, которые будут рассмотрены в ходе этих задач. Например, поскольку JSX является синтаксическим расширением JavaScript, вы можете писать JavaScript непосредственно в JSX. Для этого вы просто включаете код, который хотите обрабатывать как JavaScript в фигурных скобках: <pre class="language-js"><code>{ 'this is treated as JavaScript code' }</code></pre>

</p>
<p>
Помните об этом, поскольку он используется в нескольких будущих задачах. Однако, поскольку JSX это все-таки не настоящий JavaScript, код JSX должен быть скомпилирован в JavaScript. Транспилер Babel - популярный инструмент для этого процесса. Для вашего удобства это уже добавлено за кулисами этих задач. Если вам удастся написать синтаксически недействительный JSX, вы увидите, что первый тест в этих задачах терпит неудачу. Стоит отметить, что под капотом возникают вызовы <pre class="language-js"><code>ReactDOM.render(JSX, document.getElementById('root'))</code></pre>
</p>
<p>
Этот вызов функции отрисовывает ваш Реакт-компонент в HTML-документ.
</p>
<p>
  <b>Замечание: </b> и все же, хотя вы будете видеть в Реакте много HTML-кода, очень важно понимать и никогда не забывать: это не HTML в чистом виде. Еще раз: это просто синтаксис, похожий на HTML. Более того, каждый тег в нем (div, span, table и т.п.) - все это по сути встроенные Реакт-компоненты. То есть все они работают так же, как и те компоненты, что будете писать и вы. Но этот "HTML" не вставляется как есть в чистом виде в DOM страницы (хотя чаще всего конечный вывод будет очень сильно соответствовать тому, что у вас прописано в Реакт-компоненте). Прежде чем ваш код попадет в конечный документ, Реакт его будет пытаться "распознать", обработает все атрибуты и дочерние элементы, составит у себя под капотом конечный кусок HTML-кода, и только потом его вставит в саму страницу. А далее уже будет работать то, для чего Реакт и придуман и за что его любят: если входящие параметры и/или состояние компонента будет меняться, Реакт будет у себя под капотом пересобирать конечный HTML и сравнивать с тем, что уже имеется в HTML-документе. Если расхождений никаких не будет, то он и документ не будет переписывать. А если будут расхождения (какие-то узлы добавятся или удалятся, изменятся атрибуты узлов и т.п.), то реакт просто заменит именно изменивщиеся узлы. Вам не придется следить за самим документом, думая, что добавить в него, а что убрать. 
</p>
<p>
  
Самый простой пример того, что Реакт обрабатывает передаваемый код и выводит конечный HTML отличающийся от изначального: если вы передадите в какой-то тег внутри реакта атрибут <code>onClick</code> с передачей в него функции, которая сработает по клику мышкой, в конечном HTML-коде вы не найдете у этого тега HTML-атрибут <code>onclick</code>. Более того, если вы передадите именно <code>onclick</code> (строчными буквами), вы получите предупреждение от Реакта, что "Может вы имели ввиду onClick (с большой буквой)". А если вы передадите в него не функцию, а строку, то и вовсе такое в конечный HTML-код не попадет. Хотя нативный HTML позволяет такое. Вот пример: 
<pre class="language-js"><code>&#x3C;a href="#" onclick="alert('Сообщение'); return false;">Кликни меня и я выведу сообщение&#x3C;/a></code></pre>
<a href="#" onclick="alert('Сообщение'); return false;">Кликни меня и я выведу сообщение</a>
</p>
<p>

<b>Помните это!</b> Даже если сейчас это все непонятно, по мере прохождения обучения старайтесь этот момент почаще вспоминать и больше понять. Иначе вы рискуете неправильно понять суть Реакта.
</p>
</section>

Create a Simple JSX Element

<section id="description">
<p>Одна из особенностей Sass, которая отличается от CSS, заключается в использовании переменных. Они объявляются и устанавливаются для хранения данных, похоже на JavaScript. В JavaScript переменные определяются с использованием слов <code>let</code> и <code>const</code> . В Sass переменные начинаются с <code>$</code> за которым следует имя переменной. Вот несколько примеров: <blockquote> $ main-fonts: Arial, sans-serif; <br> $ headings-color: green; <br><br> // Для использования переменных: <br> h1 { <br> font-family: $ main-fonts; <br> цвет: $ headings-color; <br> } </blockquote> Одним из примеров, полезного применения переменных, когда необходимо, чтобы несколько элементов должны быть одного цвета. Если этот цвет меняется, единственным местом для редактирования кода является значение переменной.</p></section>

Store Data with Sass Variables

<section id="description">
<p>Sass допускает <code>nesting</code> правил CSS, что является полезным способом организации таблицы стилей. Как правило, каждый элемент нацелен на другую строку для его стилизации, например: <blockquote> nav { <br> background-color: red; <br> } <br><br> nav ul { <br> list-style: none; <br> } <br><br> nav ul li { <br> display: inline-block; <br> } </blockquote> Для большого проекта в файле CSS будет много строк и правил. Вот где <code>nesting</code> может помочь организовать ваш код, поместив правила дочернего стиля в соответствующие родительские элементы: <blockquote> nav { <br> background-color: red; <br><br> ul { <br> list-style: none; <br><br> li { <br> display: inline-block; <br> } <br> } <br> } <br></blockquote></p>
</section>

Nest CSS with Sass

<section id="description">
<p>В Sass <code>mixin</code> представляет собой группу объявлений CSS, которые можно использовать повторно в таблице стилей. Новые функции CSS требуют времени, прежде чем они будут полностью приняты и готовы к использованию во всех браузерах. По мере добавления функций в браузеры, правила CSS, использующие их, могут потребоваться префиксы поставщиков. Рассмотрим «box-shadow»: <blockquote> div { <br> -webkit-box-shadow: 0px 0px 4px #fff; <br> -moz-box-shadow: 0px 0px 4px #fff; <br> -ms-box-shadow: 0px 0px 4px #fff; <br> box-shadow: 0px 0px 4px #fff; <br> } </blockquote> Очень много нужно переписать это правило для всех элементов, у которых есть <code>box-shadow</code> , или изменить каждое значение для проверки различных эффектов. <code>Mixins</code> похожи на функции CSS. Вот как написать один: <blockquote> @mixin box-shadow ($ x, $ y, $ blur, $ c) { <br> -webkit-box-shadow: $ x, $ y, $ blur, $ c; <br> -moz-box-shadow: $ x, $ y, $ blur, $ c; <br> -ms-box-shadow: $ x, $ y, $ blur, $ c; <br> box-shadow: $ x, $ y, $ blur, $ c; <br> } </blockquote> Определение начинается с <code>@mixin</code> за которым следует пользовательское имя. Параметры ( <code>$x</code> , <code>$y</code> , <code>$blur</code> и <code>$c</code> в приведенном выше примере) являются необязательными. Теперь, когда требуется правило <code>box-shadow</code> , только одна строка, вызывающая <code>mixin</code> заменяет необходимость вводить все префиксы поставщика. <code>mixin</code> вызывается с директивой <code>@include</code> : <blockquote> div { <br> @include box-shadow (0px, 0px, 4px, #fff); <br> } </blockquote></p>
</section>

Create Reusable CSS with Mixins

<section id="description">
<p>Директива <code>@if</code> в Sass полезна для проверки конкретного случая - она ​​работает так же, как и оператор <code>if</code> в JavaScript. <blockquote> @mixin make-bold ($ bool) { <br> @if $ bool == true { <br> font-weight: bold; <br> } <br> } </blockquote> И так же, как в JavaScript, <code>@else if</code> и <code>@else</code> test для получения дополнительных условий: <blockquote> @mixin text-effect ($ val) { <br> @if $ val == опасность { <br> красный цвет; <br> } <br> @else, если $ val == alert { <br> цвет: желтый; <br> } <br> @else, если $ val == success { <br> цвет: зеленый; <br> } <br> @else { <br> черный цвет; <br> } <br> } </blockquote></p>
</section>

Use @if and @else to Add Logic To Your Styles

<section id="description">
<p>Директива <code>@for</code> добавляет стили в цикле, очень похожие <code>for</code> цикл <code>for</code> в JavaScript. <code>@for</code> используется двумя способами: «начать с конца» или «начать с конца». Основное различие заключается в том, что «начало к концу» <em>исключает</em> конечный номер, а «начало через конец» <em>включает</em> конечный номер. Вот начало <b>через</b> конец , например: <blockquote> @for $ i от 1 до 12 { <br> .col - # {$ i} {width: 100% / 12 * $ i; } <br> } </blockquote> Часть <code>#{$i}</code> - это синтаксис для объединения переменной ( <code>i</code> ) с текстом для создания строки. Когда файл Sass преобразуется в CSS, он выглядит так: <blockquote> .col-1 { <br> ширина: 8,33333%; <br> } <br><br> .col-2 { <br> ширина: 16,66667%; <br> } <br><br> ... <br><br> .col-12 { <br> ширина: 100%; <br> } </blockquote> Это мощный способ создания сетки. Теперь у вас есть двенадцать вариантов ширины столбцов, доступных как классы CSS.</p></section>

Use @for to Create a Sass Loop

<section id="description">
<p>Последняя задача показала, как директива <code>@for</code> использует начальное и конечное значение для циклического цикла определенное количество раз. Sass также предлагает директиву <code>@each</code> которая <code>@each</code> каждый элемент в списке или карте. На каждой итерации переменная присваивается текущему значению из списка или карты. <blockquote> @each $ color в синем, красном, зеленом { <br> . # {$ color} -text {color: $ color;} <br> } </blockquote> Карта имеет несколько иной синтаксис. Вот пример: <blockquote> $ colors: (color1: blue, color2: red, color3: green); <br><br> @each $ key, $ color в $ colors { <br> . # {$ color} -text {color: $ color;} <br> } </blockquote> Обратите внимание, что <code>$key</code> переменная <code>$key</code> необходима для ссылки на ключи на карте. В противном случае, скомпилированный CSS будет иметь <code>color1</code> , <code>color2</code> ... в нем. Оба приведенных выше примера кода преобразуются в следующий CSS: <blockquote> .blue-text { <br> цвет синий; <br> } <br><br> .red-text { <br> красный цвет; <br> } <br><br> .green-text { <br> цвет: зеленый; <br> } </blockquote></p>
</section>

Use @each to Map Over Items in a List

<section id="description">
<p><code>@while</code> директива является вариантом с аналогичной функциональностью на JavaScript в <code>while</code> цикл. Он создает правила CSS до тех пор, пока не будет выполнено условие. Задача <code>@for</code> привела пример создания простой сетки. Это также может работать с <code>@while</code> . <blockquote> $ x: 1; <br> @while $ x &#x3C;13 { <br> .col - # {$ x} {width: 100% / 12 * $ x;} <br> $ x: $ x + 1; <br> } </blockquote> Сначала определите переменную <code>$x</code> и установите ее в 1. Затем используйте директиву <code>@while</code> для создания сетки, <i>а</i> <code>$x</code> меньше 13. После установки правила CSS для <code>width</code> <code>$x</code> увеличивается на 1, чтобы избежать бесконечная петля.</p></section>

Apply a Style Until a Condition is Met with @while

<section id="description">
<p><code>Partials</code> в Sass - это отдельные файлы, содержащие сегменты кода CSS. Они импортируются и используются в других файлах Sass. Это отличный способ группировать аналогичный код в модуль, чтобы поддерживать его. Имена <code>partials</code> начинаются с символа подчеркивания ( <code>_</code> ), который сообщает Sass, что это небольшой сегмент CSS, а не для преобразования его в файл CSS. Кроме того, файлы Sass заканчиваются расширением <code>.scss</code> . Чтобы привести код в <code>partial</code> файле в другой файл Sass, используйте директиву <code>@import</code> . Например, если все ваши <code>mixins</code> сохранены в <code>partial</code> имени «_mixins.scss», и они необходимы в файле «main.scss», так их можно использовать в основном файле: <blockquote> // В файле main.scss <br><br> @import 'mixins' </blockquote> Обратите внимание, что подчеркивание не требуется в операторе <code>import</code> - Сасс понимает, что он является <code>partial</code> . После <code>partial</code> импортирования в файл доступны все переменные, <code>mixins</code> и другой код.</p></section>

Split Your Styles into Smaller Chunks with Partials

<section id="description">
<p>У Sass есть функция, называемая <code>extend</code> которая упрощает заимствование правил CSS из одного элемента и построение на них в другом. Например, <code>.panel</code> блок правил CSS <code>.panel</code> класс <code>.panel</code> . Он имеет <code>background-color</code> , <code>height</code> и <code>border</code> . <blockquote> .panel { <br> background-color: red; <br> высота: 70px; <br> граница: 2px сплошной зеленый; <br> } </blockquote> Теперь вам нужна другая панель под названием <code>.big-panel</code> . Он имеет те же базовые свойства, что и <code>.panel</code> , но также требует <code>width</code> и <code>font-size</code> . Можно скопировать и вставить исходные правила CSS из <code>.panel</code> , но код становится повторяющимся, когда вы добавляете больше типов панелей. Директива <code>extend</code> - это простой способ повторного использования правил, написанных для одного элемента, а затем добавить другое для другого: <blockquote> .big панели { <br> @extend .panel; <br> ширина: 150 пикселей; <br> font-size: 2em; <br> } </blockquote> <code>.big-panel</code> будет иметь те же свойства, что и <code>.panel</code> в дополнение к новым стилям.</p></section>

Extend One Set of CSS Styles to Another Element

<section id="description">
<p>Последняя задача была простым примером JSX, но JSX также может представлять собой более сложный HTML. Одна важная вещь, которую нужно знать о вложенном JSX, состоит в том, что она должна возвращать один корневой элемент. Этот один родительский элемент будет обертывать все остальные уровни вложенных элементов. Но если корневых элементов больше одного, то возникнет ошибка. Вот пример:<br /> 
<b>Действительный JSX:</b> <pre class="language-jsx"><code>&#x3C;div>
  &#x3C;p> Пункт 1 &#x3C;/p>
  &#x3C;p> Пункт второй &#x3C;/p>
  &#x3C;p> Пункт третий &#x3C;/p>
&#x3C;/div> </code></pre> <b>Недопустимый JSX:</b> 
<pre class="language-jsx"><code>&#x3C;p> Пункт 1 &#x3C;/ p>
&#x3C;p> Пункт второй &#x3C;/p>
&#x3C;p> Пункт третий &#x3C;/p></code></pre>
</p>
</section>

Create a Complex JSX Element

<section id="description">
<p>JSX - это синтаксис, который компилируется в действительный JavaScript. Иногда для удобства чтения вам может потребоваться добавить комментарии к вашему коду. Как и большинство языков программирования, JSX имеет свой собственный способ сделать это. Чтобы помещать комментарии в JSX, вы используете синтаксис <pre class="language-jsx"><code>{/* 
  comment text 
*/}</code></pre> чтобы обернуть текст комментария.</p></section>

Add Comments in JSX

<section id="description">
<p>До сих пор вы узнали, что JSX - удобный инструмент для записи читаемого HTML в JavaScript. С помощью React мы можем передать этот JSX непосредственно в HTML DOM с использованием API рендеринга React через модуль ReactDOM. ReactDOM предлагает простой способ визуализации элементов React в DOM, который выглядит так: <pre class="language-js"><code>ReactDOM.render(ComponentToRender, targetNode)</code></pre>, где первым аргументом является элемент React или компонент, который вы хотите отобразить, а второй аргумент - узел DOM, в который вы хотите вывести свой компонент. Как и следовало ожидать, <code>ReactDOM.render()</code> должен вызываться после объявлений элементов JSX, так же, как вы должны объявлять переменные перед их использованием.</p></section>

Render HTML Elements to the DOM

<section id="description">
<p>Эта серия проблем знакомит с использованием Redux с React. Во-первых, рассмотрим некоторые ключевые принципы каждой технологии. Реагирование - это библиотека представлений, которую вы предоставляете с данными, а затем рендерит представление эффективным и предсказуемым образом. Redux - это система управления состоянием, которую вы можете использовать для упрощения управления состоянием вашего приложения. Как правило, в приложении React Redux вы создаете одно хранилище Redux, которое управляет состоянием всего вашего приложения. Ваши компоненты React подписываются только на части данных в магазине, которые имеют отношение к их роли. Затем вы отправляете действия непосредственно из компонентов React, которые затем запускают обновления магазина. Хотя компоненты React могут управлять своим собственным состоянием локально, когда у вас сложное приложение, обычно лучше поддерживать состояние приложения в одном месте с помощью Redux. Существуют исключения, когда отдельные компоненты могут иметь локальное состояние, специфичное только для них. Наконец, поскольку Redux не предназначен для работы с React из коробки, вам нужно использовать пакет <code>react-redux</code> . Он предоставляет вам возможность передать <code>state</code> Redux и <code>dispatch</code> ваши компоненты React в качестве <code>props</code> . В следующих нескольких задачах, во-первых, вы создадите простой компонент React, который позволит вам вводить новые текстовые сообщения. Они добавляются в массив, который отображается в представлении. Это должен быть хороший обзор того, что вы узнали на уроках React. Затем вы создадите хранилище Redux и действия, управляющие состоянием массива сообщений. Наконец, вы будете использовать <code>react-redux</code> для подключения хранилища Redux к вашему компоненту, тем самым извлекая локальное состояние в хранилище Redux.</p></section>

Getting Started with React Redux

<section id="description">
<p>Здесь вы закончите создание компонента <code>DisplayMessages</code> .</p></section>

Manage State Locally First

<section id="description">
<p>Теперь, когда вы закончили компонент React, вам нужно переместить логику, которую она выполняет локально в своем <code>state</code> в Redux. Это первый шаг для подключения простого приложения React к Redux. Единственная функциональность вашего приложения - это добавить новые сообщения от пользователя в неупорядоченный список. Пример прост, чтобы продемонстрировать, как React и Redux работают вместе.</p></section>

Extract State Logic to Redux

<section id="description">
<p>В последней задаче вы создали хранилище Redux для обработки массива сообщений и создали действие для добавления новых сообщений. Следующим шагом будет предоставление доступа React к хранилищу Redux и действия, необходимые для отправки обновлений. React Redux предоставляет пакет <code>react-redux</code> для выполнения этих задач. React Redux предоставляет небольшой API с двумя ключевыми функциями: <code>Provider</code> и <code>connect</code> . Другая проблема <code>connect</code> . <code>Provider</code> - это оболочка из React Redux, которая обертывает ваше приложение React. Затем этот обертку позволяет вам получить доступ к функциям <code>store</code> Redux и функции <code>dispatch</code> во всем дереве компонентов. <code>Provider</code> берет два реквизита, магазин Redux и дочерние компоненты вашего приложения. Определение <code>Provider</code> для компонента приложения может выглядеть так: <blockquote> &#x3C;Магазин-провайдер = {store}> <br> &#x3C;Приложение /> <br> &#x3C;/ Provider> </blockquote></p>
</section>

Use Provider to Connect Redux to React

<section id="description">
<p>Компонент <code>Provider</code> позволяет вам предоставлять <code>state</code> и <code>dispatch</code> ваши компоненты React, но вы должны точно указать, какое состояние и действия вы хотите. Таким образом, вы убедитесь, что каждый компонент имеет доступ только к состоянию, в котором он нуждается. Вы достигаете этого, создавая две функции: <code>mapStateToProps()</code> и <code>mapDispatchToProps()</code> . В этих функциях вы объявляете, какие части состояния вы хотите иметь доступ и какие создатели действий вы должны иметь возможность отправлять. После того, как эти функции находятся в месте, вы увидите , как использовать Реагировать Redux <code>connect</code> метод , чтобы соединить их к компонентам в другом вызове. <strong>Примечание.</strong> За кулисами React Redux использует метод <code>store.subscribe()</code> для реализации <code>mapStateToProps()</code> .</p></section>

Map State to Props

<section id="description">
<p>Функция <code>mapDispatchToProps()</code> используется для предоставления конкретным создателям действий вашим компонентам React, чтобы они могли отправлять действия против магазина Redux. Он похож по структуре на <code>mapStateToProps()</code> вы написали в последнем вызове. Он возвращает объект, который сопоставляет действия отправки с именами свойств, которые становятся компонентами <code>props</code> . Однако вместо возврата части <code>state</code> каждое свойство возвращает функцию, которая вызывает <code>dispatch</code> с создателем действия и любыми соответствующими действительными данными. У вас есть доступ к этой <code>dispatch</code> потому что она передается в <code>mapDispatchToProps()</code> в качестве параметра, когда вы определяете функцию, точно так же, как вы передали <code>state</code> <code>mapStateToProps()</code> . За кулисами React Redux использует <code>store.dispatch()</code> Redux для <code>store.dispatch()</code> этих рассылок с помощью <code>mapDispatchToProps()</code> . Это похоже на то, как он использует <code>store.subscribe()</code> для компонентов, которые отображаются в <code>state</code> . Например, у вас есть создатель действия <code>loginUser()</code> который принимает <code>username</code> в качестве полезной нагрузки. Объект, возвращенный из <code>mapDispatchToProps()</code> для этого создателя действия, будет выглядеть примерно так: <blockquote> { <br> submitLoginUser: function (username) { <br> отправка (loginUser (имя пользователя)); <br> } <br> } </blockquote></p>
</section>

Map Dispatch to Props

<section id="description">
<p>Теперь, когда вы написали функции <code>mapStateToProps()</code> и <code>mapDispatchToProps()</code> , вы можете использовать их для отображения <code>state</code> и <code>dispatch</code> в <code>props</code> одного из ваших компонентов React. Метод <code>connect</code> из React Redux может справиться с этой задачей. Этот метод принимает два необязательных аргумента: <code>mapStateToProps()</code> и <code>mapDispatchToProps()</code> . Они являются необязательными, потому что у вас может быть компонент, которому нужен только доступ к <code>state</code> но ему не нужно отправлять какие-либо действия или наоборот. Чтобы использовать этот метод, передайте функции в качестве аргументов и немедленно вызовите результат с вашим компонентом. Этот синтаксис немного необычен и выглядит так: <code>connect(mapStateToProps, mapDispatchToProps)(MyComponent)</code> <strong>Примечание.</strong> Если вы хотите опустить один из аргументов метода <code>connect</code> , вы передаете <code>null</code> на свое место.</p></section>

Connect Redux to React

<section id="description">
<p>Теперь, когда вы понимаете, как использовать <code>connect</code> для подключения React к Redux, вы можете применить то, что вы узнали, к своему компоненту React, который обрабатывает сообщения. В последнем уроке компонент, который вы подключили к Redux, был назван <code>Presentational</code> , и это не было произвольным. Этот термин <i>обычно</i> относится к компонентам React, которые напрямую не связаны с Redux. Они просто отвечают за представление пользовательского интерфейса и делают это в зависимости от реквизита, который они получают. Напротив, компоненты контейнера подключены к Redux. Обычно они отвечают за отправку действий в хранилище и часто передают состояние хранилища дочерним компонентам в качестве реквизита.</p></section>

Connect Redux to the Messages App

<section id="description">
<p>Вы почти закончили! Напомним, что вы написали весь код Redux, чтобы Redux мог контролировать управление вашим приложением React messages. Теперь, когда Redux подключен, вам нужно извлечь управление состоянием из компонента <code>Presentational</code> и в Redux. В настоящее время вы подключены к Redux, но вы управляете состоянием локально в составе <code>Presentational</code> компонента.</p></section>

Extract Local State into Redux

<section id="description">
<p>Поздравляем! Вы закончили занятия по Реакту и Редьюксу. Перед тем, как двигаться дальше, нужно указать один последний предмет. Как правило, вы не будете писать приложения React в редакторе кода, как это. Эта задача дает вам представление о том, как выглядит синтаксис, если вы работаете с npm и файловой системой на своей собственной машине. Код должен выглядеть аналогично, за исключением использования операторов <code>import</code> (они охватывают все зависимости, которые были предоставлены вам в задачах). Раздел «Управление пакетами с номером npm» охватывает npm более подробно. Наконец, для написания кода React и Redux обычно требуется некоторая конфигурация. Это может быстро усложниться. Если вы заинтересованы в экспериментировании на своей собственной машине, <a id="CRA" target="_blank" href="https://github.com/facebookincubator/create-react-app">приложение Create React</a> будет настроено и готово к работе. Кроме того, вы можете включить Babel в качестве препроцессора JavaScript в CodePen, добавить React и ReactDOM в качестве внешних ресурсов JavaScript и работать там.</p></section>

Moving Forward From Here

<section id="description">
<p>Redux - это система управления состоянием (state), которая может использоваться с различными веб-технологиями, включая React. В Redux один объект состояния, который отвечает за все состояние вашего приложения. Это означает, что если у вас было приложение React с десятью компонентами, и каждый компонент имел свое собственное локальное состояние, то всё состояние вашего приложения было бы определено одним объектом состояния, размещенным в Redux <code>store</code> . Это первый важный принцип, который следует понимать при изучении Redux: хранилище Redux является единственным источником правды, когда дело касается состояния приложения. Это также означает, что в любое время, когда какая-либо часть вашего приложения хочет обновить состояние, она <strong>должна</strong> сделать это через хранилище Redux. Однонаправленный поток данных облегчает управление состоянием в вашем приложении.</p></section>

Create a Redux Store

<section id="description">
<p>У объекта хранилища Redux есть несколько методов, которые позволяют вам взаимодействовать с ним. Например, вы можете получить текущее состояние <code>state</code> , сохраненное в объекте хранилища Redux, с помощью метода  <code>getState()</code> .</p></section>

Get State from the Redux Store

<section id="description">
<p>Т.к. Redux - это фреймворк управления состоянием, то обновление состояния - одна из его главных задач. В Redux все обновления состояния срабатывают по диспетчерским действиям. Действие - это просто JavaScript объект, который содержит информацию о произошедшем событии. Хранилище Redux получает объекты действий, затем обновляет состояние, если нужно. Иногда Redux действие также содержит некоторую дополнительную информацию. Например, действие "сообщает" имя пользователя после успешного входа в систему. Действие обязательно должно содержать поле <code>type</code> , которое указывает "тип" исполняемого действия. Думайте о действиях Redux как о сообщениях, которые передают информацию о событиях, происходящих в вашем приложении, хранилищу Redux. Хранилище затем занимается обновлением состояния, на основании действия которое случилось.</p></section>

Define a Redux Action

<section id="description">
<p>После создания действия следующий шаг - отправление действия в хранилище Redux, чтобы обновить свое состояние. В Redux вы определяете создателей действий для завершения процесса. Создатель действия - это просто функция JavaScript, которая возвращает действие. Другими словами, создатели действий создают объекты, которые представляют события действия.</p></section>

Define an Action Creator

<section id="description">
<p>Метод <code>dispatch</code> - это то, что вы используете для отправки действий в хранилище Redux. Вызов <code>store.dispatch()</code> со значением, которое получено из создателя действия, посылает действие обратно в хранилище. Напомним, что создатель действия возвращает объект со свойством type, который определяет произошедшее действие. Потом метод отправляет объект действия в хранилище Redux. Основываясь на примере из предыдущего упражнения, следующие строки эквивалентны, и обе отправляют действие типа <code>LOGIN</code> : <blockquote>store.dispatch(actionCreator()); <br> store.dispatch({ type: 'LOGIN' });</blockquote></p>
</section>

Dispatch an Action Event

<section id="description">
<p>После того, как действие создано и отправлено, хранилище Redux должно знать, как реагировать на это действие. Это задача функции <code>reducer</code> . Редукторы в Redux отвечают за изменения состояния, которые происходят в ответ на действия. <code>reducer</code> принимает <code>state</code> и <code>action</code> в качестве аргументов и всегда возвращает новое <code>state</code> . Важно видеть, что это <strong>единственная</strong> роль редуктора. Он не имеет побочных эффектов - он никогда не вызывает конечную точку API (API endpoint) и никогда не имеет никаких скрытых сюрпризов. Редуктор - это просто чистая функция, которая принимает состояние и действие, а затем возвращает новое состояние. Другим ключевым принципом в Redux является то, что <code>state</code> доступно только для чтения. Другими словами, функция <code>reducer</code> должна <strong>всегда</strong> возвращать новую копию <code>state</code> и никогда не изменять состояние напрямую. Redux не обеспечивает неизменность состояния, однако вы несете ответственность за его выполнение в коде своих функций редуктора. Вы будете практиковать это в следующих упражнениях.</p></section>

Handle an Action in the Store

<section id="description">
<p>Вы можете сказать хранилищу Redux, как обрабатывать несколько типов действий. Предположим, что вы управляете аутентификацией пользователя в своем хранилище Redux. Вы хотите,чтобы у вас было состояние, показывающее когда пользователи вошли в систему и когда они вышли из системы. Вы представляете это единственным объектом состояния со свойством <code>authenticated</code>. Вам также нужны создатели действий, которые создают действия, отвечающие за вход пользователя и за выход пользователя из системы, а также сами объекты действий.</p></section>

Use a Switch Statement to Handle Multiple Actions

<section id="description">
<p>Общей практикой при работе с Redux является присваивать типы действий константам, а затем ссылаться на эти константы везде, где они используются. Вы можете реорганизовать код, с которым работаете, чтобы описать типы действий константами <code>const</code> .</p></section>

Use const for Action Types

<section id="description">
<p>Другой метод, к которому у вас есть доступ из Redux <code>store</code>, - это <code>store.subscribe()</code> . Он позволяет вам подписать функции слушателя к хранилищу, которые будут вызываться всякий раз, когда действие отправляется в хранилище. Одним из простых способов использования этого метода является подписка функции на ваше хранилище, которая просто регистрирует сообщение каждый раз, когда принимается действие, и хранилище обновляется.</p></section>

Register a Store Listener

<section id="description">
<p>Когда состояние вашего приложения начинает становиться более сложным, может возникнуть соблазн разделить состояние на несколько частей. Вместо этого запомните первый принцип Redux: все состояние приложения хранится в одном объекте состояния в хранилище. Поэтому Redux предоставляет композицию редукторов как решение для сложной модели состояния. Вы определяете несколько редукторов для обработки разных частей состояния вашего приложения, а затем объединяете эти редукторы в один корневой редуктор. Корневой редуктор затем передается в метод Redux <code>createStore()</code> . Чтобы объединить несколько редукторов вместе, в Redux есть метод <code>combineReducers()</code> . Этот метод принимает объект как аргумент, в котором вы определяете свойства, которые связывают ключи с конкретными функциями редуктора. Имя, которое вы задаёте ключам, будет использоваться Redux как имя для связанной части состояния. Как правило, хорошей практикой является создание редуктора для каждой части состояния приложения, когда они являются особенными или уникальными в некотором роде. Например, в приложении для заметок с аутентификацией пользователя один редуктор может обрабатывать аутентификацию, а другой - текст и заметки, которые пользователь отправляет. Для такого приложения мы можем написать метод <code>combineReducers()</code> следующим образом: <blockquote> const rootReducer = Redux.combineReducers ({ <br> auth: authenticationReducer, <br> notes: notesReducer <br> }); </blockquote> Теперь ключ <code>notes</code> будет содержать все состояние, связанное с нашими заметками и обрабатываемое нашим <code>notesReducer</code> . Так можно создать несколько редукторов для управления более сложным состоянием приложения. В этом примере состояние, находящееся в хранилище Redux, будет тогда единственным объектом, содержащим свойства <code>auth</code> и <code>notes</code> .</p></section>

Combine Multiple Reducers

<section id="description">
<p>By now you've learned how to dispatch actions to the Redux store, but so far these actions have not contained any information other than a <code>type</code>. You can also send specific data along with your actions. In fact, this is very common because actions usually originate from some user interaction and tend to carry some data with them. The Redux store often needs to know about this data.</p></section>

Send Action Data to the Store

<section id="description">
<p>До сих пор эти проблемы избегали обсуждения асинхронных действий, но они являются неотъемлемой частью веб-разработки. В какой-то момент вам нужно будет вызывать асинхронные конечные точки в вашем приложении Redux, так как вы обрабатываете эти типы запросов? Redux обеспечивает промежуточное программное обеспечение, разработанное специально для этой цели, называемое промежуточным программным обеспечением Redux Thunk. Вот краткое описание того, как использовать это с Redux. Чтобы включить промежуточное ПО Redux Thunk, вы передаете его в качестве аргумента для <code>Redux.applyMiddleware()</code> . Затем этот оператор предоставляется в качестве второго необязательного параметра функции <code>createStore()</code> . Посмотрите на код внизу редактора, чтобы увидеть это. Затем, чтобы создать асинхронное действие, вы возвращаете функцию в создателе действия, который принимает <code>dispatch</code> в качестве аргумента. В рамках этой функции вы можете отправлять действия и выполнять асинхронные запросы. В этом примере асинхронный запрос моделируется с помощью вызова <code>setTimeout()</code> . Обычно перед отправкой какого-либо асинхронного поведения вы отправляете какое-либо действие, чтобы ваше состояние приложения знало, что запрашиваются некоторые данные (например, это состояние может отображать значок загрузки). Затем, как только вы получите данные, вы отправите другое действие, которое несет данные как полезную нагрузку вместе с информацией о завершении действия. Помните, что вы <code>dispatch</code> в качестве параметра этому создателю специальных действий. Это то, что вы будете использовать для отправки ваших действий, вы просто передаете действие непосредственно для отправки, а промежуточное ПО заботится обо всем остальном.</p></section>

Use Middleware to Handle Asynchronous Actions

<section id="description">
<p>Теперь вы узнали все основные принципы Redux! Вы видели, как создавать действия и создателей действия, создавать хранилище Redux, отправлять ваши действия в хранилище и разрабатывать обновления состояния с помощью чистых редукторов. Вы даже видели, как управлять сложным состоянием с композицией редукторов и обрабатывать асинхронные действия. Эти примеры упрощены, но эти концепции являются основными принципами Redux. Если вы их хорошо понимаете, вы готовы приступить к созданию своего собственного приложения Redux. Следующие упражнения охватывают некоторые детали, касающиеся неизменности <code>state</code> , но сначала рассмотрим все, что вы изучили до сих пор.</p></section>

Write a Counter with Redux

<section id="description">
<p>Эти заключительные проблемы описывают несколько способов обеспечения ключевого принципа неизменности состояния в Redux. Неизменяемое состояние означает, что вы никогда не изменяете состояние напрямую, вместо этого вы возвращаете новую копию состояния. Если вы взяли снимок состояния Redux приложения с течением времени, вы увидите что - то вроде <code>state 1</code> , <code>state 2</code> , <code>state 3</code> , <code>state 4</code> , <code>...</code> и так далее , где каждое состояние может быть аналогично последним, но каждый представляет собой отдельную часть данных. Эта непреложность, по сути, является тем, что обеспечивает такие функции, как отладка во время путешествия, о которой вы, возможно, слышали. Redux не активно применяет неизменность государства в своем магазине или редукторах, эта ответственность ложится на программиста. К счастью, JavaScript (особенно ES6) предоставляет несколько полезных инструментов, которые можно использовать для обеспечения неизменности вашего состояния, будь то <code>string</code> , <code>number</code> , <code>array</code> или <code>object</code> . Обратите внимание, что строки и числа являются примитивными значениями и неизменны по своей природе. Другими словами, 3 всегда 3. Вы не можете изменить значение числа 3. <code>array</code> или <code>object</code> , однако, являются изменяемыми. На практике ваше состояние, вероятно, будет состоять из <code>array</code> или <code>object</code> , поскольку они являются полезными структурами данных для представления многих типов информации.</p></section>

Never Mutate State

<section id="description">
<p>Одним из решений ES6, чтобы помочь обеспечить неизменность состояния в Redux, является оператор с расширением: <code>...</code> Оператор распространения имеет множество приложений, один из которых хорошо подходит для предыдущего вызова создания нового массива из существующего массива. Это относительно новый, но обычно используемый синтаксис. Например, если у вас есть массив <code>myArray</code> и напишите: <code>let newArray = [...myArray];</code> <code>newArray</code> теперь является клоном <code>myArray</code> . Оба массива все еще существуют отдельно в памяти. Если вы выполняете мутацию типа <code>newArray.push(5)</code> , <code>myArray</code> не изменяется. <code>...</code> эффективно <i>распространяет</i> значения в <code>myArray</code> в новый массив. Чтобы клонировать массив, но добавляя дополнительные значения в новый массив, вы можете написать <code>[...myArray, 'new value']</code> . Это вернет новый массив, состоящий из значений в <code>myArray</code> и строку <code>'new value'</code> в качестве последнего значения. Синтаксис распространения может использоваться несколько раз в составе массива, как это, но важно отметить, что он делает только мелкую копию массива. То есть он обеспечивает только неизменные операции массива для одномерных массивов.</p></section>

Use the Spread Operator on Arrays

<section id="description">
<p>Время практиковать удаление элементов из массива. Здесь также может использоваться оператор распространения. Другие полезные методы JavaScript включают <code>slice()</code> и <code>concat()</code> .</p></section>

Remove an Item from an Array

<section id="description">
<p>Последние несколько проблем работали с массивами, но есть способы помочь обеспечить неизменность состояния, когда государство тоже является <code>object</code> . Полезным инструментом для обработки объектов является <code>Object.assign()</code> . <code>Object.assign()</code> принимает объекты-объекты-объекты и исходные объекты и свойства карт из исходных объектов в целевой объект. Любые соответствующие свойства перезаписываются свойствами в исходных объектах. Это поведение обычно используется для создания мелких копий объектов путем передачи пустого объекта в качестве первого аргумента, за которым следует объект (ы), который вы хотите скопировать. Вот пример: <code>const newObject = Object.assign({}, obj1, obj2);</code> Это создает <code>newObject</code> как новый <code>object</code> , который содержит свойства, которые в настоящее время существуют в <code>obj1</code> и <code>obj2</code> .</p></section>

Copy an Object with Object.assign

<section id="description">
<p>Теперь, когда вам удобнее писать JSX, вам может быть интересно, как он отличается от HTML. До сих пор может показаться, что HTML и JSX точно такие же. Но это не так. Одно из ключевых различий в JSX заключается в том, что вы больше не можете использовать атрибут <code>class</code> для определения классов HTML. Это потому, что <code>class</code> является зарезервированным словом в JavaScript. Вместо этого JSX использует <code>className</code> . Фактически, соглашение об именах для всех атрибутов HTML и ссылок на события в JSX становится camelCase. Например, событие click в JSX - <code>onClick</code>, а не <code>onclick</code>. Аналогично, <code>onchange</code> становится <code>onChange</code>. Хотя это не совсем очевидная разница, все же важно помнить ее на будущее.</p>

<p>
  <b>Замечание:</b> на самом деле, начиная с 16 версии Реакта, можно и class написать, и это будет работать. Вы просто в режиме разработки получите предупреждение. Но конечно же, лучше так не делать, а писать именно className.
</p>
</section>

Define an HTML Class in JSX

<section id="description">
  <p>До сих пор вы видели, как JSX отличается от HTML ключевым способом с использованием класса <code>className</code>
    против <code>class</code> для определения классов HTML. Другим важным способом, с помощью которого JSX отличается от
    HTML, является идея самозакрывающегося тега. В HTML почти все теги имеют как открывающий, так и закрывающий тег:
    <code>&#x3C;div>&#x3C;/div></code> ; закрывающий тег всегда имеет косую черту перед именем тега, которое вы
    закрываете. Тем не менее, в HTML есть специальные экземпляры, называемые «самозакрывающиеся теги», или теги, которые
    не требуют как открывающего, так и закрывающего тега перед тем, как запустить другой тег. Например, тэг разрыва
    строки может быть записан как <code>&#x3C;br></code> или как <code>&#x3C;br /></code> , но никогда не должен быть
    записан как <code>&#x3C;br>&#x3C;/br></code> , так как он не содержит никакого содержимого. В JSX правила немного
    отличаются. Любой элемент JSX можно записать с помощью самозакрывающегося тега, и каждый элемент должен быть закрыт.
    Например, тег разрыва строки всегда должен быть записан как <code>&#x3C;br /></code> , чтобы быть действительным
    JSX, который может быть переписан. То же самое касается и тега <code>&#x3C;img /></code>. А <code>&#x3C;div></code>
    , с другой стороны, может быть записано как <code>&#x3C;div /></code> или <code>&#x3C;div>&#x3C;/div></code> .
    Разница в том, что в первой версии синтаксиса нет способа включить что-либо в <code>&#x3C;div /></code> . В
    последующих задачах вы увидите, что этот синтаксис полезен при рендеринге компонентов React.</p>
</section>

Learn About Self-Closing JSX Tags

<section id="description">
  <p>Компоненты - это ядро React. Всё в React является компонентом, и здесь вы научитесь, как их создавать.</p>
  <p>Существуют два способа создания React компонентов. Первый способ - это использовать JavaScript функцию. Определяя
    компонент таким образом, вы создаете <em>функциональный компонент без учета состояния</em>. Концепт состояния в
    приложении будет рассмотрен в дальнейших главах. Сейчас думайте о компоненте без учета состояния, как о компоненте,
    который может получать данные и рендерить их, но не управляет или следить за изменениями в данных.</p>
</section>

Create a Stateless Functional Component

<section id="description">
  <p>Другой способ определить React-компонент - использовать синтаксис <code>class</code> ES6. 
  </p>
  <p>
    <i>Подробней о классах смотрите в этом <a href="https://freecode.academy/learn/exercises/587d7b8b367417b2b2512b53" target="_blank">уроке</a></i>
  
  </p>
  <p>
В следующем примере
    <code>Kitten</code> расширяет <code>React.Component</code> :
  <pre class="language-jsx"><code>class Kitten extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      &#x3C;h1>Hi</h1>
    );
  }
}</code></pre>

  Это создает класс ES6 <code>Kitten</code> , который расширяет <code>React.Component</code> класс. Таким образом, класс
  <code>Kitten</code> теперь имеет доступ ко многим полезным функциям React, таким как локальные состояния и привязки к
  жизненному циклу. Не беспокойтесь, если вы еще не знакомы с этими условиями, они будут рассмотрены более подробно в
  последующих задачах. Также обратите внимание, что класс <code>Kitten</code> имеет <code>constructor</code>
  определенный внутри него, который вызывает <code>super()</code> . Он использует <code>super()</code> для вызова
  конструктора родительского класса, в данном случае <code>React.Component</code> . Конструктор - это специальный метод,
  используемый при инициализации объектов, созданных с ключевым словом <code>class</code> . Это лучшая практика для
  индивидуального вызова компонента <code>constructor</code> с <code>super</code> , и передать <code>props</code> для
  обоих. Это гарантирует правильность инициализации компонента. Пока что знайте, что это стандарт для включения этого
  кода. Вскоре вы увидите другие варианты использования конструктора, а также <code>props</code> .</p>

<p><b>Замечание: </b> Хоть здесь и сказано "Пока что знайте, что это стандарт для включения этого
кода", все же в таком виде данный конструктор не имеет никакого смысла, ведь в нем просто происходит вызов родительского конструктора. Здесь нет никакой дополнительной логики. Более того, в эслинте есть отдельное правило, которое может ругаться на такой вызов, советуя убрать его вовсе. Тем не менее, в дальнейшем вы увидите примеры, где часть логики задается именно в конструкторе. А вот функция render - обязательная. Всякий реакт-компонент должен что-то возвращать, и делает он это именно в методе render.</p>
</section>

Create a React Component

<section id="description">
  <p>Теперь мы рассмотрим, как мы можем собрать несколько компонентов React вместе. Представьте, что вы создаете
    приложение и создали три компонента: <code>Navbar</code> , <code>Dashboard</code> и <code>Footer</code> . Чтобы
    собрать эти компоненты вместе, вы можете создать <i>родительский</i> компонент <code>App</code> который отображает
    каждый из этих трех компонентов в качестве <i>дочерних</i> . Чтобы отобразить компонент как дочерний элемент в
    компоненте React, вы включаете имя компонента, написанное как пользовательский тег HTML в JSX. Например, в методе
    <code>render</code> вы можете написать:
  <pre class="language-jsx"><code>return (
  &#x3C;App>
    &#x3C;Navbar />
    &#x3C;Dashboard />
    &#x3C;Footer />
  &#x3C;/App>
) </code></pre>
  Когда React встречает пользовательский тег HTML, который ссылается на другой компонент (имя компонента, заключенное в
  <code>&#x3C; /></code> как в этом примере), он отображает разметку для этого компонента в местоположении тега. Это
  должно иллюстрировать отношения между родителями и дочерними элементами между компонентом <code>App</code> и
  <code>Navbar</code> , <code>Dashboard</code> и <code>Footer</code> .</p>
</section>

Create a Component with Composition

<section id="description">
<p>Прошлая задача показала простой способ составления двух компонентов, но есть много разных способов компоновки компонентов с помощью React. Компонентный состав является одной из мощных возможностей React. Когда вы работаете с React, важно начать думать о своем пользовательском интерфейсе с точки зрения таких компонентов, как пример приложения в последнем вызове. Вы разбиваете свой пользовательский интерфейс на свои основные строительные блоки, и эти части становятся компонентами. Это помогает отделить код, отвечающий за пользовательский интерфейс, от кода, ответственного за обработку вашей логики приложения. Это может значительно упростить разработку и сопровождение сложных проектов.</p></section>

Use React to Render Nested Components

<section id="description">
<p>Поскольку задачи продолжают использовать более сложные композиции с компонентами React и JSX, есть еще один важный момент. Рендеринг классовых компонентов в других компонентах ничем не отличается от рендеринга функциональных компонентов, которые вы использовали в последних нескольких задачах. Вы можете отображать элементы JSX, функциональные компоненты без состояния и классовые компоненты в других компонентах.</p></section>

Compose React Components

<section id="description">
  <p>Вы можете вспомнить использование ReactDOM API в более ранней попытке визуализации элементов JSX в DOM. Процесс
    рендеринга компонентов React будет выглядеть очень похоже. Последние несколько задач были сосредоточены на
    компонентах и ​​составе, поэтому рендеринг был сделан для вас за кулисами. Однако ни один из написанного вами кода
    React не будет отображаться в DOM без обращения к ReactDOM API. Ниже приведен синтаксис:
  <pre class="language-js"><code>ReactDOM.render(componentToRender, targetNode)</code></pre> . Первый аргумент - это
  компонент React, который вы хотите отобразить. Второй аргумент - это узел DOM, внутри которого вы хотите отобразить ваш компонент. React-компоненты передаются в <code>ReactDOM.render()</code> несколько иначе, чем элементы JSX. Для элементов JSX вы передаете имя элемента, который вы хотите отобразить. Однако для компонентов React вам нужно использовать тот же синтаксис, как если бы вы отображали вложенный компонент, например
  <pre class="language-jsx"><code>ReactDOM.render(&#x3C;ComponentToRender />, targetNode)</code></pre> . Этот синтаксис используется для классовых компонентов ES6 и функциональных компонентов.</p>
</section>

Render a Class Component to the DOM

<section id="description">
<p>Теперь, когда вы изучили основы компонентов JSX и React, пришло время написать компонент самостоятельно. React- компоненты являются основными строительными блоками приложений React, поэтому важно хорошо ознакомиться с их написанием. Помните, что типичным компонентом React является <code>class-based</code> компонент, который расширяет <code>React.Component</code> . Он имеет метод рендеринга, который возвращает HTML (из JSX) или <code>null</code> . Это основная форма компонента React. Как только вы это хорошо усвоите, вы будете готовы начать строительство более сложных проектов React.</p>

<p>
  <b>Замечание:</b> На самом деле в настоящий момент class-based компоненты все менее и менее распространены. Сейчас все-таки чаще стали использоваться функциональные компоненты. В основном это обусловлено тем, что, во-первых, в функциональных компонентах меньше требований к пониманию ООП (Объектно-Ориентированного Программирования), ведь здесь просто функции и все. Во-вторых, в Реакте появились базовые <a href="https://ru.reactjs.org/docs/hooks-intro.html" target="_blank">хуки</a>, которые значительно расширили функциональность функциональных компонентов (простите за каламбур). То есть в целом, и теми и другими видами компонентов можно добиться одного и того же результата (ведь самое главное - конечный вывод, а этот механизм работает одинаково и там и там), но все же функциональные компоненты сильно проще, чем классовые.
</p>
</section>

Write a React Component from Scratch

<section id="description">
<p>Предыдущие задачи во многом касались создания и компоновки элементов JSX, функциональных и классовых React-компонентов. Пришло время взглянуть на еще одну особенность, часто встречающуюся в React: передачу свойств (<code>props</code>) . В React вы можете передать <code>свойства</code> дочерним компонентам. Скажем, у вас есть компонент <code>App</code> который отображает дочерний компонент <code>Welcome</code> который является функциональным компонентом без состояния. Вы можете передать в компонент <code>Welcome</code> свойство <code>user</code>, написав: <pre class="language-jsx"><code>&#x3C;App>
  &#x3C;Welcome user='Mark' />
&#x3C;/App> </code></pre> 
Вы используете <strong>пользовательские атрибуты HTML</strong>, поддержку которых предоставляет React, для передачи свойства <code>user</code> в компонент <code>Welcome</code> . Поскольку <code>Welcome</code> является функциональным компонентом без состояния, он имеет доступ к этому значению следующим образом: <pre class="language-jsx"><code>const Welcome = (props) => <h1>Hello, {props.user}!</h1></code></pre> 
</p>
<p>
  Еще раз напомню, что функциональные компоненты - это по сути обычные функции, и в этих функциях мы можем получать доступ к переданным им аргументам. Когда React рендерит свои компоненты с прописанными в них атрибутами, он все эти атрибуты и их значения передает первым аргументом в конечный компонент единым объектом. Принято этот объект называть <code>props</code>, но вы в своих функциях можете и по-другому его называть, суть его от этого не поменяется.
</p>
<p>
  <b>Заметка:</b> С классовыми компонентами чуть иначе дела обстоят. Напомню, что классы в ES6 - это по сути те же самые функции, но у них имеется функция constructor, которая автоматически вызывается при создании конечного инстанса. <i>Подробнее о классах в этом <a href="https://freecode.academy/learn/exercises/587d7b8b367417b2b2512b53" target="_blank">уроке</a>.</i> В случае с реакт-компонентами, когда реакт создает конечный инстанс классового компонента, реакт передает в него объект <code>props</code>, который на уровне конструктора класса React.Component присваивает его внутреннему свойству <code>{this.props}</code>, примерно вот так: 
<pre class="language-jsx"><code>// React.Component
class Component {
  constructor(props) {
    this.props = props;
  }
}</code></pre>
   Далее в рамках всего инстанса конечного компонента можно получить доступ к этим свойствам через этот объект. Более подробно это будет рассмотрено в дальнейших уроках.
</p>
</section>

Pass Props to a Stateless Functional Component

<section id="description">
  <p>Последняя задача продемонстрировала, как передавать информацию из родительского компонента в дочерний компонент в
    качестве <code>props</code> или свойств. В этой задаче рассматривается, как массивы могут быть переданы в качестве
    <code>props</code> . Чтобы передать массив элементу JSX, он должен рассматриваться как JavaScript и завернут в
    фигурные скобки.
  <pre class="language-jsx"><code>&#x3C;ParentComponent>
  &#x3C;ChildComponent colors={["green", "blue" , "red" ]} />
&#x3C;/ParentComponent></code></pre> 
Затем дочерний компонент имеет доступ к массиву <code>colors</code> через свойства. При доступе к свойству могут использоваться методы массива, такие как <code>join()</code>.
  <pre class="language-jsx"><code>const ChildComponent = (props) => &#x3C;p>{props.colors.join(', ')}&#x3C;/p></code></pre> Это объединит все элементы
  массива <code>colors</code> в строку, разделенную запятой. В результате получится:
  <code>&#x3C;p>green, blue, red&#x3C;/p></code> Позже мы узнаем о других распространенных методах рендеринга массивов
  данных в React.</p>

<p>
  <b>Важное замечание: </b> Если при рендеринге элементов массива вы возвращаете не просто строки, а другие компоненты или теги, необходимо в каждый из них передать свойство key. Например: 
  <pre class="language-jsx"><code>[1,2,3,2,1].map(value, index) => &#x3C;li key={index}>Item {value}&#x3C;/li></code></pre>
</p>
<p>Здесь так же обратите внимание, что для значения атрибута <code>key</code> я использовал переменную <code>index</code>, которая содержит в себе порядковый номер каждоый итерации при перечислении массива. <i>Подробней с Array.map можно ознакомиться <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/map" target="_blank">здесь</a>.</i> Дело в том, что key обязан быть уникальным, а в нашем массиве, как мы видим, значения не уникальные. Но если у вас массив с уникальными значениями (и вы уверены в этом), то конечно же лучше использовать их, по ряду причин. Просто помните об этом.</p>. 
</section>

Pass an Array as Props

<section id="description">
<p>Ранее мы уже изучали <a href="https://freecode.academy/learn/exercises/587d7b88367417b2b2512b46" target="_blank">установку свойств по умолчанию в аргументах функций</a>.</p>
<p>React также дает возможность устанавливать свойства по умолчанию. Вы можете назначить свойства по умолчанию для компонента как свойства самого компонента, а React присваивает стандартную поддержку, если это необходимо. Это позволяет указать, какое значение должно иметь свойство, если значение явно не указано. Например, если вы объявите <pre class="language-jsx"><code>MyComponent.defaultProps = { location: 'San Francisco' }</code></pre> вы определили свойство <code>location</code>, значение которого по умолчанию имеет <code>San Francisco</code>, если вы не указали иное. React присваивает свойства по умолчанию, если свойства не определены, но если вы передадите <code>null</code> в качестве значения для определенного свойства, оно станет <code>null</code> .</p></section>

Use Default Props

<section id="description">
<p>Возможность установки свойств по умолчанию является полезной функцией в React. Способ переопределения свойств по умолчанию состоит в том, чтобы явно указать значения этих свойств для компонента.</p></section>

Override Default Props

<section id="description">
  <p>React предоставляет полезные функции проверки типов для проверки того, что компоненты получали свойства правильного типа. Например, ваше приложение вызывает API для извлечения данных, которые вы ожидаете в массиве, который затем передается компоненту в качестве свойства. Вы можете установить <code>propTypes</code> на свой компонент, чтобы требовать, чтобы данные имели тип <code>array</code> . Это даст полезное предупреждение, если данные переданные данные будут иметь другой тип, нежели <code>array</code>. Рекомендуется использовать <code>propTypes</code> когда вы заранее знаете какой тип данных должен поступить. Вы можете определить свойство <code>propTypes</code> для компонента так же, как вы определили <code>defaultProps</code> . При этом будет проверяться наличие свойства данного ключа с заданным типом. Вот пример, требующий тип <code>function</code> для свойства <code>handleClick</code> :
    <pre class="language-jsx"><code>MyComponent.propTypes = { handleClick: PropTypes.func.isRequired }</code></pre> 
    В приведенном выше <code>PropTypes.func</code> проверяет, что <code>handleClick</code> является функцией. Добавление <code>isRequired</code> говорит React, что <code>handleClick</code> является обязательным свойством для этого компонента. Вы увидите предупреждение, если это свойство не указано. Также обратите внимание,
    что <code>func</code> представляет <code>function</code> . Среди семи простых примитивов JavaScript
    <code>function</code> и <code>boolean</code> (написанное как <code>bool</code> ) - это только два, которые
    используют необычную орфографию. В дополнение к примитивным типам доступны другие типы. 
  </p>
  <p>
    <strong>Примечание.</strong> Начиная с версии React v15.5.0, <code>PropTypes</code> импортируется независимо от
    React, например: <pre class="language-js"><code>import PropTypes from 'prop-types';</code></pre></p>

    <p><b>Примечание 2: </b> Если вы пишете код не на чистом JavaScript, а на TypeScript, то вам PropTypes не понадобится, так как сам TypeScript предоставляет все необходимые средства для типизации.</p>
</section>

Use PropTypes to Define the Props You Expect

<section id="description">
<p>Последние несколько задач касались основных способов передачи свойств дочерним компонентам. Но что, если дочерний компонент, которому вы передаете свойство, является классовым компонентом, а не функциональным компонентом? Классовый компонент использует несколько другое соглашение для доступа к свойствам. Каждый раз, когда вы ссылаетесь на классовый компонент внутри себя, вы используете ключевое слово <code>this</code> . Чтобы получить доступ к свойствам в классовом компоненте, вы начинаете код, используемый для доступа к нему с <code>this.props</code> . Например, если классовый компонент имеет свойство <code>data</code> , вы пишете <code>{this.props.data}</code> в JSX.</p></section>

Access Props Using this.props

<section id="description">
  <p>За исключением последней задачи, вы передавали свойства функциональным компонентам. Эти компоненты действуют как
    обычные функции. Они принимают свойства в качестве входных данных и возвращают одинаковое представление каждый раз,
    когда им передают одни и те же свойства. Вы можете задаться вопросом, что такое состояние, и следующая задача будет
    охватывать его более подробно. Перед этим рассмотрим терминологию для компонентов.
  </p>
  <p>
    <em>Функциональным компонентом без состояния</em> является любая функция, которую вы пишете, которая принимает
    свойства (<code>props</code>) и возвращает JSX. С другой стороны, <em>компонент без состояния</em> представляет
    собой класс, который расширяет <code>React.Component</code>, но не использует внутреннее состояние (рассматривается
    в следующей задаче). Наконец, <em>компонент с состоянием</em> - это любой компонент, который поддерживает
    собственное внутреннее состояние. Вы можете видеть компоненты с состоянием, называемые просто компонентами или
    компонентами React. Общим примером является попытка свести к минимуму состояние работоспособности и, когда это
    возможно, создавать функциональные компоненты без состояния. Это помогает управлять состоянием в
    определенной области вашего приложения. В свою очередь, это улучшает разработку и обслуживание вашего приложения,
    упрощая отслеживание того, как изменения состояния влияют на его поведение.
  </p>
</section>

Review Using Props with Stateless Functional Components

<section id="description">
  <p>Одна из наиболее важных тем в React - это состояния (<code>state</code>). Состояние может в себя включать любые
    данные, о которых должно знать ваше приложение, которые могут со временем меняться. По сути своей state - это
    обычный объект. Состояния нужны, чтобы ваши приложения отвечали на изменения состояния и при необходимости обновляли
    интерфейс. React предлагает хорошее решение для управления состояниями в современных веб-приложениях. Вы создаете
    состояние в компоненте React, объявляя свойство <code>state</code> в классе компонента в его методе
    <code>constructor</code> . Это инициализирует компонент со свойством <code>state</code> при его создании. Объявление
    выглядит следующим образом:
  <pre class="language-js"><code>constructor(props) {
  super(props);

  this.state = {
    // описываем ваше состояние здесь
  }
}
</code></pre>

  У вас есть доступ к объекту <code>state</code> на протяжении всего срока службы вашего компонента. Вы можете обновить
  его, отобразить в пользовательском интерфейсе и передать его в качестве свойств в дочерние компоненты. Объект
  <code>state</code> может быть как сложным, так и простым, как вам нужно. Обратите внимание, что вы должны создать
  компонент класса за счет расширения <code>React.Component</code> для того , чтобы создать <code>state</code>.</p>

<p>
<b>Замечание: </b> на самом деле свойство <code>this.state</code> напрямую менять нельзя. Для изменения состояния используется специальный метод <code>this.setState()</code>, который будет рассматриваться далее. Но важно понимать, что даже с использованияем этого метода, мы не меняем свойство <code>this.state</code>, а создаем новое. То есть в метод <code>this.setState()</code> мы передаем новые значения состояния, Реакт делает копию текущего состояния (и это уже новый объект состояния) и дописывает переданные нами свойства в него (дополняя или обновляя его свойства). Это очень важно понимать.
</p>
</section>

Create a Stateful Component

<section id="description">
<p>Как только вы определяете начальное состояние компонента, вы можете отобразить любую его часть в визуализированном пользовательском интерфейсе. Если компонент является компонентом с состоянием, он всегда будет иметь доступ к данным в <code>state</code> внутри всего инстанса компонента, в том числе в методе <code>render()</code> через свойство <code>this.state</code> . Если вы хотите получить доступ к значению состояния в <code>return</code> метода рендеринга, вы должны заключить его в фигурные скобки. <code>State</code> - одна из самых мощных особенностей компонентов в React. Он позволяет отслеживать важные данные в вашем приложении и отображать пользовательский интерфейс в ответ на изменения этих данных. Если ваши данные изменятся, ваш пользовательский интерфейс изменится. React использует то, что называется виртуальным DOM, чтобы отслеживать изменения за кулисами. Когда данные состояния обновляются, он запускает повторный рендеринг компонентов с использованием этих данных, включая дочерние компоненты, которые получили данные в качестве свойств. React обновляет фактический DOM, но только там, где это необходимо. Это означает, что вам не нужно беспокоиться об изменении DOM. Вы просто заявляете, как должен выглядеть пользовательский интерфейс. Обратите внимание, что если вы создаете компонент с состоянием, никакие другие компоненты не знают о его <code>state</code> . Его <code>state</code> полностью инкапсулировано или локально для этого компонента, если вы не передадите данные состояния дочернему компоненту в качестве <code>props</code> . Это понятие инкапсулированного <code>state</code> очень важно, поскольку оно позволяет вам писать определенную логику, а затем содержать и изолировать эту логику в одном месте вашего кода.</p></section>

Render State in the User Interface

<section id="description">
<p>Существует еще один способ доступа к <code>state</code> в компоненте. В методе <code>render()</code> перед оператором <code>return</code> вы можете напрямую писать JavaScript. Например, вы можете объявлять функции, получать доступ к данным из <code>state</code> или <code>props</code> , выполнять вычисления по этим данным и т.д. Затем вы можете назначить любые данные переменным, к которым у вас есть доступ в операторе <code>return</code> .</p></section>

Render State in the User Interface Another Way

<section id="description">
<p>Предыдущие задачи охватывали <code>state</code> компонента и как инициализировать состояние в <code>constructor</code> . Существует также способ изменения состояния <code>state</code>. React предоставляет способ обновления <code>state</code> компонента через метод <code>setState</code> . Вы вызываете метод <code>setState</code> в своем компоненте следующим образом: <code>this.setState()</code> , передавая объект с парами ключ-значение. Ключами являются ваши свойства состояния, а значения - это обновленные данные состояния. Например, если мы сохраняем <code>username</code> в состоянии и хотим его обновить, он будет выглядеть так: <pre class="language-js"><code>this.setState ({
  username: 'Lewis'
}); </code></pre> 

React ожидает, что вы никогда не измените <code>state</code> напрямую, вместо этого всегда используйте <code>this.setState()</code>. Кроме того, вы должны отметить, что React может выполнять несколько обновлений состояния, чтобы повысить производительность. Это означает, что обновления состояния через метод <code>setState</code> могут быть асинхронными. Существует альтернативный синтаксис метода <code>setState</code> который обеспечивает способ решения этой проблемы. Это редко необходимо, но хорошо помнить об этом! Для получения дополнительной информации обратитесь к <a target="_blank" href="https://ru.reactjs.org/docs/state-and-lifecycle.html">документации React</a> .</p></section>

Set State with this.setState

<section id="description">
<p>В дополнение к настройке и обновлению <code>state</code> вы также можете определить методы для вашего класса компонента. Метод класса обычно должен использовать ключевое слово <code>this</code>, чтобы он мог обращаться к свойствам конечного инстанса класса (например, <code>this.state</code> и <code>this.props</code> ) внутри области действия метода. Существует несколько способов разрешить доступ к <code>this</code> методам класса. Один из распространенных способов заключается в том, чтобы явно связать <code>this</code> в конструкторе, чтобы <code>this</code> стало привязано к методам класса, когда компонент инициализирован. Возможно, вы заметили, что последний вызов использовал <pre class="language-js"><code>this.handleClick = this.handleClick.bind(this)</code></pre> для его метода <code>handleClick</code> в конструкторе. Затем, когда вы вызываете функцию типа <code>this.setState()</code> внутри вашего метода класса, <code>this</code> относится к классу и не будет <code>undefined</code>. 
</p>
<p>
<strong>Примечание:</strong> <code>this</code> - ключевое слово является одним из наиболее запутанных аспектов JavaScript , но он играет важную роль в React. Хотя его поведение здесь совершенно нормальное, эти уроки не являются местом для углубленного обзора <code>this</code> поэтому, пожалуйста, обратитесь к другим урокам, если приведенное выше смущает. Полезные статьи в MDN: <br />
- <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/this" target="_blank">this</a>
<br />
- <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_objects/Function/bind" target="_blank">Function.prototype.bind()</a>
</p>
<p>
  <b>Примечание 2: </b> Сейчас использовать <code>bind</code> не модно, а главное - не удобно. Для примера, у нас в классе компонента может быть много методов и много строк кода. При этом все "бинды" мы навешиваем в конструкторе, который от конечных методов могут отделять многие строки. И вот когда мы читаем код, нам не всегда понятно, глядя на конечный метод, есть ли где-то на него "бинды" или нет. И именно в таких случаях удобней использовать <a href="https://freecode.academy/learn/exercises/587d7b87367417b2b2512b43" target="_blank">стрелочные функции</a>. Стрелочные функции сразу "замыкаются" на тот инстанс, в котором они объявлены, и в них <code>this</code> всегда ведет на текущий инстанс. С другой стороны важно понимать, что стрелочные функции - это всего лишь синтаксический сахар, и важное ограничение здесь в том, что стрелочную нельзя вызывать через super. Пример такого кода: <br />
<pre class="language-js"><code>class Parent {
  test = () => {
    console.log(this);
  }
}

class Child extends Parent {
  test = () => {
    console.log(this);
    super.test();
  }
}

const c = new Child();
c.test();</code></pre>
</p>

<p>
  Здесь у нас console.log будет только один раз вызывано в Child::test, а вот вызов super.test() развалится с ошибкой.
<code>Uncaught TypeError: (intermediate value).test is not a function
  at Child.test (<anonymous>:11:11)
    at <anonymous>:16:3</code>
</p>
</section>

Bind 'this' to a Class Method

<section id="description">
<p>Вы можете использовать <code>state</code> в приложениях React более сложными способами, чем то, что вы видели до сих пор. Один из примеров - контролировать состояние значения, а затем визуализировать пользовательский интерфейс на основе этого значения. Существует несколько способов сделать это, и редактор кода показывает один метод.</p></section>

Use State to Toggle an Element

<section id="description">
<p>Вы можете создать более сложный компонент, поддерживающий состояние, путем объединения концепций, рассмотренных ранее. К ним относятся инициализация <code>state</code>, методы записи, которые устанавливают <code>state</code> и назначение обработчиков кликов для запуска этих методов.</p></section>

Write a Simple Counter

<section id="description">
<p>У вашего приложения может быть более сложное взаимодействие между <code>state</code> и отображаемым пользовательским интерфейсом. Например, элементы управления формой для ввода текста, такие как <code>input</code> и <code>textarea</code>  сохраняют свое собственное состояние в DOM по типу пользователя. С React, вы можете переместить это изменяемое состояние в компонент. Ввод пользователя становится частью приложения <code>state</code>, так что React контролирует значение этого поля ввода. Как правило, если у вас есть компоненты React с полями ввода, которые пользователь может ввести, это будет управляемая форма ввода.</p></section>

Create a Controlled Input

<section id="description">
<p>Прошлая задача показала, что React может управлять внутренним состоянием для определенных элементов, таких как <code>input</code> и <code>textarea</code> , что делает их контролируемыми компонентами. Это относится и к другим элементам формы, включая обычный элемент <code>form</code> HTML.</p></section>

Create a Controlled Form

<section id="description">
<p>Вы видели множество примеров, которые передавали свойства дочерним элементам JSX и React-компонентам в предыдущих задачах. Вам может быть интересно, откуда берутся эти свойства. Общим примером является наличие компонента с состоянием, содержащего <code>state</code> важное для вашего приложения, которое затем отображается в дочерних компонентах. Вы хотите, чтобы эти компоненты имели доступ к некоторым частям этого <code>state</code>, которые передаются в качестве свойств. Например, возможно, у вас есть компонент <code>App</code> который отображает <code>Navbar</code> , среди других компонентов. В вашем <code>App</code> есть <code>state</code>, которое содержит много информации о пользователе, но <code>Navbar</code> нуждается только в доступе к имени пользователя, чтобы он мог отображать его. Вы передаете эту часть <code>state</code> компоненту <code>Navbar</code> в качестве свойства. Этот шаблон иллюстрирует некоторые важные парадигмы в Реакте. Первый - <em>однонаправленный поток данных</em>. Состояние течет в одном направлении вниз по дереву компонентов вашего приложения, от родительского компонента с состоянием до дочерних компонентов через их свойства. Дочерние компоненты получают только данные состояния, в которых они нуждаются. Во-вторых, сложные приложения с установленным состоянием могут быть разбиты на несколько или один компонент с состоянием. Остальные компоненты просто получают состояние от родителя как свойства и отображают пользовательский интерфейс из этого состояния. Он начинает создавать разделение, в котором управление состоянием обрабатывается в одной части кода и визуализации пользовательского интерфейса в другой. Этот принцип отделения логики состояния от логики пользовательского интерфейса является одним из ключевых принципов Реакта. Когда он используется правильно, он упрощает управление сложными приложениями с сохранением состояния.</p></section>

Pass State as Props to Child Components

<section id="description">
<p>Вы можете передать <code>state</code> качестве реквизита дочерних компонентов, но вы не ограничены передачей данных. Вы также можете передавать функции обработчика или любой метод, определенный в компоненте React для дочернего компонента. Так вы позволяете дочерним компонентам взаимодействовать со своими родительскими компонентами. Вы передаете методы ребенку точно так же, как обычный пропеллер. Ему назначено имя, и у вас есть доступ к этому имени метода под <code>this.props</code> в дочернем компоненте.</p></section>

Pass a Callback as Props

<section id="description">
<p>У классовых компонентов React есть несколько специальных методов, которые предоставляют возможности для выполнения действий в определенных точках жизненного цикла компонента. Они называются методами жизненного цикла, или хуками жизненного цикла, и позволяют вам легко отслеживать компоненты в определенные моменты времени. Это может быть до того, как они будут визуализированы, прежде чем они будут обновлены, прежде чем они получат свойства, прежде чем они будут отмонтированы, и так далее. Ниже приведен список некоторых основных методов жизненного цикла: <code>componentWillMount()</code> <code>componentDidMount()</code> <code>componentWillReceiveProps()</code> <code>shouldComponentUpdate()</code> <code>componentWillUpdate()</code> <code>componentDidUpdate()</code> <code>componentWillUnmount()</code> Следующие несколько уроков будут посвящены некоторым основным методам жизненного цикла.</p>

<p><b>Примечание:</b> Начиная с версии 16 метод <code>componentWillMount</code> помечен как устаревший, а в 17 версии удален.</p>

<p>
  <b>Примечание 2:</b> Многие методы жизненного цикла не срабатывают на стороне сервера (если приложение выполняется на стороне сервера в режиме SSR), они срабатывают только на стороне браузера.
</p>
</section>

Use the Lifecycle Method componentWillMount

<section id="description">
<p>Большинство веб-разработчиков в какой-то момент должны вызывать конечную точку API для извлечения данных. Если вы работаете с React, важно знать, где выполнить это действие. Лучшей практикой в ​​React является размещение вызовов API или любых вызовов на ваш сервер в методе жизненного цикла <code>componentDidMount()</code> . Этот метод вызывается после того, как компонент подключен к DOM. Но помните, что любые вызовы <code>setState()</code> здесь (и не только здесь) приводят к повторному рендерингу вашего компонента. Когда вы вызываете API в этом методе и устанавливаете свое состояние с данными, возвращаемыми API, он автоматически инициирует обновление после получения данных.</p></section>

Use the Lifecycle Method componentDidMount

<section id="description">
<p>Метод <code>componentDidMount()</code> также является лучшим местом для присоединения любых прослушивателей событий, которые необходимо добавить для определенных функций. React предоставляет синтетическую систему событий, которая обертывает родную систему событий браузеров. Это означает, что синтетическая система событий ведет себя в разных браузерах одинаково, даже если родные события могут вести себя по-разному в разных браузерах. Вы уже использовали некоторые из этих синтетических обработчиков событий, таких как <code>onClick()</code>. Синтетическая система событий React отлично подходит для большинства взаимодействий, которые вы будете использовать для элементов DOM. Однако, если вы хотите присоединить обработчик событий к объектам документа или окна, вы должны сделать это напрямую.</p></section>

Add Event Listeners

<section id="description">
<p>Другим методом жизненного цикла является <code>componentWillReceiveProps()</code> который вызывается всякий раз, когда компонент получает новые свойства. Этот метод получает новые свойства в качестве аргумента, который обычно записывается как <code>nextProps</code> . Вы можете использовать этот аргумент и сравнить с текущим <code>this.props</code> и выполнить действия перед обновлением компонента. Например, вы можете вызвать <code>setState()</code> локально до обработки обновления. 
</p>
<p>
Другим методом является <code>componentDidUpdate()</code> и вызывается сразу после повторного рендеринга компонента. Обратите внимание, что рендеринг и установка в жизненном цикле компонентов считаются разными. Когда страница сначала загружается, все компоненты монтируются, и здесь вызывается такие методы, как <code>componentWillMount()</code> и <code>componentDidMount()</code>. После этого, по мере изменения состояния, компоненты перерендеривают себя. Следующая задача охватывает это более подробно.</p>
<p><b>Внимание:</b> Данный метод устарел и больше не поддерживается Реактом.</p>
</section>

Manage Updates with Lifecycle Methods

<section id="description">
<p>Пока, если какой-либо компонент получает новое состояние или новые свойства, он повторно отображает себя и всех своих детей. Обычно это нормально. Но React предоставляет метод жизненного цикла, который вы можете вызывать, когда дочерние компоненты получают новое <code>state</code> или <code>props</code> , и по заданной логиче четко решают стоит ли повторно выполнять рендеринг или нет. Этот метод называется <code>shouldComponentUpdate()</code> , и он принимает параметры <code>nextProps</code> и <code>nextState</code>. Этот метод является полезным способом оптимизации производительности. Например, поведение по умолчанию заключается в том, что ваш компонент повторно рендерится, когда он получает новые <code>props</code>, даже если <code>props</code> не изменились. Вы можете использовать <code>shouldComponentUpdate()</code> чтобы предотвратить это, сравнив <code>props</code> . Метод должен возвращать <code>логическое</code> значение (то есть <code>true</code> или <code>false</code>), которое сообщает React, обновлять или не обновлять компонент. Вы можете сравнить текущие свойства ( <code>this.props</code> ) со следующими свойствами ( <code>nextProps</code> ), чтобы определить, нужно ли вам обновлять или нет, и соответственно вернуть <code>true</code> или <code>false</code> .</p></section>

Optimize Re-Renders with shouldComponentUpdate

<section id="description">
<p>Существуют и другие сложные концепции, которые добавляют мощные возможности для вашего кода React. Но вам может быть интересно узнать о более простой проблеме того, как стилизовать те элементы JSX, которые вы создаете в React. Вероятно, вы знаете, что это будет не то же самое, что работать с HTML из-за <a target="_blank" href="https://freecode.academy/learn/exercises/5a24c314108439a4d4036160">того, как вы применяете классы к элементам JSX</a>. Если вы импортируете стили из таблицы стилей, то здесь ощутимой разницы нет. Вы применяете класс к своему элементу JSX, используя атрибут <code>className</code> , и применяете стили к классу в таблице стилей. Другой вариант - применить <strong><em>встроенные</em></strong> или <strong><em>инлайновые</em></strong> стили, которые очень распространены в разработке ReactJS. Вы применяете встроенные стили к элементам JSX, подобным тому, как это делается в HTML, но с несколькими отличиями JSX. Ниже приведен пример встроенного стиля в HTML: <pre class="language-html"><code>&#x3C;div style="color: yellow; font-size: 16px">Mellow Yellow&#x3C;/div></code></pre> Элементы JSX используют атрибут <code>style</code>, но из-за того, что JSX транспилированный, вы не можете установить <code>строчное</code> значение. Вместо этого вы должны передать <code>объект</code> JavaScript. Вот пример: <pre class="language-jsx"><code>&#x3C;div style={{
  color: "yellow", 
  fontSize: 16,
}}>
  Mellow Yellow
&#x3C;/div></code></pre> Обратили внимание, как мы именуем свойство <code>fontSize</code> в стиле <code>camelCase</code>? Это связано с тем, что React не будет принимать имена свойств в объекте стиля в kebabCase  ("шашлычной нотации", то есть если использовать дефисы). React применит правильное имя свойства для нас в HTML.</p></section>

Introducing Inline Styles

<section id="description">
<p>Возможно, вы заметили в последнем случае, что в дополнение к атрибуту <code>style</code> установленному для объекта JavaScript, было несколько других различий синтаксиса из встроенных стилей HTML. Во-первых, имена некоторых свойств стиля CSS используют "верблюжью нотацию". Например, последний вызов задает размер шрифта с <code>fontSize</code> вместо <code>font-size</code> . Слова со знаками-разделителями, такие как <code>font-size</code> являются недопустимым синтаксисом для свойств объекта JavaScript, поэтому React использует "верблюжью нотацию". Как правило, любые свойства дефисного стиля записываются с использованием "верблюжьей нотации" в JSX. Предполагается, что все единицы длины значения свойства (например, <code>height</code> , <code>width</code> и <code>fontSize</code> ) находятся в <code>px</code> если не указано иное. Если вы хотите использовать <code>em</code> , например, вы переносите значение и единицы в кавычки, например <code>{fontSize: "4em"}</code> . Помимо значений длины, которые по умолчанию <code>px</code> , все остальные значения свойств должны быть заключены в кавычки.</p></section>

Add Inline Styles in React

<section id="description">
<p>В предыдущих задачах вы узнали, как выводить код JavaScript в код JSX, используя фигурные скобки, <code>{ }</code>, например, в таких задачах, как доступ к свойствам, передача свойств, доступ к состоянию, вставка комментариев в ваш код и дизайн ваших компонентов. Это все распространенные случаи использования JavaScript в JSX, но это не единственный способ использования кода JavaScript в компонентах React. Вы также можете писать JavaScript непосредственно в своих методах <code>render</code> перед оператором <code>return</code> , <strong><em>не</em></strong> вставляя его внутри фигурных скобок. Это связано с тем, что он еще не находится в коде JSX. Если вы хотите использовать переменную позже в коде JSX <em>внутри</em> оператора <code>return</code> , вы поместите имя переменной внутри фигурных скобок.</p>
<p>
  <b>Примечание:</b> JSX существует не только в рамках выполнения оператора <code>return</code>. Вообще <code>return</code> тут ничего не определяет более того, как только возврат значения. Границы JSX определяются тегами, написанными с использованием угловых скобок <code>&#x3C;</code> и <code>></code>, так же, как теги пишутся в HTML. Для примера:
  <pre class="language-jsx"><code>const string = "Some string value";
const content = &#x3C;div>String: {string}&#x3C;/div>
return content;</code></pre>
</p>
<p>Здесь константа <code>content</code> содержит в себе JSX-элемент, и чтобы внутри него вывести значение константы <code>string</code>, пришлось использовать фигурные скобки. В противном случае мы бы получили не значение константы, а простой текст <code>string</code>. То есть расценивайте JSX как шаблонизатор (коих много). Так будет проще и понятней.</p>
</section>

Use Advanced JavaScript in React Render Method

<section id="description">
<p>Еще одно применение JavaScript для управления вашим визуализированным представлением - вывод элементов с учетом условий. Когда условие истинно, выводится одно представление. Когда это ложно, выводится другое. Вы можете сделать это с помощью стандартного оператора <code>if/else</code> в методе <code>render()</code> React-компонента.</p></section>

Render with an If-Else Condition

<section id="description">
<p>Операторы if/else работали в прошлом уроке, но есть более сжатый способ добиться того же результата. Представьте, что вы отслеживаете несколько условий в компоненте и хотите, чтобы различные элементы отображались в зависимости от каждого из этих условий. Вместо конструкций <code>else/if</code> вы можете использовать логический оператор <code>&#x26;&#x26;</code> для выполнения условной логики более кратким образом. Вот пример: <pre class="language-jsx"><code>{condition &#x26;&#x26; &#x3C;p>markup&#x3C;/p>}</code></pre> Если <code>condition</code> равно <code>true</code> , разметка будет возвращена. Если условие <code>false</code> , операция немедленно вернет значение <code>false</code> после оценки <code>condition</code> и ничего не вернет. Вы можете включить эти утверждения непосредственно в свои JSX и несколько разных условий вместе, написав <code>&#x26;&#x26;</code> после каждого из них. Это позволяет обрабатывать более сложную условную логику в формировании конечного JSX, не повторяя много кода.</p></section>

Use && for a More Concise Conditional

<section id="description">
<p>Прежде чем перейти к динамическим методам рендеринга, есть еще один способ использовать встроенные условия JavaScript для рендеринга того, что вы хотите: <a href="https://freecode.academy/learn/exercises/587d7b7e367417b2b2512b24" target="_blank">тернарный оператор</a>. Тернарный оператор часто используется как сокращение для операторов <code>if/else</code> в JavaScript. Они не такие гибкие, как традиционные инструкции <code>if/else</code>, но они очень популярны среди разработчиков React. Одна из причин этого заключается в том, что JSX скомпилирован так, что инструкции <code>if/else</code> не могут быть вставлены непосредственно в код JSX. Возможно, вы заметили это несколько задач назад - когда требовался оператор <code>if/else</code>, он всегда находился <em>за пределами</em> JSX-разметки . Тернарные выражения могут быть отличной альтернативой, если вы хотите реализовать условную логику в своем JSX. Напомним, что тройной оператор состоит из трех частей, но вы можете комбинировать <a href="https://freecode.academy/learn/exercises/587d7b7e367417b2b2512b21" target="_blank">несколько тройных выражений</a>.</p>
</section>

Use a Ternary Expression for Conditional Rendering

<section id="description">
<p>До сих пор вы видели, как использовать <code>if/else</code>, <code>&&</code> и <code>тернарный оператор</code> для принятия условных решений о том, что и когда отображать. Однако остается обсудить еще одну важную тему, которая позволяет комбинировать любую или все эти концепции с другой мощной функцией React: свойства. Использование свойств для условного рендеринга кода очень распространено среди разработчиков React - то есть они используют значения свойств для автоматического принятия решений о том, что рендерить.
</p>
<p>
В этой задаче вы настроите дочерний компонент для принятия решений о рендеринге на основе свойств. Вы также будете
использовать тернарный оператор, но вы можете увидеть, как некоторые из других концепций, которые были рассмотрены в
последних нескольких задачах, могут быть столь же полезными в этом контексте.</p></section>

Render Conditionally from Props

<section id="description">
<p>На этом этапе вы видели несколько приложений условного рендеринга и использование встроенных стилей. Вот еще один пример, который объединяет обе эти темы. Вы также можете визуализировать CSS на основе состояния компонента React. Для этого вы проверяете условие, и если это условие выполнено, вы изменяете объект стилей, назначенный элементам JSX в методе рендеринга. Эта парадигма важна для понимания, потому что это драматический переход от более традиционного подхода применения стилей, изменяя непосредственно элементы DOM (что очень часто встречается с jQuery, например). В этом подходе вы должны отслеживать, когда элементы меняются, а также обрабатывать фактическую манипуляцию напрямую. Может быть сложно отслеживать изменения, потенциально делая ваш пользовательский интерфейс непредсказуемым. Когда вы устанавливаете объект стиля на основе условия, вы описываете, как пользовательский интерфейс должен выглядеть в зависимости от состояния приложения. Существует четкий поток информации, который движется только в одном направлении. Это предпочтительный метод при написании приложений с помощью React.</p></section>

Change Inline CSS Conditionally Based on Component State

<section id="description">
<p>Условный рендеринг полезен, но вам могут понадобиться ваши компоненты для отображения неизвестного количества элементов. Часто в реактивном программировании программист не имеет никакого способа узнать, какое состояние приложения находится во время выполнения, потому что так много зависит от взаимодействия пользователя с этой программой. Программистам необходимо написать свой код для правильной обработки этого неизвестного состояния раньше времени. Использование <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/map" target="_blank">Array.map()</a> в React иллюстрирует это понятие. Например, вы создаете простое приложение «To Do List». Как программист, у вас нет способа узнать, сколько элементов пользователь может иметь в своем списке. Вам необходимо настроить компонент для <em><strong>динамического отображения</strong></em> правильного количества элементов списка задолго до того, как кто-то, использующий программу, решит, что сегодня день прачечной.</p></section>

Use Array.map() to Dynamically Render Elements

<section id="description">
<p>Последняя задача показала, как используется метод `map` для динамичного рендеринга нескольких элементов, основываясь на вводе пользователя. Однако в том примере отсутсвовала важная часть. Когда вы создаете массив, атрибут <code>key</code> каждого из элементов должен иметь уникальное значение. React использует эти ключи для того, чтобы отслеживать какие элементы были добавлены, изменены или удалены. Это помогает сделать процесс повторного рендеринга более эффективным, когда мы изменяем список. Обратите внимание, что ключи должны быть уникальными только среди дочерних элементов, они не обязаны быть глобально уникальными в вашем приложении.</p></section>

Give Sibling Elements a Unique Key Attribute

<section id="description">
<p>Метод массива <code>map</code> - это мощный инструмент, который вы часто будете использовать при работе с React. Другой метод, связанный с <code>массивами</code> - это <code>filter</code>, который фильтрует содержимое массива на основе условия, а затем возвращает новый массив. Например, если у вас есть массив пользователей, у всех есть свойство <code>online</code> которое может быть установлено как <code>true</code> или <code>false</code> , вы можете фильтровать только тех пользователей, которые находятся в сети, написав: <code>const onlineUsers = users.filter(user => user.online);</code></p>
</section>

Use Array.filter() to Dynamically Filter an Array

<section id="description">
<p>До сих пор вы предоставляли компоненты React на клиенте. Обычно это то, что вы всегда будете делать. Однако есть некоторые варианты использования, когда имеет смысл отображать на сервере компонент React. Так как React - это библиотека просмотра JavaScript, и вы можете запускать JavaScript на сервере с помощью Node, это возможно. Фактически, React предоставляет метод <code>renderToString()</code> который вы можете использовать для этой цели. Существует две основные причины, по которым рендеринг на сервере может быть использован в приложении реального мира. Во-первых, без этого приложения React будут состоять из относительно пустого HTML-файла и большого пакета JavaScript, когда он первоначально загружен в браузер. Это может быть не идеальным для поисковых систем, которые пытаются индексировать содержимое ваших страниц, чтобы люди могли вас найти. Если вы визуализируете начальную разметку HTML на сервере и отправляете ее клиенту, загрузка начальной страницы содержит всю разметку страницы, которая может быть сканирована поисковыми системами. Во-вторых, это создает более быструю загрузку начальной загрузки страницы, поскольку отображаемый HTML меньше, чем код JavaScript всего приложения. React по-прежнему сможет распознать ваше приложение и управлять им после начальной загрузки.</p></section>

Render React on the Server with renderToString

<section id="description">
<p>Мы можем очистить наш код и сделать наше приложение Cat Photo более обычным, используя встроенные стили Bootstrap вместо пользовательских стилей, которые мы создали ранее. Не волнуйтесь - у нас будет много времени, чтобы настроить наш CSS позже. Удалите объявления CSS <code>.red-text</code> , <code>p</code> и <code>.smaller-image</code> из вашего элемента <code>style</code> чтобы только объявления, оставшиеся в вашем элементе <code>style</code> были <code>h2</code> и <code>thick-green-border</code> . Затем удалите элемент <code>p</code> , содержащий мертвую ссылку. Затем удалите класс <code>red-text</code> из вашего элемента <code>h2</code> и замените его на <code>text-primary</code> класс Bootstrap. Наконец, удалите класс «меньшего изображения» из вашего первого элемента <code>img</code> и замените его классом <code>img-responsive</code> .</p></section>

Ditch Custom CSS for Bootstrap

<section id="description">
<p>Используя Bootstrap, мы можем центрировать наш элемент заголовка, чтобы он выглядел лучше. Все, что нам нужно сделать, это добавить класс <code>text-center</code> к нашему элементу <code>h2</code> . Помните, что вы можете добавить несколько классов в один и тот же элемент, разделив их пробелом, например: <code>&#x3C;h2 class="red-text text-center">your text&#x3C;/h2></code></p>
</section>

Center Text with Bootstrap

<section id="description">
<p>Теперь мы готовы изучить jQuery, самый популярный инструмент JavaScript за все время. Прежде чем мы сможем начать использовать jQuery, нам нужно добавить некоторые вещи в наш HTML. Во-первых, добавьте элемент <code>script</code> в верхней части страницы. Не забудьте закрыть его в следующей строке. В вашем браузере будет запущен любой JavaScript внутри элемента <code>script</code> , включая jQuery. Внутри вашего <code>script</code> элемента добавьте этот код: <code>$(document).ready(function() {</code> в свой <code>script</code> . Затем закройте его в следующей строке (все еще внутри вашего элемента <code>script</code> ) с помощью: <code>});</code> Мы узнаем больше о <code>functions</code> позже. Важно знать, что код, введенный внутри этой <code>function</code> будет запущен, как только ваш браузер загрузит вашу страницу. Это важно, потому что без функции вашего <code>document ready function</code> , ваш код может работать до того, как ваш HTML будет отображаться, что приведет к ошибкам.</p></section>

Learn How Script Tags and Document Ready Work

<section id="description">
<p>В секциях HTML5 и CSS в freeCodeCamp мы создали Приложение для фотографий кошек. Давайте вернемся к нему. В этот раз мы стилизуем его используя, популярный адаптивный фреймворк CSS - Bootstrap.</p><p>Bootstrap определит насколько широк ваш экран и ответит измением размера ваших HTML элементов. Отсюда и название <code>адаптивный дизайн</code>.</p>
</section>

Use Responsive Design with Bootstrap Fluid Containers

<section id="description">
<p>Сначала добавьте новое изображение ниже существующего. Установите для атрибута <code>src</code> значение <code>https://bit.ly/fcc-running-cats</code> . Было бы здорово, если бы это изображение могло быть точно шириной экрана нашего телефона. К счастью, с помощью Bootstrap все, что нам нужно сделать, это добавить класс <code>img-responsive</code> к вашему изображению. Сделайте это, и изображение должно идеально соответствовать ширине вашей страницы.</p></section>

Make Images Mobile Responsive

<section id="description">
<p>Теперь давайте убедимся, что все содержимое вашей страницы мобильно реагирует. Давайте вложим ваш элемент <code>h3</code> элемент <code>div</code> с <code>container-fluid</code> класса.</p></section>

House our page within a Bootstrap container-fluid div

<section id="description">
<p>Теперь давайте получить форму <code>input</code> и ваши представления <code>button</code> на одной и той же линии. Мы сделаем это так же, как и раньше: с помощью элемента <code>div</code> со <code>row</code> класса и других элементов <code>div</code> внутри него с использованием класса <code>col-xs-*</code> . Гнездо как текст вашей формы <code>input</code> и представить <code>button</code> в <code>div</code> с классом <code>row</code> . Гнездо <code>input</code> текста вашей формы в div с классом <code>col-xs-7</code> . Настройте <code>button</code> отправки формы в <code>div</code> с классом <code>col-xs-5</code> . Это последняя задача, которую мы будем делать для нашего приложения для фотошопа Cat. Надеемся, вам понравилось изучать шрифт Awesome, Bootstrap и отзывчивый дизайн!</p></section>

Line up Form Elements Responsively with Bootstrap

<section id="description">
<p>Теперь давайте построим что-то с нуля, чтобы практиковать наши навыки HTML, CSS и Bootstrap. Мы построим игровую площадку jQuery, которую мы скоро станем использовать в наших задачах jQuery. Для начала создайте элемент <code>h3</code> с текстовой <code>jQuery Playground</code> . Разделите свой элемент <code>h3</code> <code>text-primary</code> исходным классом Bootstrap и центрируйте его с помощью <code>text-center</code> Bootstrap.</p></section>

Create a Bootstrap Headline

<section id="description">
<p>После того, как мы создали строку Bootstrap, давайте разделим её на две колонки, чтобы хранить в них наши элементы.</p><p>Создайте два <code>div</code> элемента, оба с классом <code>col-xs-6</code>, внутри вашей строки.</p>
</section>

Split Your Bootstrap Row

<section id="description">
<p>У Bootstrap есть класс, который называется <code>well</code> который может создать визуальное ощущение глубины для ваших столбцов. Гнездо один <code>div</code> элемент с классом <code>well</code> в каждом из ваших <code>col-xs-6</code> <code>div</code> элементов.</p></section>

Create Bootstrap Wells

<section id="description">
<p>Теперь у нас есть несколько элементов <code>div</code> на каждом столбце нашей строки. Это достаточная глубина для нашей цели. Теперь мы можем добавить элементы <code>button</code> . Гнездо три <code>button</code> элементы внутри каждого из <code>well</code> <code>div</code> элементов.</p></section>

Add Elements within Your Bootstrap Wells

<section id="description">
<p>В Bootstrap есть еще один класс кнопок <code>btn-default</code> . Примените оба <code>btn</code> и <code>btn-default</code> к каждому из ваших элементов <code>button</code> .</p></section>

Apply the Default Bootstrap Button Style

<section id="description">
<p>Не каждый класс должен иметь соответствующий CSS. Иногда мы создаем классы только с целью более простого выбора этих элементов с помощью jQuery. Создайте класс для каждого из ваших элементов <code>button</code> <code>target</code>.</p></section>

Create a Class to Target with jQuery Selectors

<section id="description">
<p>Напомним, что помимо атрибутов класса вы можете указать каждому из ваших элементов атрибут <code>id</code> . Каждый идентификатор должен быть уникальным для определенного элемента и использоваться только один раз на странице. Давайте дадим уникальный идентификатор для каждого из наших <code>div</code> элементов класса <code>well</code> . Помните, что вы можете указать элемент id следующим образом: <code>&#x3C;div class="well" id="center-well"></code> Дайте колодец слева идентификатор <code>left-well</code> . Дайте колодец справа <code>right-well</code> .</p></section>

Add id Attributes to Bootstrap Elements

<section id="description">
<p>Для ясности давайте обозначим оба наших колодца своими идентификаторами. Над вашей левой кнопкой, внутри своего элемента <code>div</code> <code>col-xs-6</code> , добавьте элемент <code>h4</code> с текстом <code>#left-well</code> . Над вашей правой кнопкой, внутри своего элемента <code>div</code> <code>col-xs-6</code> , добавьте элемент <code>h4</code> с текстом <code>#right-well</code> .</p></section>