Язык программирования JavaScript презентация

Фреймворки и библиотеки

Язык программирования JavaScript широко используется как во фронтенде, так и в бэкенде. Не удивительно, что в его экосистеме есть множество библиотек, с помощью которых можно легко и быстро создавать самые разные сайты.
Среда JavaScript стала огромной. Она имеет собственную экосистему библиотек, фреймворков, инструментов, менеджеров пакетов и новых языков, которые компилируются в JavaScript.

Библиотека JavaScript — это набор готовых функций и / или классов, созданных с использованием языка программирования JS.
Имея специальную библиотеку JavaScript, разработчик может использовать уже созданные и протестированные сценарии для создания приложения, точно так же, как строители используют кирпичи для строительства дома. Более того, такие готовые скрипты можно использовать как самостоятельные элементы или стать частью более сложных функций.
В настоящее время существует множество JS-библиотек, которые можно разделить на:
масштабные базы данных со всеми распространенными виджетами, аббревиатурами и полифилами;
узкоспециализированные базы данных для выполнения конкретных задач, таких как создание диаграмм, анимаций, математических функций и т. д.

Самые популярные библиотеки и фреймворки
React — это декларативная, эффективная и гибкая JavaScript-библиотека для создания пользовательских интерфейсов. Она позволяет вам собирать сложный UI из маленьких изолированных кусочков кода, называемых «компонентами».
jQuery - это библиотека, которая сделала JavaScript более доступным а DOM-манипуляцией проще, чем раньше.
AngularJS - одна из самых мощных сред JavaScript. Google использует эту платформу для разработки одностраничного приложения (SPA), предоставляет разработчикам лучшие условия для объединения JavaScript с HTML и CSS.
Vue.js - это легкий JavaScript фреймворк, который предлагает опыт, похожий на React, с его виртуальными DOM и компонентами повторного использования, которые можно использовать для создания как виджетов, так и целых веб-приложений.

React

React - это библиотека JavaScript, созданная разработчиками Facebook и Instagram. Согласно опросу Stack Overflow Survey 2017, React был признан самой популярной технологией среди разработчиков. React также имеет честь быть самым популярным проектом JavaScript, согласно количеству звезд на GitHub.
React — это декларативная, эффективная и гибкая JavaScript-библиотека для создания пользовательских интерфейсов. Она позволяет вам собирать сложный UI из маленьких изолированных кусочков кода, называемых «компонентами».
React использует виртуальную модель DOM, так что вам не нужно беспокоиться о прямом манипулировании с DOM. Другие примечательные особенности React включают однонаправленный поток данных, дополнительный синтаксис JSX и инструмент командной строки для создания проекта React с нуля.
React

React используется во множестве веб-приложений:
Facebook
Instagram
Netflix
New York Times
WhatsApp
Dropbox
Яндекс
Сбер
Авито
И многие другие…
Где используется?

React Native — это кроссплатформенный фреймворк с открытым исходным кодом для разработки нативных мобильных и настольных приложений на JavaScript, его используют:
Pinterest
Skype
Discord
Tesla
Instagram
Airbnb
SoundCloud
Microsoft OneDrive
И многие другие…
Где используется?

для создания функциональных интерактивных веб-интерфейсов, работая с которыми, не нужно постоянно обновлять страницу;
быстрой и удобной реализации отдельных компонентов и страниц целиком — элементы в React легко использовать повторно;
легкой разработки сложных программных структур — их просто описывать, если использовать реализованный в React подход;
доработки новой функциональности интерфейса с любым изначальным стеком технологий: фреймворк не зависит от остального инструментария и будет хорошо работать, на чем бы ни был написан код;
разработки одностраничных и многостраничных приложений (SPA и PWA). Это сайты, которые функционируют как программы и веб-сервисы и имеют соответствующий интерфейс;
работы с серверной частью сайта или разработки интерфейсов мобильных приложений. В таких случаях React используют совместно с инструментами, адаптирующими веб-технологии под другие цели.
Для чего нужен React

React + и -

Популярность - Это один из трех самых распространенных фреймворков для фронтенд-разработки. Кроме него, популярны Vue.js и Angular, но первый пока не так распространен, а второй намного сложнее в изучении. Еще одна популярная технология — jQuery, но она постепенно уходит в прошлое.
Огромное сообщество
Развитая экосистема
Простота создания интерфейса
Реактивность - Фреймворк реагирует на обновление компонента и автоматически отображает его изменения в дереве документа.
Высокая скорость работы
Преимущества React

Запутанность синтаксиса - Технология JSX удобная и широко используется, но сначала она может вызвать сложности в изучении.
Трудности с SEO-оптимизацией (SEO — это поисковая оптимизация, проработка сайта таким образом, чтобы он соответствовал требованиям поисковых систем.)
Своеобразная архитектура проекта
Недостатки React

Особенности React

Декларативный стиль означает, что разработчику достаточно один раз описать, как будут выглядеть результаты работы кода — элементы в разных состояниях. Ему не нужно фокусироваться на способах достижения результатов: большую часть работы выполнит фреймворк. React будет автоматически обновлять состояние элементов в зависимости от условий, главная задача — грамотно описать эти состояния. Удобный и понятный подход облегчает написание и отладку кода.
Декларативность

Любой веб-интерфейс основан на HTML-документе и CSS-стилях, к которым подключен код на JavaScript. Структура HTML-документа, точнее его модель, называется DOM-деревом (DOM расшифровывается как Document Object Mode, объектная модель документа). Это древовидная модель, в которой в иерархическом виде собраны все используемые на странице элементы.
Особенность React в том, что он создает и хранит в кэше виртуальное DOM-дерево — копию DOM, которая изменяется быстрее, чем реальная структура. Это нужно для того, чтобы быстро обновлять состояние страницы. Если пользователь выполнит действие или наступит какое-либо событие, DOM должна измениться, так как изменятся объекты на странице. Но реальная объектная модель может быть огромной, ее обновление — медленный процесс. Поэтому React работает не с ней, а с виртуальной копией в кэше, которая весит меньше.
Виртуальное DOM-дерево

Чтобы улучшить быстродействие, React обновляет DOM не полностью. Он хранит в памяти две облегченных копии: актуальную и предыдущую. Когда что-то обновляется, фреймворк сравнивает версии между собой и изменяет только ту часть дерева, которая действительно поменялась. Это нужно, чтобы не перезагружать DOM целиком и не замедлять работу страницы. Подход кажется сложным, но он важен для оптимизации загрузки.
Обновление DOM по частям

React основан на компонентах — отдельных элементах веб-интерфейса. Компоненты инкапсулированы, то есть самостоятельны: в каждом из них размещены все методы и данные, необходимые для работы.
Инкапсулированные самостоятельные компоненты можно использовать повторно, размещать в другом месте кода, в ином разделе или на другой странице. Данные можно переносить по всему приложению, использовать вне DOM конкретной страницы. Это ускоряет разработку и сокращает количество действий для создания функционирующего интерфейса. Благодаря отсутствию сложных зависимостей инкапсуляция также облегчает отладку.
Возможность повторно использовать компоненты

Компоненты могут передавать свойства и данные друг другу, но только в одном направлении — от «родительских» к дочерним. Это помогает реализовать четкую иерархию, облегчает отладку. Однонаправленный поток данных означает, что программист всегда может понять, откуда именно к элементу поступили данные.
Нисходящий поток данных

JSX расшифровывается как JavaScript XML. Это расширение языка JavaScript, которое помогает описывать HTML-подобные элементы с помощью кода на React. С помощью синтаксиса разработчики на React создают компоненты страницы и гибко управляют ими.
Несмотря на то что элементы похожи на HTML, это по-прежнему JavaScript с возможностью быстро и легко изменять DOM с помощью кода. И все же JSX воспроизводится как HTML: по сути разработчик описывает нужный компонент на языке разметки, а тот остается JavaScript-объектом с широкой функциональностью. Это удобно, упрощает программирование, но может запутать начинающих разработчиков.
Синтаксис JSX

Сейчас в React есть поддержка хуков — так называются специальные функции-«крючки», которые «цепляются» за состояние элемента или за метод. Изменение состояния или вызов метода «тащит» за собой эти функции, и они автоматически выполняются
React Hooks

Так как React — очень популярная технология, его создатели разработали бесплатные расширения для браузера с инструментами для проверки и отладки. Фронтендеры часто пользуются консолью и панелью разработчика в браузере, чтобы проверить, как работает их код. React Developer Tools облегчают задачу и расширяют возможности.
React Developer Tools

Начало работы

React изначально был спроектирован так, чтобы его можно было внедрять постепенно. Другими словами, вы можете начать с малого и использовать только ту функциональность React, которая необходима вам в данный момент.
Для внедрения React не надо ничего переписывать. Его можно использовать как для маленькой кнопки, так и для целого приложения. Возможно, вы захотите немного «оживить» вашу страницу. React-компоненты подходят для этого как нельзя лучше.
Большинство сайтов в Интернете является обычными HTML-страницами. Даже если ваш сайт не относится к одностраничным приложениям, вы можете добавить на него React, написав всего несколько строк кода без каких-либо инструментов сборки. В зависимости от целей, можно постепенно перенести на React весь сайт или переписать всего несколько виджетов.
Пробуем React

Способ 1.
Добавление на страницу

Для начала, откройте HTML-файл страницы, которую хотите отредактировать. Добавьте пустой тег
в месте, где вы хотите отобразить что-нибудь с помощью React. Например:
Добавляем DOM-контейнер в HTML

Теперь добавьте три
-тега перед закрывающим тегом </body>:<br><!-- ... остальной HTML</div></h2><div class="slides-content">... --><br>
<!-- Загрузим React. --><br><!-- Примечание: при деплое на продакшен замените «development.js» на «production.min.js». --><br><script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>
Добавляем script-теги

Создайте файл с именем like_button.js рядом с вашим HTML-файлом.
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false }; }
render() {
if (this.state.liked) {return 'You liked this.'; }
return e('button',{ onClick: () => this.setState({ liked: true }) },'Like');
}
}
Создаём React-компонент

Добавьте ещё 3 строки в конец файла like_button.js, после стартового кода:
const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(e(LikeButton));
Эти три строки кода ищут элемент
, который мы добавили в HTML на первом шаге, а затем отображают React-компонент с кнопкой «Like» внутри него.
Создаём React-компонент

Способ 2.
React-приложение

Node.js — это программная платформа, которая транслирует JavaScript в машинный код, исполняемый на стороне сервера. Таким образом, JavaScript можно использовать для создания серверной части.
npm — менеджер (установщик) пакетов, входящий в состав Node.js.
npx — позволяет запускать пакеты Node.js, не устанавливая его и не добавляя зависимости в ваш проект. Некоторые пакеты разрабатываются специально для того, чтобы быть запущенными с помощью npx.
Скачиваем на — https://nodejs.org/
Node.js

Для установки фреймворка вам понадобятся NodeJS не ниже версии 8.10 и npm не ниже версии 5.6 на вашем компьютере. Для создания проекта в командной строке выполните следующие команды:
npx create-react-app my-app
cd my-app
npm start
После этого у вас появится папка my-app, содержащая в себе библиотеку. Найдите в этой папке папку src - это будет ваша рабочая папка, в которой вы будете вести разработку вашего проекта.
Node.js

Структура проекта
node_modules/ содержит все внешние библиотеки JavaScript, используемые приложением. Вам нечасто потребуется использовать его.
Директория public/ содержит базовые файлы HTML, JSON и изображений. Это корневые ресурсы вашего проекта.
В директории src/ содержится код React JavaScript для вашего проекта. В основном вы будете работать именно с этой директорией.
Файл .gitignore содержит несколько директорий и файлов по умолчанию, которые система контроля исходного кода git будет игнорировать, в том числе директорию node_modules.
README.md — это файл разметки, содержащий много полезной информации о приложении Create React App, в том числе обзор команд и ссылки на расширенные опции конфигурации.

Структура проекта
Последние два файла используются вашим диспетчером пакетов.
При запуске первоначальной команды npx вы создали базовый проект, а также установили дополнительные зависимости. При установке зависимостей вы создали файл package-lock.json. Этот файл используется npm для проверки точного соответствия версий пакетов.
Последний файл — package.json. Он содержит метаданные о вашем проекте, включая заголовок, номер версии и зависимости. Также он содержит скрипты, которые вы можете использовать для запуска проекта.

В папке src найдите файл App.js. Ближайшие уроки этот файл будет вашим основным рабочим файлом. В нем вы будете писать код, наблюдая его результаты в окне браузера.
Откройте этот файл в редакторе и удалите из него все лишнее, приведя его вот к такому виду:
import React from 'react';
function App() {
return
text
;
}
export default App;
App.js

После того, как ваш проект установлен, для следующего запуска (например, после перезагрузки компьютера) вам достаточно будет перейти через терминал в папку my-app и выполнить следующую команду:
npm start
App.js

Установите в ваш браузер специальный плагин react-devtools, помогающий вести разработку на React.
Плагин для разработки

Компонентный подход в React

Пусть у нас есть сайт. На этом сайте мы можем выделить некоторые блоки: хедер, контент, сайдбар, футер и так далее. Каждый блок можно разделить на более мелкие подблоки. К примеру в хедере обычно можно выделить логотип, менюшку, блок контактов и так далее.
В React каждый такой блок называется компонентом. Каждый компонент может содержать в себе более мелкие компоненты, те в свою очередь еще более мелкие и так далее.
Каждому компоненту в React соответствует js модуль, расположенный в папке src. Имя файла с модулем пишется с большой буквы и должно соответствовать функции, которая расположена в коде этого модуля.
Например, файл с названием App.js должен содержать внутри себя функцию App
Компонентный подход в React

Один из компонентов должен быть основным - тем, к которому добавляются остальные компоненты. В React по умолчанию таким компонентом будет компонент App.
К этому компоненту будут подключаться другие компоненты. Как это делается - мы разберем далеe.
Основной компонент

В папке my-app/public в файле index.html расположен макет сайта. Вы можете размещать в нем любой HTML код - и вы увидите результат этого кода в браузере.
Кроме того, в макете сайта есть специальный див с id, равным root, в который монтируется основной компонент. Мод монтированием понимается то, что в этот див будет выводится результат работы нашего компонента.
Макет сайта

В див с результатом будет выведено то, что возвращает через return функция компонента. В следующем примере это будет див с текстом:
function App() {
return
text
;
}
Обратите внимание на то, что див мы пишем без кавычек - просто пишем тег в JavaScript коде! Это основная особенность React.
На самом деле в React мы пишем не на языке JavaScript, а на языке JSX, который мы будем изучать в следующих уроках.
Процесс преобразования JSX в итоговый HTML код называется рендерингом.
Результат работы компонента

JSX в React

Язык JSX - это обычный JavaScript, но с некоторыми дополнениями, позволяющими писать теги прямо в коде, без кавычек.
Теги можно возвращать через return:
function App() {
return
text
;
}
JSX в React

Теги можно записывать в переменные или константы:
function App() {
const elem =
text
;
return elem;
}
JSX в React

Все теги в JSX должны быть закрыты, в том числе теги, которые не требуют пары, например, input или br.
Следующий пример кода выдаст ошибку, так как инпут не закрыт:
function App() {
return
;
}
Закроем его с помощью обратного слеша:
Закрытость тегов
function App() {
return
;
}

Верстка в JSX должна быть корректной. В частности, не все теги можно вкладывать друг в друга. Например, если в теге ul разместить абзац, это приведет к ошибке.
Помимо более-менее очевидных недопустимых вложенностей, есть также и неожиданные: таблицы.
В таблицах мы привыкли сразу в тег table вкладывать теги tr, вот так:
Корректность верстки
function App() {
return
1
2
3
4
;
}

Такой код в React приведет к выводу предупреждения в консоли, так как tr должны быть вложены либо в тег tbody, либо в thead, либо в tfoot.
Давайте исправим проблему, сделав нашу таблицу корректной:
Корректность верстки
function App() {
return
1
2
3
4
;
}

В теги можно добавлять атрибуты:
Некоторые атрибуты представляют собой исключения: вместо атрибута class следует писать атрибут className, а вместо атрибута for следует писать атрибут htmlFor:
Атрибуты
function App() {
return
text
;
}
function App() {
return
text
;
}

Функция в вашем основном компоненте сейчас должна выглядеть следующим образом:
Практика
import React from 'react';
function App() {
return
text
;
}
export default App;

Поменяйте текст внутри дива. Посмотрите на изменения, произошедшие в браузере.
Добавьте в див несколько абзацев.
Добавьте в див несколько инпутов, разделенных тегами br.
№1

Сделайте внутри дива список ul, содержащий в себе 10 тегов li.
№2

Сделайте внутри дива таблицу с тремя рядами и тремя колонками.
№3

Сделайте внутри дива три абзаца с различными CSS классами.
№4

Правила возврата функцией тегов JSX

Внутри тега, который возвращается через return, может быть сколько угодно вложенных тегов:
Вложенность тегов
function App() {
return
text1
text2
;
}

Открывающий тег обязательно должен быть написан на одной строке с командой return. Например, следующий код работать не будет:
Снос тега вниз
function App() {
return
text1
text2
;
}
Для того, чтобы такой снос тега вниз заработал, наш тег необходимо взять в круглые скобки:
function App() {
return (
text1
text2
);
}

Через return нельзя возвращать сразу несколько тегов. То есть следующий код работать не будет:
Возврат нескольких тегов
function App() {
return (
text1
text2
text3
text4
);
}
Чтобы желаемое заработало, нам придется взять наши теги в какой-нибудь общий тег, например, вот так:
function App() {
return (
text1
text2
text3
text4
);
}

Такой прием сработает, однако, он не без недостатков: в результате рендеринга мы получим дополнительный див, который мы в общем не хотели и ввели исключительно для корректности работы React. Этот див, к примеру, может сломать нам часть верстки.
Для избежания таких проблем в React введен специальный пустой тег <>, который группирует теги, но в готовую верстку не попадает. Давайте воспользуемся этим тегом:
Возврат нескольких тегов
function App() {
return (
<>
text1
text2
text3
text4
);
}

В качестве результата можно возвращать тег, который не нужно закрывать, например, инпут. Как вы уже знаете, по правилам React в этом случае вместо тега
нужно писать тег
:
Возврат незакрытого тега
function App() {
return
;
}

Пусть мы хотим вернуть пустой тег:
Возврат пустого тега
function App() {
return
;
}
В этом случае код можно сократить вот так:
При этом в получившемся HTML коде React автоматические преобразует сокращенную форму в нормальную.
function App() {
return
;
}

В следующем коде автор кода хочет вернуть тег ul:
№1
function App() { return
text1
text2
text3
;
}
Код, однако, не работает. Исправьте ошибку автора кода.

Автор следующего кода хочет вернуть сразу два тега ul:
№2
function App() { return
text1
text2
text3
text1
text2
text3
;
}
Код, однако, не работает. Исправьте ошибку автора кода.

Автор следующего кода хочет вернуть инпут:
№3
function App() {
return
;
}
Код, однако, не работает. Исправьте ошибку автора кода.

Автор следующего кода хочет вернуть три инпута:
№4
function App() {
return
;
}
Код, однако, не работает. Исправьте ошибку автора кода.

Введение в компоненты JSX

Взглянем на любой сайт. Он состоит из набора независимых блоков: хедер, сайдбары, футер, контент. Можно сказать, что эти блоки и есть компоненты в том смысле, в котором подразумевается в React.
Если посмотреть на тот же хедер, что в нем можно выделить блок с логотипом, блок контактов, блок с меню и так далее. То есть компоненты могут состоять из других подкомпонентов.
Аналогичным образом дело обстоит в React - сайт строится из набора компонентов, которые в свою очередь могут содержать другие компоненты.
В React каждый компонент представляет собой отдельный модуль. Обычно разработка начинается с главного компонента App, который содержит в себе остальные.
Компоненты React

Давайте потренируемся создавать новые компоненты. Их принято создавать в отдельных файлах.
Пусть для примера нам нужен компонент, выводящий данные продукта. Для этого нам нужно в рабочей папке создать файл Product.js и добавить в него следующий код:
Компоненты React
function Product() {
return product
;
}

Для того, чтобы мы могли использовать компонент в другом файле, нам нужно его экспортировать – разрешить использование в других файлах с помощью команды export
Компоненты React
function Product() {
return product
;
}
export default Product;

Чтобы отобразить наш компонент внутри другого компонента, нам необходимо добавить его – импортировать с помощью команды import
Компоненты React
import Product from './Product'; // импортируем продукт
function App() {
return
text
;
}
export default App;

Каждому подключенному компоненту соответствует свой JSX тег. К примеру, у нас есть компонент Product, а значит ему соответствует тег
.
Название тега компонента обязательно следует писать с большой буквы, чтобы React мог отличить вызов компонента от использования тега HTML.
Компоненты React
import Product from './Product';
function App() {
return
;
}
export default App;

Можно вставить несколько продуктов. Для этого нужно просто написать несколько тегов компонента:
Несколько экземляров компонента
import Product from './Product';
function App() {
return
;
}
export default App;

Сделайте компонент User, который будет выводить данные юзеров. Пусть сейчас этот компонент просто выводит какой-нибудь текст. Используйте этот компонент в компоненте App.
Добавьте в компонент App несколько экземпляров компонента User
№1

Создайте базовую разметку сайта, разбив её на компоненты Header, Main, Footer, компоненты заполните соответствующим контентом. Все компоненты добавьте в компонент App
№2

Вставка значений в JSX

Пусть у нас есть следующий код:
Вставка значений
function App() {
const str = 'text';
return
text
;
}
Чтобы в текст дива вставилось значение константы str нашу константу нужно написать в фигурных скобках внутри, вот так:
function App() {
const str = 'text';
return
{str}
;
}

1) Кроме вставки константы в теге может быть еще какой-нибудь текст:
Нюансы
function App() {
const str = 'text';
return
eee {str} bbb
;
}
2) В один тег можно вставлять сколько угодно констант:
function App() {
const str1 = 'text1';
const str2 = 'text2';
return
{str1} {str2}
;
}

3) Вставки констант также могут разделяться каким-либо текстом:
Нюансы
function App() {
const str1 = 'text1';
const str2 = 'text2';
return
{str1} eee {str2}
;
}

Внутри фигурных скобок можно не только вставлять переменные и константы, но и выполнять произвольный JavaScript код. Давайте, к примеру, в момент вставки найдем сумму двух констант:
Выполнение JavaScript
function App() {
const num1 = 1;
const num2 = 2;
return
{num1 + num2}
;
}

Можно выполнять вставку не только примитивов, но также массивов и объектов.
Вот пример с массивом:
Массивы и объекты
function App() {
const arr = [1, 2, 3];
return
{arr[0]}
{arr[1]}
{arr[2]}
;
}
Вот пример с объектом:
function App() {
const obj = {a: 1, b: 2, c: 3};
return
{obj.a}
{obj.b}
{obj.c}
;
}

Дан следующий код:
№1
function App() {
const str1 = 'text1';
const str2 = 'text1';
return
;
}
Вставьте первую константу в первый абзац, а вторую константу - во второй.

Дан следующий код:
№2
function App() {
const name = 'user';
const age = '30';
return
name: ?
age: ?
;
}
Вставьте константу с именем вместо первого знака ?, а константу с возрастом - вместо второго.

Напишите код, возвращающий num1 в степени num2:
№3
function App() {
const num1 = 3;
const num2 = 2;
return ?
}

Напишите код, возвращающий Имя и Фамилию человека, разделенные нижним подчеркиванием:
№4
function App() {
const name = 'john';
const surname = 'smit';
return ?
}

Напишите код, возвращающий корень из числа:
№5
function App() {
const num = 4;
return ?
}

Сделайте так, чтобы результатом рендеринга был тег ul, в тегах li которого будут стоять элементы массива.
№6
function App() {
const arr = [1, 2, 3, 4, 5];
return ?
}

Сделайте так, чтобы результатом рендеринга был следующий код:
№7
function App() {
const obj = {name: 'john', surname: 'smit’};
return ?
}
name:
john
,
surname:
smit
,
Для значений имени и фамилии используйте значения элементов объекта

Хранение тегов в JSX

В переменных и константах можно хранить теги, выполняя затем их вставку в нужное место.
Хранение тегов
function App() {
const str =
text
;
return
{str}
;
}
text
В результате рендеринга получится следующий код:

Учтите, что несколько тегов, хранящихся в константе, обязательно нужно обернуть в какой-то общий тег.
Несколько тегов в константах
function App() {
const str =
text1
text2
;
return
{str}
;
}
function App() {
const str = <>
text1
text2
;
return
{str}
;
}
Можно также использовать пустые теги:

Теги, записываемые в константы, не обязательно писать на одной строке. Можно сделать и так:
Теги не в одну строку
function App() {
const str = text
;
return
{str}
;
}
function App() {
const str =
text
;
return str;
}
Константы с тегами можно возвращать через return:

Вставку переменных и констант можно делать не только в тексты тегов, но и в атрибуты. При этом кавычки от атрибутов не ставятся:
Вставка в атрибуты тегов
function App() {
const str = 'elem';
return
text
;
}
text
Результатом работы этого кода будет следующее:

Напоминаю, что вместо атрибута class следует писать атрибут className:
Исключения
function App() { const str = 'elem';
return
text
;
}
function App() {
const str = 'elem';
return
text
;
}
А вместо атрибута for следует писать атрибут htmlFor:

Дан следующий код:
№1
function App() {
const li1 =
text1
;
const li2 =
text2
;
const li3 =
text3
;
}
Сделайте так, чтобы результатом рендеринга было следующее:
text1
text2
text3

Автор следующего кода хотел записать в константу несколько тегов li и вставить их в ul:
№2
function App() {
const items =
text1
text2
text3
;
return
{items}
}
Код, однако, не работает. Исправьте ошибку автора кода.

Некий программист написал следующий код:
№3
function App() {
const str1 = 'label'; const str2 = 'block';
const str3 = 'elem';
return
text
;
}
Код, однако, не работает. Исправьте ошибку автора кода.

Применение условий в JSX

Давайте сделаем так, чтобы в зависимости от содержимого константы show на экран вывелся или один, или другой текст:
Применение условий
function App() {
let text;
const show = true;
if (show) {
text = 'text1';
} else {
text = 'text2';
}
return
{text}
;
}

Можно сделать так, чтобы текст показывался, если в show будет true, и не показывался, если в ней будет false:
Только показ
function App() {
let text;
const show = true;
if (show) {
text =
text
;
}
return
{text}
;
}

Можно возвращать через return переменную, содержащую тег:
Возврат тегов
function App() {
let text;
const show = true;
if (show) {
text =
text1
;
} else {
text =
text2
;
}
return text;
}

Пусть в константе isAdult содержится true, если пользователю уже есть 18 лет, и false, если нет:
№1
function App() {
const isAdult = true;
}
Сделайте так, чтобы в зависимости от значения isAdult на экране показался или один абзац с текстом, или другой.

Пусть в константе isAdmin содержится true, если пользователь админ, и false, если нет:
№2
function App() {
const isAdmin = true;
}
Сделайте так, чтобы, если isAdmin имеет значение true, на экране показался див с абзацами. В противном случае ничего показывать не нужно.

Сокращенные условия в JSX

Как вы уже знаете, внутри фигурных скобок можно выполнять JavaScript код. На самом деле этот код может быть не любым, а только самым простым.
В частности, условия if там применять нельзя. Взамен следует пользоваться сокращенными вариантами условий. Давайте разберемся с ними.
Применение условий

Давайте в зависимости от значения константы show выведем один или другой текст. Используем для этого тернарный оператор:
Тернарный оператор
function App() {
const show = true;
return
{show ? 'text1' : 'text2'}
;
}

Можно работать не только с текстами, но и с тегами:
Тернарный оператор
function App() {
const show = true;
return
{show ?
text1
:
text2
}
;
}

Нам может понадобится выполнить вставку текста, если условие истинно, и ничего не делать, если ложно. Это делается с помощью оператора &&.
Давайте посмотрим его работу на примере. В следующем коде, если в show будет true, то вставиться абзац с текстом, а если будет false, то ничего не вставится:
Оператор &&
function App() {
const show = true;
return
{show &&
text
}
;
}

Может быть и обратная ситуация: нужно выполнить вставку текста, если условие ложно, и ничего не делать, если истинно. Для этого нужно выполнить инвертирования константы с помощью оператора !.
В следующем примере, если в hide будет false, то вставиться абзац с текстом:
Инвертирование
function App() {
const hide = false;
return
{!hide &&
text
}
;
}

Дан следующий код:
№1
function App() {
const age = 19;
return
;
}
Если в age записано больше 18 лет, то в тексте тега div покажите пользователю абзац с одним текстом, а если меньше - то с другим.
Не использовать if

Дан следующий код:
№2
function App() {
const isAuth = true;
return
вы авторизованы

Дан следующий код:
№3
function App() {
const isAuth = false;
return
пожалуйста, авторизуйтесь

Использование функций в React

Внутри основной функции компонента можно делать вспомогательные функции. К примеру, давайте с помощью вспомогательных функций найдем сумму степеней двух чисел и выведем ее в тексте тега:
Использование функций
function App() {
function square(num) {
return num ** 2;
}
function cube(num) {
return num ** 3;
}
const sum = square(3) + cube(4);
return
{sum}
}

Функции можно вызывать прямо в фигурных скобках:
Вызов функций внутри тегов
function App() {
function square(num) {
return num ** 2;
}
return
{square(3)}
}

В фигурных скобках можно также делать вызовы нескольких функций:
Вызов функций внутри тегов
function App() {
function square(num) {
return num ** 2;
}
function cube(num) {
return num ** 3;
}
return
{square(3) + cube(4)}
}

Сделайте функцию getDigitsSum, которая будет находить сумму цифр переданного числа. С ее помощью выведите на экран сумму цифр числа 123.
№1
Используя созданную вами функцию getDigitsSum выведите в абзац сумму цифр числа 12345.

События в JSX

Давайте теперь изучим работу с событиями на React. К примеру, сделаем так, чтобы по клику на блок выводился алерт с некоторым текстом.
Пусть у нас есть функция showMess, которая выводит алерт с сообщением, а в HTML коде есть кнопка, по клику на которую нам и хотелось бы видеть этот алерт:
Навешивание событий
function App() {
function showMess() {
alert('hello');
}
return
show
;
}

Давайте привяжем к нашей кнопке событие onclick так, чтобы по клику на этот див срабатывала функция showMess. Для этого нужно добавить атрибут onClick (именно в camelCase, то есть onClick, а не onclick), а в нем указать функцию, которая выполнится по этому событию:
Навешивание событий
function App() {
function showMess() {
alert('hello');
}
return
show
;
}

Пусть наша функция showMess параметром принимает имя того, с кем мы хотим поздороваться:
Параметры в функции
function showMess(name) {
alert('hello, ' + name);
}
Можно передать этот параметр при привязывании функции к событию. Для этого вызов нашей функции следует обернуть в стрелочную функцию:
function App() {
function showMess(name) {
alert('hello, ' + name);
}
return
showMess('user')}>show
;
}

Таким образом мы можем привязать одну и ту же функцию к нескольким кнопкам с разными параметрами:
Параметры в функции
function App() {
function showMess(text) {
alert(text);
}
return
showMess('user1')}>show1
showMess('user2')}>show2
;
}

Сделайте так, чтобы по клику на первую кнопку срабатывала первая функция, а по клику на вторую кнопку - вторая функция.
№1
function App() {
function show1() {
alert(1);
}
function show2() {
alert(2);
}
return
act1
act2
;
}

Сделайте так, чтобы по клику на первую кнопку алертом выводилось число 1, по клику на вторую кнопку - число 2, а по клику на третью - число 3.
№2
function App() {
return
act1
act2
act3
;
}

Объект Event в React

Внутри функции, привязанной к обработчику событий, доступен объект Event:
Объект Event
function App() {
function func(event) {
console.log(event); // объект с событием
}
return
act
;
}
В переменную event попадает не родной объект Event браузера, а специальная кроссбраузерная обертка над ним со стороны React. Эта обертка называется SyntheticEvent. Эта обертка помогает событиям работать одинаково во всех браузерах.

Дана кнопка. По клику на нее получите объект Event и выведите его в консоль.
№1

Дана кнопка. По клику на нее получите выведите в консоль event.target клика.
№2

Пусть у нас есть некоторая функция func, которую мы хотим использовать в качестве обработчика события. Пусть эта функция принимает некоторый параметр:
Event передача параметров
function func(arg) {
console.log(arg);
}
Давайте используем эту функцию в качестве обработчика, передав ей параметр:
function App() {
function func(arg) {
console.log(arg);
}
return
func('eee')}>act
;
}

Пусть теперь кроме параметра мы хотим получить в нашей функции объект Event. Для этого нам нужно поступить следующим образом:
Event передача параметров
function App() {
function func(arg, event) {
console.log(arg, event);
}
return
func('eee', event)}>act
;
}

Осознайте, как работает приведенный код, запустите у себя.
№3
function App() {
function func(arg, event) {
console.log(arg, event);
}
return
func('eee', event)}>act
;
}

Переделайте приведенный код так, чтобы функция принимала два параметра.
№4
function App() { function func(arg, event) {
console.log(arg, event);
}
return
func('eee', event)}>act
;
}

Модифицируйте предыдущую задачу так, чтобы объект с событием передавался первым параметром функции, а не последним.
№5

Модифицируйте предыдущую задачу так, чтобы объект с событием передавался вторым параметром функции, находясь между первым и третьим параметрами.
№6

Теги в массивах и циклах JSX

Пусть у нас в массиве хранятся теги:
Теги в массивах
function App() { const arr = [
1
,
2
,
3
];
}
Мы можем выполнить вставку содержимого нашей переменной с помощью фигурных скобок:
function App() {
const arr = [
1
,
2
,
3
];
return
{arr}
;
}

Массив с тегами можно создать в цикле:
Формирование в цикле
function App() { const arr = [];
for (let i = 0; i <= 9; i++) {
arr.push(
{i}
);
}
return
{arr}
;
}

Пусть у нас есть какой-нибудь массив с некими данными, например, вот такой:
Формирование из массива с данными
function App() {
const arr = [1, 2, 3, 4, 5];
}
Давайте положим каждый элемент этого массива в абзац и выведем эти абзацы в диве. Для этого мы можем воспользоваться любым удобным циклом JavaScript. Например, обычным for-of:
function App() {
const arr = [1, 2, 3, 4, 5];
const res = [];
for (const elem of arr) {
res.push(
{elem}
);
}
return
{res}
;
}

Однако, в React для таких дел более принято использовать цикл map:
Формирование из массива с данными
function App() {
const arr = [1, 2, 3, 4, 5];
const res = arr.map(function(item) {
return
{item}
;
});
return
{res}
;
}
Метод «arr.map(callback[, thisArg])» используется для трансформации массива.
Он создаёт новый массив, который будет состоять из результатов вызова callback(item, i, arr) для каждого элемента arr.

Дан массив:
№1
const arr = [
1
,
2
,
3
,
4
,
5
,
];
С помощью этого массива получите результатом рендеринга следующий код:
1
2
3
4
5

С помощью цикла for сформируйте следующий код:
№2
1
2
3
4
5

Дан массив:
№3
const arr = ['a', 'b', 'c', 'd', 'e'];
С помощью этого массива получите результатом рендеринга следующий код:
a
b
c
d
e

В предыдущем примере мы формировали наши абзацы в цикле, вот так:
Проблема с ключами
const res = arr.map(function(item) {
return
{item}
;
});
Это будет работать, однако, если заглянуть в консоль - мы увидим ошибку: Warning: Each child in an array or iterator should have a unique "key" prop. В данном случае React требует, чтобы каждому тегу из цикла мы дали уникальный номер, чтобы React было проще с этими тегами работать в дальнейшем.

Этот номер добавляется с помощью атрибута key. В данном случае в качестве номера мы можем взять номер элемента в массиве. В нашем случае этот номер хранится в переменной index и значит исправленная строка будет выглядеть вот так:
Проблема с ключами
function App() {
const arr = [1, 2, 3, 4, 5];
const res = arr.map(function(item, index) {
return
{item}
;
});
return
{res}
;
}

Проблема с ключами
Еще раз: этот атрибут key имеет служебное значение для React, более глубоко вы поймете этот момент в следующих уроках. Пока просто знайте: если вы видите такую ошибку - добавьте атрибут key с уникальным для каждого тега значением и проблема исчезнет.
Ключ key должен быть уникальным только внутри этого цикла, в другом цикле значения key могут совпадать со значениями из другого цикла.

Модифицируйте ваше решение предыдущей задачи в соответствии с описанным.
№4

Вывод массива объектов в JSX

Пусть у нас есть массив объектов с продуктами:
Вывод массива объектов
const prods = [
{name: 'product1', cost: 100},
{name: 'product2', cost: 200},
{name: 'product3', cost: 300},
];
Давайте выведем каждый продукт в своем абзаце:
function App() {
const res = prods.map(function(item) {
return
{item.name}
:
{item.cost}
;
});
return
{res}
;}

Не забудем добавить атрибут key:
Атрибут key
function App() {
const res = prods.map(function(item, index) {
return
{item.name}
:
{item.cost}
;
});
return
{res}
;
}

В компоненте App дан следующий массив:
№1
const users = [
{id: 1, name: 'user1', surn: 'surn1', age: 30},
{id: 2, name: 'user2', surn: 'surn2', age: 31},
{id: 3, name: 'user3', surn: 'surn3', age: 32},
];
Выведите элементы этого массива в виде списка ul.

В приведенном выше коде в атрибут key мы добавляли порядковый номер элемента в массиве. На самом деле такая практика является плохой и ей следует пользоваться лишь в крайнем случае.
Дело в том, что при сортировке массива у элементов станут другие ключи и React не сможет правильно отслеживать связь между элементами массива и соответствующими тегами.
Более хорошей практикой будет добавить каждому продукту уникальный идентификатор, который и будет использоваться в качестве ключа.
Давайте в нашем массиве каждому продукту добавим свойство id с номером нашего продукта:
Ключи через id
const prods = [
{id: 1, name: 'product1', cost: 100},
{id: 2, name: 'product2', cost: 200},
{id: 3, name: 'product3', cost: 300},
];

Теперь в качестве ключа используем этот id:
Ключи через id
function App() { const res = prods.map(function(item) {
return
{item.name}
:
{item.cost}
;
});
return
{res}
;
}

Модифицируйте предыдущую задачу, добавив в массив id и использовав их в качестве значений атрибута key.
№2

Вывод в таблицу

Пусть у нас опять дан наш массив с продуктами:
Вывод в таблицу
const prods = [
{name: 'product1', cost: 100},
{name: 'product2', cost: 200},
{name: 'product3', cost: 300},
];
Давайте выведем элементы нашего массива в виде HTML таблицы:
function App() {
const rows = prods.map(function(item) {
return
{item.name}
{item.cost}
;
});
return
{rows}
;}

Добавим заголовки колонок нашей таблице:
Вывод в таблицу
function App() {
const rows = prods.map(function(item) {
return
{item.name}
{item.cost}
;
});
return
{rows}
название
стоимость
;
}

Сделайте проект «Новостная лента», это сайт представляющий собой поток информации, как лента в «ВК», нужно сделать его, используя 5 компонент
Меню (для ссылок использовать объект как в прошлом дз)
Категории (правое меню, для пунктов использовать массив)
Основная лента (просто место, куда будут помещаться все посты), содержит в себе только компоненты «Пост»
Пост (отдельный компонент, с фоткой и текстом, будет заполнять собой ленту)
Подвал (копирайт и год)
Для образца – использовать ленту в ВК
№1

В компоненте App дан следующий массив:
№1
const users = [
{id: 1, name: 'user1', surn: 'surn1', age: 30},
{id: 2, name: 'user2', surn: 'surn2', age: 31},
{id: 3, name: 'user3', surn: 'surn3', age: 32},
];
Выведите элементы этого массива в виде таблицы table так, чтобы каждое поле объекта попало в свой тег td. Сделайте заголовки колонок вашей таблицы.

Обсуждение id для объектов

Как вы уже знаете, в массиве объектов должны присутствовать уникальные id. Давайте разберемся, откуда они берутся.
Массивы объектов могут иметь два происхождения: либо они присланы нам сервером, либо сгенерированы на клиенте (то есть в браузере).
Данные, присланные нам сервером, как правило хранились там в базе данных. Базы данных (БД) бывают вида SQL (например, mySQL, PostgreSQL) или NoSQL (например, MongoDB).
SQL базы данных, как правило имеют числовые id, автоматически расставляемые базой данных по возрастанию.
NoSQL базы данных, как правило, имеют id, представляющие собой случайные уникальные строки. Предполагается, что эти строки не имеют совпадений (коллизий) у двух элементов массива.
Уникальность id достигается за счет достаточно большой длины случайных строк - настолько больших, что вероятность совпадения двух строк будет близка в нулю.
При этом, чем больше данных в БД, тем больше вероятность коллизии. Задача программиста состоит в том, чтобы заранее прикинуть объем данных и определить оптимальную длину случайных строк, чтобы вероятность коллизий была минимальна (достаточно мала, чтобы считаться приемлемой).
id для объектов

Пусть из SQL базы данных нам пришел следующий массив объектов:
Проблемы с добавлением данных
const prods = [
{id: 1, name: 'product1', cost: 100},
{id: 2, name: 'product2', cost: 200},
{id: 3, name: 'product3', cost: 300},
];
Как вы видите, id нумеруются по порядку. Однако, нам следует учитывать, что числа могут иметь пропуски, к примеру, после 3-го может сразу идти 5-тый или 6-той. Из-за этого наш клиентский скрипт не может знать, какой будет следующий id (в нашем случае это не обязательно 4).
Новые id создаются базой данных сервера. Это может вызвать некоторые проблемы при работе на клиенте. Суть в следующем: представим, что с помощью формы мы добавили новый элемент в наш массив. Однако, мы не можем просто взять и добавить данные из формы - ведь мы не знаем какой id будет у нового элемента!
Нам нужно будет отправить запрос на сервер, чтобы он дал нам следующий по порядку id, и только затем добавить элемент в наш массив объектов. Это вызовет задержку с отображением данных на экране: пока данные придут на сервер, пока сервер пришлет нам их обратно - пройдет некоторое время.

Пусть теперь массив объектов имеет следующий вид:
Id в виде строк
const prods = [
{id: 'GYi9G_uC4gBF1e2SixDvu', name: 'product1', cost: 100},
{id: 'IWSpfBPSV3SXgRF87uO74', name: 'product2', cost: 200},
{id: 'JAmjRlfQT8rLTm5tG2m1L', name: 'product3', cost: 300},
];
Как вы видите, теперь наши id представляют собой случайные уникальные строки. Такой массив мог быть получен с NoSQL базы данных, либо просто сгенерирован на клиенте.
Опять представим себе ситуацию с добавлением в этот массив данных формы. В этом случае задержки не возникнет - при добавлении данных мы просто сгенерируем случайную строку, которая и будет новым id.

К счастью, нам не нужно самостоятельно придумывать код, генерирующий случайные id. К нашим услугам есть готовые библиотеки. Например, библиотека nanoid, генерирующая случайные строки, либо библиотека react-uuid, генерирующая UUID.
Генерация id
Так как используемая библиотека для генерации id может быть разная, далее в уроках я буду использовать следующую функцию-оболочку:
function id() {
// тут генерация id
}
Предполагается, что эта функция генерирует id удобным вам способом.

Мы можем использовать нашу функцию следующим образом при объявлении массива объектов:
Использование функции id()
const prods = [
{id: id(), name: 'product1', cost: 100},
{id: id(), name: 'product2', cost: 200},
{id: id(), name: 'product3', cost: 300},
];

Неправильно генерировать id прямо в атрибуте, вот так:
Неправильное использование id()
const res = prods.map(function(prod) {
return
{prod.name}
{prod.cost}
;
});
Причины этого будут вам понятны в следующих уроках. Пока просто имейте ввиду, что так делать неправильно и никогда так не делайте.

Установите и изучите обе библиотеки (nanoid, react-uuid). Сгенерируйте с их помощью случайные строки.
№1

Реализуйте функцию id() с помощью библиотеки nanoid.
Реализуйте функцию id() с помощью библиотеки react-uuid.
№2

Сделайте массив объектов с юзерами, сгенерировав им id с помощью нашей функции.
№3

Введение в стейты

Следующая концепция, которую мы с вами разберем, называется стейты. Стейты представляют собой реактивные переменные компонентов.
Реактивность означает, что при изменении стейта изменения произойдут во всех местах, где этот стейт используется. Технически это достигается путем перендерования всего компонента при изменении какого-либо стейта.
Введение в стейты

Преимущества
Манипулировать DOM (Document Object Model) вручную может быть сложно, трудоемко и чревато ошибками, в то время как использование состояний в React дает ряд преимуществ:
Абстракция: React абстрагируется от сложности манипулирования DOM, предоставляя декларативный синтаксис для создания и обновления компонентов. Это облегчает рассуждения о состоянии приложения и изменениях, которые необходимо внести.
Повторное отображение: Когда состояние компонента меняется, React автоматически перерисовывает компонент и обновляет представление компонента, чтобы отразить новое состояние. Это означает, что нам не нужно беспокоиться о ручном обновлении представления компонента или обработке событий и взаимодействий.
Виртуальный DOM: React использует виртуальное представление DOM, называемое Virtual DOM, которое оптимизирует обновление компонента, сравнивая состояние и параметры компонента до и после, а затем React обновляет только тот компонент, который изменился, тем самым повышая производительность компонента.
Производительность: Алгоритм виртуального DOM в React позволяет оптимизировать обновления и минимизировать количество необходимых манипуляций с DOM, что может помочь улучшить производительность приложения.

Начало работы
import { useState } from 'react';
Для использования стейтов для начала необходимо импортировать функцию useState:
Функция useState параметром принимает начальное значение стейта, а своим результатом возвращает специальный массив из двух элементов. В первом элементе массива будет хранится текущее значение стейта, а во втором - функция для изменения стейта.
Для корректной работы стейтов их нельзя менять напрямую, а следует пользоваться функцией для их изменения - только тогда будет работать реактивность.

Пример
import { useState } from 'react';
Воспользуемся функцией useState для создания стейта, содержащего название продукта:
В результате константа state будет представлять собой массив, в первом элементе которого будет хранится название продукта, а во втором - функция для изменения названия:
const state = useState('prod');
const name = state[0]; // Переменная состояния, сейчас - prod
const setName = state[1]; // Функция для изменения состояния

Пример
Для краткости обычно не используют промежуточную константу для массива, а используют деструктуризацию (да так можно):
Давайте теперь выведем наш стейт с именем продукта в какой-нибудь верстке:
return
{name}
;
const [name, setName] = useState('prod');

Пример
Соберем все вместе и получим следующий код:
import { useState } from 'react';
function App() {
const [name, setName] = useState('prod');
return
{name}
;
}
export default App
Если запустить этот код, то изначально в диве выведется начальное значение стейта, в нашем случае 'prod'. При изменение стейта через функцию setName и верстке автоматически появится новое значение стейта.

Попробуем реактивность
Сделаем кнопку, по нажатию на которую будет изменяться наш стейт:
return
{name}
btn
;
В обработчике клика используем функцию setName, чтобы установить продукту новое название:
function clickHandler() {
setName('xxxx');
}

Попробуем реактивность
Соберем весь наш код вместе. Получится, что после нажатия на кнопку текст в спане мгновенно поменяется на новое значение:
function App() {
let [name, setName] = useState('prod');
function clickHandler() {
setName('xxxx');
}
return
{name}
btn
;
}

Попробуем реактивность
Использование отдельных функций-обработчиков не обязательно. Можно использовать анонимную стрелочную функцию:
function App() {
let [name, setName] = useState('prod');
return
{name}
setName('xxxx')}>btn
;
}

Сделаем два стейта
Давайте сделаем один стейт для названия продукта, а второй - для цены и кнопки для изменения наших стейтов:
function App() {
let [name, setName] = useState('prod');
let [cost, setCost] = useState('1000');
function clickHandler1() {
setName('xxxx');
}
function clickHandler2() {
setCost('2000');
}
return
{name}
{cost}
btn1
btn2
;
}

Сделаем два стейта
Перепишем на сокращенный вариант:
function App() {
let [name, setName] = useState('prod');
let [cost, setCost] = useState('1000');
return
{name}
{cost}
setName('xxxx')}>btn1
setCost('2000')}>btn2
;
}

Логическое значение в стейте
Давайте сделаем стейт inCart, который будет показывать, в корзине продукт или нет:
function App() {
let [inCart, setInCart] = useState(false);
return
;
}
Пусть значение false значит, что продукт не в корзине, а значение true - что в корзине. Выведем информацию об этом с помощью тернарного оператора:
return
{inCart ? 'в корзине' : 'не в корзине'}
;

Логическое значение в стейте
А теперь сделаем кнопку, по нажатию на которую продукт добавится в корзину:
return
{inCart ? 'в корзине' : 'не в корзине'}
setInCart(true)}>btn
;
А как сделать так, чтобы первое нажатие добавляло товар в корзину, а второе убирало?

Логическое значение в стейте
Модифицируем наш код так, чтобы первое нажатие на кнопку добавляло в корзину, а второе - удаляло из нее:
function App() {
let [inCart, setInCart] = useState(false);
return
{inCart ? 'в корзине' : 'не в корзине'}
setInCart(!inCart)}>btn
;
}

Счетчик
Давайте сделаем счетчик кликов по кнопке:
function App() {
let [count, setCount] = useState(0);
function clickHandler() {
setCount(count + 1);
}
return
{count}
+
;
}
Как сделать сокращенный вариант?

Счетчик
Можно избавится от функции-обработчика, заменив ее анонимной стрелочной функцией:
function App() { let [count, setCount] = useState(0);
return
{count}
setCount(count + 1)}>+
;
}

1. Пусть вы хотите отображать на экране данные юзера: его имя, фамилию, возраст. Сделайте для этого соответствующие стейты с начальными значениями.
№1
2. Сделайте кнопки для изменения имени и фамилии.
3. Добавьте еще один стейт, который будет показывать, забанен пользователь или нет. Выведите информацию об этом в каком-нибудь теге.
4. Сделайте кнопку, нажатие на которую будет банить пользователя и кнопку, нажатие на которую будет разбанивать пользователя.

Модифицируйте предыдущую задачу так, чтобы из двух кнопок всегда была видна только соответствующая. То есть, если пользователь забанен, то видна кнопка для разбанивания, а если не забанен - для забанивания.
№2

Сделайте еще две кнопки. Пусть первая кнопка увеличивает возраст на единицу, а вторая - уменьшает его.
№3

Работа с инпутами

Работа с инпутами
Работа с инпутами в React происходит с помощью стейтов. Каждому инпуту назначается свой стейт, содержащий в себе value инпута.
Давайте посмотрим на примере. Пусть у нас есть инпут и стейт к нему, пока не связанные:
function App() {
const [value, setValue] = useState('text');
return
;
}

Работа с инпутами
Давайте к атрибуту value инпута привяжем нас стейт:
function App() {
const [value, setValue] = useState('text');
return
;
}
В таком случае получится, что при изменении стейта, реактивно поменяется и текст инпута.

Работа с инпутами
Это, однако, дает интересный побочный эффект: теперь при запуске кода в браузере в инпуте невозможно поменять текст! Почему: потому что при вводе текста в инпут не меняется стейт value, соответственно, и текст в инпуте не должен меняться.
Откройте консоль браузера - вы увидите в ней предупреждение React. Это предупреждение указывает нам, что мы привязали стейт к инпуту, но тем самым заблокировали инпут.

Работа с инпутами
Давайте сделаем так, чтобы в наш инпут можно было вводить текст. Для этого нужно сделать так, чтобы при вводе изменялся наш стейт на текущее значение инпута.
Для начала для этого нужно навесить на инпут событие onChange:
function App() {
const [value, setValue] = useState('text');
return
;
}
Данное событие в React ведет себя по-другому по сравнению с чистым JS. В React оно срабатывает сразу же по изменению инпута. То есть при вводе или удалении символа.

Работа с инпутами
Давайте теперь добавим обработчик нашего события. В этом обработчике мы должны прочитать текущий текст инпута и установить его в стейт с помощью функции setValue.
Проблема в том, что this данной функции не будет указывать на наш инпут - такова особенность React. Чтобы получить элемент, в котором случилось событие, нам необходимо использовать event.target:
function App() {
const [value, setValue] = useState('text');
function handleChange(event) {
console.log(event.target); // ссылка на DOM элемент инпута
}
return
;
}

Работа с инпутами
А теперь запишем текст инпута в наш стейт вытащив его из event.target.value:
function App() {
const [value, setValue] = useState('text');
function handleChange(event) {
setValue(event.target.value);
}
return
;
}

Работа с инпутами
Теперь мы сможем вводить текст в инпут. При этом стейт value всегда будет содержать текущий текст инпута.
Мы можем легко убедится в этом. Выведем содержимое нашего текста в абзац. В этом случае при вводе текста в инпут введенный текст будет автоматически появляться в абзаце:
function App() {
const [value, setValue] = useState('');
function handleChange(event) {
setValue(event.target.value);
}
return
text: {value}
;
}

Сокращаем
Можем переписать на более компактный вариант с анонимной стрелочной функцией:
function App() {
const [value, setValue] = useState('');
return
setValue(event.target.value)} />
text: {value}
;
}

Изменение данных при выводе
Пусть мы будем вводить в инпут число. Давайте сделаем так, чтобы по мере ввода числа в инпут в абзац выводился квадрат вводимого числа:
function App() {
const [value, setValue] = useState(0);
function handleChange(event) {
setValue(event.target.value);
}
return
{value ** 2}
;
}

Используем функцию
Не обязательно совершать некие операции над стейтом прямо на выводе. Можно воспользоваться функцией:
function square(num) {
return num ** 2;
}
function App() {
const [value, setValue] = useState(0);
function handleChange(event) {
setValue(event.target.value);
}
return
{square(value)}
;
}

Несколько инпутов
Пусть у нас есть два инпута, в которые будут вводится числа. Давайте сделаем так, чтобы по мере ввода в абзац выводилась сумма двух инпутов:
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
function handleChange1(event) {
setValue1(+event.target.value);
}
function handleChange2(event) {
setValue2(+event.target.value);
}
return
result: {value1 + value2}
}

Выводы
Таким образом, для работы любого инпута нам нужно следующее: создать стейт для этого инпута, привязать стейт к атрибуту value инпута, навесить событие onChange на инпут, в обработчике события менять стейт инпута на его текст.
Данные операции нужно будет проводить с каждым инпутом. То есть, если у вас два инпута, то у вас будет два стейта и две функции-обработчика события onChange.

Сделайте два инпута. Пусть текст первого инпута выводится в первый абзац, а текст второго инпута - во второй абзац.
№1

Дан инпут. Дан абзац. Сделайте так, чтобы при вводе текста в инпут, в абзаце выводилось количество введенных в инпут символов.
№2

Дан инпут и абзац. В инпут вводится возраст пользователя. Сделайте так, чтобы при наборе текста, в абзаце автоматически появлялся год рождения пользователя. (использовать функцию)
№3

Дан инпут и абзац. В инпут вводятся градусы Фаренгейта. Сделайте так, чтобы при наборе текста, в абзаце автоматически выполнялась конвертация в градусы Цельсия. (использовать функцию)
№4

Даны 5 инпутов. Сделайте так, чтобы при вводе чисел в наши инпуты в абзац выводилось среднее арифметическое введенных чисел.
№5

Обработка данных формы

Обработка данных формы
В предыдущем уроке мы делали так, чтобы при вводе символа в инпут в абзаце мгновенно появлялся результат. Это, конечно же, смотрится красиво, но имеет недостаток.
Представим себе, что нам нужно сделать некоторую "тяжелую", ресурсоемкую операцию. Не очень оптимально делать ее на каждый ввод символа - лучше дождаться окончательного ввода данных и потом выполнить нужную операцию один раз и результат вывести в абзац.
Для этого нам нужно ввести кнопку, по нажатию на которую будет совершаться наша ресурсоемкая операция. В таком случае у нас опять каждому инпуту будет соответствовать свой стейт, плюс еще один стейт нам нужен для записи результата операции и отображения его на экран.

Обработка данных формы
Посмотрим на примере. Пусть у нас есть два инпута и кнопка. По нажатию на кнопку давайте найдем сумму чисел, введенных в инпуты.
Реализуем сразу в сокращенном виде:
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [result, setResult] = useState(0);
return
setValue1(event.target.value)} />
setValue2(event.target.value)} />
setResult(Number(value1) + Number(value2))}>btn
result: {result}
;
}

Даны два инпута, две кнопки и абзац. Пусть в инпуты вводятся числа. По нажатию на первую кнопку найдите сумму чисел, а по нажатию на вторую кнопку - произведение. Результат выводите в абзац.
№1

Даны два инпута, кнопка и абзац. Пусть в инпуты вводятся даты в формате 31-12-2025. По нажатию на кнопку найдите разницу между датами в днях и результат выведите в абзац.
№2

Модифицируйте предыдущую задачу так, чтобы по умолчанию в инпутах стояла текущая дата.
№3

Работа с textarea

Работа с textarea
Давайте теперь научимся работать с многострочным полем ввода textarea. В React для удобства работа с ним сделана похожа на работу с текстовым инпутом. В отличие от чистого JS, в React в textarea не нужен закрывающий тег, а его текст следует размещать в атрибуте value.
function App() {
const [value, setValue] = useState('');
function handleChange(event) {
setValue(event.target.value);
}
return
<br> <p>{value}</p><br> </div>;<br>}<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide214" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 214</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-213.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Работа с textarea В сокращенной форме: function App() { const" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-213.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-213.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-213.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-213.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Работа с textarea<br><p>В сокращенной форме:<br><p>function App() {<br> const [value, setValue] =</div></h2><div class="slides-content">useState('');<br>return <div><br> <textarea value={value} onChange={event => setValue(event.target.value)} /><br> <p>{value}</p><br> </div>;<br>}<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide215" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 215</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-214.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Работа с чекбоксами" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-214.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-214.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-214.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-214.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Работа с чекбоксами<br></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide216" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 216</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-215.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Работа с чекбоксами Работа с чекбоксами также осуществляется по схожему" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-215.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-215.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-215.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-215.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Работа с чекбоксами<br><p>Работа с чекбоксами также осуществляется по схожему принципу, только</div></h2><div class="slides-content">вместо атрибута value мы указываем атрибут checked. Если в этот атрибут передать true - то чекбокс будет отмечен, а если false - не будет отмечен:<br><p>function App() {<br> return <div><br> <input type="checkbox" checked={true} /> отмечен<br> <input type="checkbox" checked={false} /> не отмечен<br> </div>;<br>}<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide217" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 217</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-216.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Работа с чекбоксами Обычно в атрибут checked передается стейт, содержащий" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-216.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-216.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-216.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-216.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Работа с чекбоксами<br><p>Обычно в атрибут checked передается стейт, содержащий логическое значение:<br><p>function</div></h2><div class="slides-content">App() {<br> const [checked, setChecked] = useState(true);<br>return <div><br> <input type="checkbox" checked={checked} /><br> </div>;<br>}<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide218" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 218</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-217.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Работа с чекбоксами Так же, как и при работе с" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-217.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-217.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-217.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-217.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Работа с чекбоксами<br><p>Так же, как и при работе с инпутами, если</div></h2><div class="slides-content">жестко задать значение атрибута checked - состояние чекбокса нельзя будет сменить. Для корректной работы будем по изменению чекбокса менять его стейт на противоположное ему значение:<br><p>function App() {<br> const [checked, setChecked] = useState(true);<br>return <div><br> <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} /><br> </div>;<br>}<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide219" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 219</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-218.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Работа с чекбоксами Давайте выведем состояние чекбокса в абзац, используя" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-218.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-218.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-218.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-218.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Работа с чекбоксами<br><p>Давайте выведем состояние чекбокса в абзац, используя тернарный оператор:<br><p>function</div></h2><div class="slides-content">App() {<br> const [checked, setChecked] = useState(true);<br>return <div><br> <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} /><br> <p>состояние: {checked ? 'отмечен' : 'не отмечен'}</p><br> </div>;<br>}<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide220" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 220</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-219.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Чекбоксы и условный рендеринг Давайте сделаем так, чтобы в зависимости" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-219.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-219.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-219.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-219.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Чекбоксы и условный рендеринг<br><p>Давайте сделаем так, чтобы в зависимости от отметки</div></h2><div class="slides-content">чекбокса, на экран выводился либо один кусочек кода, либо другой. Используем для этого условный рендеринг:<br><p>function App() {<br> const [checked, setChecked] = useState(true);<br>let message;<br> if (checked) {<br> message = <p>сообщение 1</p>;<br> } else {<br> message = <p>сообщение 2</p>;<br> }<br>return <div><br> <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} /><br> <div>{message}</div><br> </div>;<br>}<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide221" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 221</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-220.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Дан чекбокс, кнопка и абзац. По клику на кнопку, если" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-220.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-220.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-220.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-220.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Дан чекбокс, кнопка и абзац. По клику на кнопку, если чекбокс</div></h2><div class="slides-content">отмечен, выведите в абзац текст приветствия с пользователем, а если не отмечен - текст прощания.<br><p>№1<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide222" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 222</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-221.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="С помощью трех чекбоксов попросите пользователя выбрать языки, которые он" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-221.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-221.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-221.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-221.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>С помощью трех чекбоксов попросите пользователя выбрать языки, которые он знает:</div></h2><div class="slides-content">html, css и js. Результат выбора по каждому языку выводите в отдельные абзацы.<br><p>№2<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide223" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 223</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-222.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Дан чекбокс. С помощью чекбокса спросите у пользователя, если ли" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-222.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-222.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-222.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-222.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Дан чекбокс. С помощью чекбокса спросите у пользователя, если ли ему</div></h2><div class="slides-content">уже 18 лет. Если чекбокс отмечен, покажите пользователю следующий блок кода:<br><p>№3<br><p><div><br> <h2>Ура, вам уже есть 18</h2><br> здесь расположен контент только для взрослых<br> </p><br></div><br><p>А если чекбокс не отмечен - то следующий:<br><p><div><br> увы, вам еще нет 18 лет:(<br> </p><br></div><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide224" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 224</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-223.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Дан чекбокс и абзац. Если чекбокс отмечен, пусть абзац будет" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-223.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-223.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-223.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-223.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Дан чекбокс и абзац. Если чекбокс отмечен, пусть абзац будет видимым</div></h2><div class="slides-content">на экране, а если не отмечен - спрячьте его.<br><p>№4<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide225" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 225</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-224.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Работа с селектами" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-224.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-224.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-224.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-224.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Работа с селектами<br></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide226" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 226</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-225.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Работа с селектами Давайте теперь займемся выпадающими списками select. Работа" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-225.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-225.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-225.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-225.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Работа с селектами<br><p>Давайте теперь займемся выпадающими списками select. Работа с ними</div></h2><div class="slides-content">также практически не отличается от работы с инпутами и чекбоксами.<br>Пусть у нас есть вот такой селект:<br><p>function App() {<br> return <div><br> <select><br> <option>text1</option><br> <option>text2</option><br> <option>text3</option><br> <option>text4</option><br> </select><br> </div>;<br>}<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide227" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 227</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-226.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Работа с селектами Давайте обеспечим его работу средствами React: function" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-226.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-226.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-226.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-226.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Работа с селектами<br><p>Давайте обеспечим его работу средствами React:<br><p>function App() {<br> const</div></h2><div class="slides-content">[value, setValue] = useState('');<br>function handleChange(event) {<br> setValue(event.target.value);<br> }<br>return <div><br> <select value={value} onChange={handleChange}><br> <option>text1</option><br> <option>text2</option><br> <option>text3</option><br> <option>text4</option><br> </select><br> ваш выбор: {value}<br> </p><br> </div>;<br>}<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide228" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 228</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-227.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Атрибуты value Пусть теперь у нас в тегах option есть" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-227.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-227.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-227.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-227.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Атрибуты value<br><p>Пусть теперь у нас в тегах option есть атрибуты value:<br><p>function</div></h2><div class="slides-content">App() {<br> return <div><br> <select><br> <option value="1">text1</option><br> <option value="2">text2</option><br> <option value="3">text3</option><br> </select><br> </div>;<br>}<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide229" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 229</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-228.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Атрибуты value В таком случае из-за наличия атрибутов value в" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-228.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-228.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-228.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-228.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Атрибуты value<br><p>В таком случае из-за наличия атрибутов value в стейт будут</div></h2><div class="slides-content">попадать именно их значения, а не тексты тегов option. Можно убедится в этом, выведя результат выбора в абзац:<br><p>function App() {<br> const [value, setValue] = useState('');<br>return <div><br> <select value={value} onChange={(event) => setValue(event.target.value)}><br> <option value="1">text1</option><br> <option value="2">text2</option><br> <option value="3">text3</option><br> </select><br> ваш выбор: {value}<br> </p><br> </div>;<br>}<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide230" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 230</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-229.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Атрибуты value Разделить текст option и его значение может быть" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-229.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-229.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-229.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-229.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Атрибуты value<br><p>Разделить текст option и его значение может быть удобно: текст</div></h2><div class="slides-content">тега мы можем менять как нам угодно, при этом в нашем скрипте результат выбора будет обрабатываться по значению атрибута value, которые останется неизменным.<br><p>function App() {<br> const [value, setValue] = useState('');<br>return <div><br> <select value={value} onChange={event => setValue(event.target.value)}><br> <option value="1">text1</option><br> <option value="2">text2</option><br> <option value="3">text3</option><br> </select><br> {value === '1' && 'вы выбрали первый пункт'}<br> {value === '2' && 'вы выбрали второй пункт'}<br> </p><br> </div>;}<br><p>Теперь, если мы изменим тексты option, то работа скрипта не нарушится - ведь она привязана к значению атрибута value.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide231" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 231</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-230.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Сделайте выпадающий список городов. Сделайте также абзац, в который будет выводиться выбор пользователя. №1" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-230.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-230.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-230.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-230.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Сделайте выпадающий список городов. Сделайте также абзац, в который будет выводиться</div></h2><div class="slides-content">выбор пользователя.<br><p>№1<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide232" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 232</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-231.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="С помощью выпадающего списка предложите пользователю выбрать к какой возрастной" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-231.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-231.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-231.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-231.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>С помощью выпадающего списка предложите пользователю выбрать к какой возрастной группе</div></h2><div class="slides-content">он относится: от 0 до 12 лет, от 13 до 17, от 18 до 25, либо старше 25 лет.<br>В зависимости от выбранной группы вывести на страницу: Младшая группа, Средняя группа, Взрослая группа, Пожилая группа.<br><p>№2<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide233" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 233</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-232.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Работа с radio" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-232.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-232.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-232.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-232.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Работа с radio<br></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide234" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 234</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-233.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Работа с radio Работа с радиокнопочками radio несколько отличается, к" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-233.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-233.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-233.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-233.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Работа с radio<br><p>Работа с радиокнопочками radio несколько отличается, к примеру, от</div></h2><div class="slides-content">тех же чекбоксов. Проблема в том, что у нескольких радио будет один и тот же стейт, но разные value.<br>Поэтому работа происходит следующем образом: каждой радиокнопке в атрибут value записывают свое значение, а в атрибут checked - специальное условие, которое проверяет, равен ли стейт определенному значению. Если равен - радиокнопочка станет отмеченной, а если не равен - будет не отмеченной.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide235" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 235</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-234.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Работа с radio Вот реализация описанного: function App() { const" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-234.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-234.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-234.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-234.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Работа с radio<br><p>Вот реализация описанного:<br><p>function App() {<br> const [value, setValue] =</div></h2><div class="slides-content">useState(1);<br>function changeHandler(event) {<br> setValue(event.target.value);<br> }<br>return <div><br> <input type="radio" name="radio" value="1"<br> checked={value === '1' ? true : false}<br> onChange={changeHandler}<br> /><br> <input type="radio" name="radio" value="2"<br> checked={value === '2' ? true : false}<br> onChange={changeHandler}<br> /><br> <input type="radio" name="radio" value="3"<br> checked={value === '3' ? true : false}<br> onChange={changeHandler}<br> /><br> </div><br>}<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide236" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 236</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-235.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Даны 3 радиокнопки. Дан абзац. Сделайте так, чтобы значение выбранной радиокнопки выводилось в этот абзац. №1" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-235.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-235.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-235.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-235.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Даны 3 радиокнопки. Дан абзац. Сделайте так, чтобы значение выбранной радиокнопки</div></h2><div class="slides-content">выводилось в этот абзац.<br><p>№1<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide237" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 237</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-236.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="С помощью радиокнопок спросите у пользователя его любимый язык программирования." loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-236.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-236.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-236.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-236.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>С помощью радиокнопок спросите у пользователя его любимый язык программирования. Выведите</div></h2><div class="slides-content">его выбор в абзац. Если выбран язык JavaScript, похвалите пользователя.<br><p>№2<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide238" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 238</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-237.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Практика со стейтами" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-237.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-237.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-237.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-237.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Практика со стейтами<br></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide239" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 239</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-238.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Практика со стейтами Создайте простой компонент переключателя, который отображает кнопку" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-238.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-238.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-238.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-238.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Практика со стейтами<br><p>Создайте простой компонент переключателя, который отображает кнопку и сообщение.</div></h2><div class="slides-content">При нажатии на кнопку сообщение должно измениться с "включено" на "выключено" и наоборот. Сообщение должно выводиться разными цветами. Используйте state для отслеживания текущего состояния.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide240" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 240</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-239.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Практика со стейтами Создайте простой компонент смены темы, который позволяет" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-239.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-239.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-239.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-239.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Практика со стейтами<br><p>Создайте простой компонент смены темы, который позволяет пользователям включать</div></h2><div class="slides-content">и выключать светлую тему. Используйте state для отслеживания текущего состояния темы.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide241" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 241</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-240.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Практика со стейтами Создайте простой компонент светофора, который отображает текущее" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-240.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-240.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-240.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-240.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Практика со стейтами<br><p>Создайте простой компонент светофора, который отображает текущее состояние светофора</div></h2><div class="slides-content">с помощью state и переключается по кнопке.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide242" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 242</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-241.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Практика со стейтами Создайте простой компонент калькулятора, который позволяет пользователям" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578877/slide-241.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578877/slide-241.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578877/slide-241.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578877/slide-241.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Практика со стейтами<br><p>Создайте простой компонент калькулятора, который позволяет пользователям выполнять основные</div></h2><div class="slides-content">арифметические операции с использованием состояния.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><!----></div><!--]--></div><div class="section"><div></div></div><form id="download" action="/api/" method="post" class="download"><!----><div class="download-description"> Имя файла: Язык-программирования-JavaScript.pptx <br> Количество просмотров: 13 <br> Количество скачиваний: 0</div><button class="download-btn" type="submit">Скачать</button><!----></form><div class="navigation"><div class="navigation-item"><div>- Предыдущая</div><a href="/informatika/proektirovanie-i-realizatsiya-dizayn-maketa-kinoteatra" class="navigation-link">Проектирование и реализация дизайн-макета кинотеатра</a></div><div class="navigation-item"><div>Следующая -</div><a href="/yurisprudentsiya/mezhdunarodno-pravovaya-ohrana-intellektualnoy-sobstvennosti-tema" class="navigation-link">Международно- правовая охрана интеллектуальной собственности (тема 6)</a></div></div></div></div><div class="item-layoutRelated"><div class="section"><div></div></div></div></div><div class="item-layout"><div class="related"><h2 class="related-header">Похожие презентации</h2><div class="related-wrapper"><!--[--><div class="related-item"><a href="/informatika/standartnye-funktsii-sortirovka-dannyh-v-excel" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/213898/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/213898/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/213898/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/213898/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/213898/slide-0.jpg 1440w" class="slides-image related-itemImage"> Стандартные функции. Сортировка данных в Excel</a></div><div class="related-item"><a href="/informatika/programma-virtualbox" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/327590/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/327590/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/327590/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/327590/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/327590/slide-0.jpg 1440w" class="slides-image related-itemImage"> Программа VirtualBox</a></div><div class="related-item"><a href="/informatika/mkrokontrolerna-sistema-tsifrovo-dentifkats-personalu-dlya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/206108/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/206108/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/206108/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/206108/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/206108/slide-0.jpg 1440w" class="slides-image related-itemImage"> Мікроконтролерна система цифрової ідентифікації персоналу для ЧДУ ім. П. Могили</a></div><div class="related-item"><a href="/informatika/kurs-veb-razrabotka-redaktiruemaya-glavnaya-stranitsa" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/579779/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/579779/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/579779/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/579779/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/579779/slide-0.jpg 1440w" class="slides-image related-itemImage"> Курс веб-разработка. Редактируемая главная страница</a></div><div class="related-item"><a href="/informatika/massivy-odnomernye-massivy-tselyh-chisel" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/302598/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/302598/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/302598/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/302598/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/302598/slide-0.jpg 1440w" class="slides-image related-itemImage"> Массивы. Одномерные массивы целых чисел</a></div><div class="related-item"><a href="/informatika/operatsionnaya-sistema-windows-86" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/101391/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/101391/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/101391/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/101391/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/101391/slide-0.jpg 1440w" class="slides-image related-itemImage"> Операционная система Windows</a></div><div class="related-item"><a href="/informatika/elektrondy-kestede-formula-funktsiyalardy-oldanu" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/205505/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/205505/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/205505/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/205505/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/205505/slide-0.jpg 1440w" class="slides-image related-itemImage"> Электрондық кестеде формула, функцияларды қолдану</a></div><div class="related-item"><a href="/informatika/oblasti-deystviya-identifikatorov" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/189381/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/189381/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/189381/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/189381/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/189381/slide-0.jpg 1440w" class="slides-image related-itemImage"> Области действия идентификаторов</a></div><div class="related-item"><a href="/informatika/podhody-k-ponyatiyu-informatsii-i-izmereniyu-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/116919/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/116919/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/116919/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/116919/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/116919/slide-0.jpg 1440w" class="slides-image related-itemImage"> Подходы к понятию информации и измерению информации. Информационные объекты различных видов</a></div><div class="related-item"><a href="/informatika/animatsiya-van-gog" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/262554/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/262554/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/262554/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/262554/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/262554/slide-0.jpg 1440w" class="slides-image related-itemImage"> Анимация. Ван Гог</a></div><div class="related-item"><a href="/informatika/microinvest-sklad-pro-ustanovka-servera-ms" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/378433/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/378433/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/378433/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/378433/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/378433/slide-0.jpg 1440w" class="slides-image related-itemImage"> Microinvest Склад Pro. Установка сервера MS SQL 2008R2 Express</a></div><div class="related-item"><a href="/informatika/paradigmy-programmirovaniya-kontseptsii-oop" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/607558/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/607558/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/607558/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/607558/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/607558/slide-0.jpg 1440w" class="slides-image related-itemImage"> Парадигмы программирования. Концепции ООП</a></div><div class="related-item"><a href="/informatika/prototip-ais-putevka-registratsiya-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/239867/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/239867/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/239867/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/239867/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/239867/slide-0.jpg 1440w" class="slides-image related-itemImage"> Прототип АИС Путевка. Регистрация</a></div><div class="related-item"><a href="/informatika/rozpznavannya-zagaln-algoritmi-navchannya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580565/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/580565/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/580565/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/580565/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580565/slide-0.jpg 1440w" class="slides-image related-itemImage"> Розпізнавання. Загальні алгоритми навчання</a></div><div class="related-item"><a href="/informatika/avtomatizovane-rozroblennya-veb-saytv-oglyad-servsv" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/7585/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/7585/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/7585/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/7585/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/7585/slide-0.jpg 1440w" class="slides-image related-itemImage"> Автоматизоване розроблення веб-сайтів. Огляд сервісів Веб 2.0</a></div><div class="related-item"><a href="/informatika/rest-api-2" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578060/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578060/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578060/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578060/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578060/slide-0.jpg 1440w" class="slides-image related-itemImage"> Rest API 2</a></div><div class="related-item"><a href="/informatika/obzor-prikladnyh-statisticheskih-programm-dlya-resheniya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/249018/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/249018/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/249018/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/249018/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/249018/slide-0.jpg 1440w" class="slides-image related-itemImage"> Обзор прикладных статистических программ для решения задач социологического исследования. Лекция 1-2</a></div><div class="related-item"><a href="/informatika/o-biznes-vozmozhnostyah-mezhdunarodnyy-internet-magazin" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/236306/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/236306/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/236306/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/236306/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/236306/slide-0.jpg 1440w" class="slides-image related-itemImage"> О бизнес возможностях. Международный Интернет-магазин слитков Золота</a></div><div class="related-item"><a href="/informatika/izmerenie-informatsii-edinitsy-izmereniya-informatsii" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/225870/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/225870/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/225870/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/225870/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/225870/slide-0.jpg 1440w" class="slides-image related-itemImage"> Измерение информации. Единицы измерения информации</a></div><div class="related-item"><a href="/informatika/animatsiya-v-power-point" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/239518/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/239518/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/239518/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/239518/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/239518/slide-0.jpg 1440w" class="slides-image related-itemImage"> Анимация в Power Point</a></div><div class="related-item"><a href="/informatika/tehnologii-postroeniya-lokalnyh-kompyuternyh-setey" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/145620/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/145620/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/145620/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/145620/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/145620/slide-0.jpg 1440w" class="slides-image related-itemImage"> Технологии построения локальных компьютерных сетей</a></div><div class="related-item"><a href="/informatika/odnomernye-massivy-v-pomoshch-sdayushchemu-ege" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164207/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/164207/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/164207/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/164207/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164207/slide-0.jpg 1440w" class="slides-image related-itemImage"> Одномерные массивы. В помощь сдающему ЕГЭ</a></div><div class="related-item"><a href="/informatika/podprogrammy-yazyk-c-lektsiya-7" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/169874/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/169874/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/169874/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/169874/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/169874/slide-0.jpg 1440w" class="slides-image related-itemImage"> Подпрограммы (язык C, лекция 7)</a></div><div class="related-item"><a href="/informatika/dvovimrn-masivi" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/202976/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/202976/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/202976/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/202976/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/202976/slide-0.jpg 1440w" class="slides-image related-itemImage"> Двовимірні масиви</a></div><div class="related-item"><a href="/informatika/shifrovanie-i-deshifrovanie-matritsy-s-ispolzovaniem" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/346044/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/346044/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/346044/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/346044/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/346044/slide-0.jpg 1440w" class="slides-image related-itemImage"> Шифрование и дешифрование матрицы с использованием ключа</a></div><div class="related-item"><a href="/informatika/proektirovanie-asu-tp-printsipy-proektirovaniya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/335664/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/335664/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/335664/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/335664/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/335664/slide-0.jpg 1440w" class="slides-image related-itemImage"> Проектирование АСУ ТП . Принципы проектирования</a></div><div class="related-item"><a href="/informatika/posters-npe" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/20940/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/20940/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/20940/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/20940/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/20940/slide-0.jpg 1440w" class="slides-image related-itemImage"> Posters NPE</a></div><div class="related-item"><a href="/informatika/multiprogramuvannya-na-osnov-pererivan-sistemn-vikliki" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/281893/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/281893/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/281893/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/281893/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/281893/slide-0.jpg 1440w" class="slides-image related-itemImage"> Мультипрограмування на основі переривань. Системні виклики. Лекція 2.2</a></div><!--]--></div></div></div></div><!--]--><!--]--><!--]--></div></div></main><footer class="footer"><div class="layout"><!----><div class="footer-contacts"><svg class="footer-contactsIcon" viewBox="0 0 27 26" xmlns="http://www.w3.org/2000/svg"><use xlink:href="/images/icons.svg#contacts"></use></svg> Обратная связь</div><!----><div class="footer-contactsEmail"> Email: <span class="footer-contactsShow">Нажмите что бы посмотреть</span></div></div></footer></div><!--]--></div><script>window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R){return {data:{meta:{result:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F}},categories:{result:[{id:G,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:G,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:H,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:j,name:"Литература",pseudoname:"literatura"},{id:119,ordering:k,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:I,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]},item:{result:{id:578877,name:m,category:H,count:243,jpg:"jpg\u002F578877",hits:I,download:b,h1:"Язык программирования JavaScript презентация",meta:{h1:m,title:m,description:"Язык программирования JavaScript презентация на тему, доклад, Информатика",keywords:"Язык программирования JavaScript, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Язык программирования JavaScript из раздела Информатика. Презентация на заданную тему содержит 243 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:a,file:"Язык-программирования-JavaScript.pptx",texts:["\u003Cp\u003EReact JS\u003Cbr\u003E","\u003Cp\u003EФреймворки и библиотеки\u003Cbr\u003E","\u003Cp\u003EЯзык программирования JavaScript широко используется как во фронтенде, так и в бэкенде. Не удивительно, что в его экосистеме есть множество библиотек, с помощью которых можно легко и быстро создавать самые разные сайты.\u003Cbr\u003EСреда JavaScript стала огромной. Она имеет собственную экосистему библиотек, фреймворков, инструментов, менеджеров пакетов и новых языков, которые компилируются в JavaScript.\u003Cbr\u003E","\u003Cp\u003EБиблиотека JavaScript — это набор готовых функций и \u002F или классов, созданных с использованием языка программирования JS.\u003Cbr\u003EИмея специальную библиотеку JavaScript, разработчик может использовать уже созданные и протестированные сценарии для создания приложения, точно так же, как строители используют кирпичи для строительства дома. Более того, такие готовые скрипты можно использовать как самостоятельные элементы или стать частью более сложных функций.\u003Cbr\u003EВ настоящее время существует множество JS-библиотек, которые можно разделить на:\u003Cbr\u003Eмасштабные базы данных со всеми распространенными виджетами, аббревиатурами и полифилами;\u003Cbr\u003Eузкоспециализированные базы данных для выполнения конкретных задач, таких как создание диаграмм, анимаций, математических функций и т. д.\u003Cbr\u003E","\u003Cp\u003EСамые популярные библиотеки и фреймворки\u003Cbr\u003E\u003Cp\u003EReact — это декларативная, эффективная и гибкая JavaScript-библиотека для создания пользовательских интерфейсов. Она позволяет вам собирать сложный UI из маленьких изолированных кусочков кода, называемых «компонентами».\u003Cbr\u003EjQuery - это библиотека, которая сделала JavaScript более доступным а DOM-манипуляцией проще, чем раньше.\u003Cbr\u003EAngularJS - одна из самых мощных сред JavaScript. Google использует эту платформу для разработки одностраничного приложения (SPA), предоставляет разработчикам лучшие условия для объединения JavaScript с HTML и CSS.\u003Cbr\u003EVue.js - это легкий JavaScript фреймворк, который предлагает опыт, похожий на React, с его виртуальными DOM и компонентами повторного использования, которые можно использовать для создания как виджетов, так и целых веб-приложений.\u003Cbr\u003E","\u003Cp\u003EReact\u003Cbr\u003E","\u003Cp\u003EReact - это библиотека JavaScript, созданная разработчиками Facebook и Instagram. Согласно опросу Stack Overflow Survey 2017, React был признан самой популярной технологией среди разработчиков. React также имеет честь быть самым популярным проектом JavaScript, согласно количеству звезд на GitHub.\u003Cbr\u003EReact — это декларативная, эффективная и гибкая JavaScript-библиотека для создания пользовательских интерфейсов. Она позволяет вам собирать сложный UI из маленьких изолированных кусочков кода, называемых «компонентами».\u003Cbr\u003EReact использует виртуальную модель DOM, так что вам не нужно беспокоиться о прямом манипулировании с DOM. Другие примечательные особенности React включают однонаправленный поток данных, дополнительный синтаксис JSX и инструмент командной строки для создания проекта React с нуля.\u003Cbr\u003E\u003Cp\u003EReact\u003Cbr\u003E","\u003Cp\u003EReact используется во множестве веб-приложений:\u003Cbr\u003EFacebook\u003Cbr\u003EInstagram\u003Cbr\u003ENetflix\u003Cbr\u003ENew York Times\u003Cbr\u003EWhatsApp\u003Cbr\u003EDropbox\u003Cbr\u003EЯндекс\u003Cbr\u003EСбер\u003Cbr\u003EАвито\u003Cbr\u003EИ многие другие…\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003EГде используется?\u003Cbr\u003E","\u003Cp\u003EReact Native — это кроссплатформенный фреймворк с открытым исходным кодом для разработки нативных мобильных и настольных приложений на JavaScript, его используют:\u003Cbr\u003EPinterest\u003Cbr\u003ESkype\u003Cbr\u003EDiscord\u003Cbr\u003ETesla\u003Cbr\u003EInstagram\u003Cbr\u003EAirbnb\u003Cbr\u003ESoundCloud\u003Cbr\u003EMicrosoft OneDrive\u003Cbr\u003EИ многие другие…\u003Cbr\u003E\u003Cp\u003EГде используется?\u003Cbr\u003E","\u003Cp\u003Eдля создания функциональных интерактивных веб-интерфейсов, работая с которыми, не нужно постоянно обновлять страницу;\u003Cbr\u003Eбыстрой и удобной реализации отдельных компонентов и страниц целиком — элементы в React легко использовать повторно;\u003Cbr\u003Eлегкой разработки сложных программных структур — их просто описывать, если использовать реализованный в React подход;\u003Cbr\u003Eдоработки новой функциональности интерфейса с любым изначальным стеком технологий: фреймворк не зависит от остального инструментария и будет хорошо работать, на чем бы ни был написан код;\u003Cbr\u003Eразработки одностраничных и многостраничных приложений (SPA и PWA). Это сайты, которые функционируют как программы и веб-сервисы и имеют соответствующий интерфейс;\u003Cbr\u003Eработы с серверной частью сайта или разработки интерфейсов мобильных приложений. В таких случаях React используют совместно с инструментами, адаптирующими веб-технологии под другие цели.\u003Cbr\u003E\u003Cp\u003EДля чего нужен React\u003Cbr\u003E","\u003Cp\u003EReact + и -\u003Cbr\u003E","\u003Cp\u003EПопулярность - Это один из трех самых распространенных фреймворков для фронтенд-разработки. Кроме него, популярны Vue.js и Angular, но первый пока не так распространен, а второй намного сложнее в изучении. Еще одна популярная технология — jQuery, но она постепенно уходит в прошлое. \u003Cbr\u003EОгромное сообщество\u003Cbr\u003EРазвитая экосистема\u003Cbr\u003EПростота создания интерфейса\u003Cbr\u003EРеактивность - Фреймворк реагирует на обновление компонента и автоматически отображает его изменения в дереве документа.\u003Cbr\u003EВысокая скорость работы\u003Cbr\u003E\u003Cp\u003EПреимущества React\u003Cbr\u003E","\u003Cp\u003EЗапутанность синтаксиса - Технология JSX удобная и широко используется, но сначала она может вызвать сложности в изучении.\u003Cbr\u003EТрудности с SEO-оптимизацией (SEO — это поисковая оптимизация, проработка сайта таким образом, чтобы он соответствовал требованиям поисковых систем.)\u003Cbr\u003EСвоеобразная архитектура проекта\u003Cbr\u003E\u003Cp\u003EНедостатки React\u003Cbr\u003E","\u003Cp\u003EОсобенности React\u003Cbr\u003E","\u003Cp\u003EДекларативный стиль означает, что разработчику достаточно один раз описать, как будут выглядеть результаты работы кода — элементы в разных состояниях. Ему не нужно фокусироваться на способах достижения результатов: большую часть работы выполнит фреймворк. React будет автоматически обновлять состояние элементов в зависимости от условий, главная задача — грамотно описать эти состояния. Удобный и понятный подход облегчает написание и отладку кода.\u003Cbr\u003E\u003Cp\u003EДекларативность\u003Cbr\u003E","\u003Cp\u003EЛюбой веб-интерфейс основан на HTML-документе и CSS-стилях, к которым подключен код на JavaScript. Структура HTML-документа, точнее его модель, называется DOM-деревом (DOM расшифровывается как Document Object Mode, объектная модель документа). Это древовидная модель, в которой в иерархическом виде собраны все используемые на странице элементы.\u003Cbr\u003EОсобенность React в том, что он создает и хранит в кэше виртуальное DOM-дерево — копию DOM, которая изменяется быстрее, чем реальная структура. Это нужно для того, чтобы быстро обновлять состояние страницы. Если пользователь выполнит действие или наступит какое-либо событие, DOM должна измениться, так как изменятся объекты на странице. Но реальная объектная модель может быть огромной, ее обновление — медленный процесс. Поэтому React работает не с ней, а с виртуальной копией в кэше, которая весит меньше.\u003Cbr\u003E\u003Cp\u003EВиртуальное DOM-дерево\u003Cbr\u003E","\u003Cp\u003EЧтобы улучшить быстродействие, React обновляет DOM не полностью. Он хранит в памяти две облегченных копии: актуальную и предыдущую. Когда что-то обновляется, фреймворк сравнивает версии между собой и изменяет только ту часть дерева, которая действительно поменялась. Это нужно, чтобы не перезагружать DOM целиком и не замедлять работу страницы. Подход кажется сложным, но он важен для оптимизации загрузки.\u003Cbr\u003E\u003Cp\u003EОбновление DOM по частям\u003Cbr\u003E","\u003Cp\u003EReact основан на компонентах — отдельных элементах веб-интерфейса. Компоненты инкапсулированы, то есть самостоятельны: в каждом из них размещены все методы и данные, необходимые для работы.\u003Cbr\u003EИнкапсулированные самостоятельные компоненты можно использовать повторно, размещать в другом месте кода, в ином разделе или на другой странице. Данные можно переносить по всему приложению, использовать вне DOM конкретной страницы. Это ускоряет разработку и сокращает количество действий для создания функционирующего интерфейса. Благодаря отсутствию сложных зависимостей инкапсуляция также облегчает отладку.\u003Cbr\u003E\u003Cp\u003EВозможность повторно использовать компоненты\u003Cbr\u003E","\u003Cp\u003EКомпоненты могут передавать свойства и данные друг другу, но только в одном направлении — от «родительских» к дочерним. Это помогает реализовать четкую иерархию, облегчает отладку. Однонаправленный поток данных означает, что программист всегда может понять, откуда именно к элементу поступили данные.\u003Cbr\u003E\u003Cp\u003EНисходящий поток данных\u003Cbr\u003E","\u003Cp\u003EJSX расшифровывается как JavaScript XML. Это расширение языка JavaScript, которое помогает описывать HTML-подобные элементы с помощью кода на React. С помощью синтаксиса разработчики на React создают компоненты страницы и гибко управляют ими.\u003Cbr\u003EНесмотря на то что элементы похожи на HTML, это по-прежнему JavaScript с возможностью быстро и легко изменять DOM с помощью кода. И все же JSX воспроизводится как HTML: по сути разработчик описывает нужный компонент на языке разметки, а тот остается JavaScript-объектом с широкой функциональностью. Это удобно, упрощает программирование, но может запутать начинающих разработчиков.\u003Cbr\u003E\u003Cp\u003EСинтаксис JSX\u003Cbr\u003E","\u003Cp\u003EСейчас в React есть поддержка хуков — так называются специальные функции-«крючки», которые «цепляются» за состояние элемента или за метод. Изменение состояния или вызов метода «тащит» за собой эти функции, и они автоматически выполняются\u003Cbr\u003E\u003Cp\u003EReact Hooks\u003Cbr\u003E","\u003Cp\u003EТак как React — очень популярная технология, его создатели разработали бесплатные расширения для браузера с инструментами для проверки и отладки. Фронтендеры часто пользуются консолью и панелью разработчика в браузере, чтобы проверить, как работает их код. React Developer Tools облегчают задачу и расширяют возможности.\u003Cbr\u003E\u003Cp\u003EReact Developer Tools\u003Cbr\u003E","\u003Cp\u003EНачало работы\u003Cbr\u003E","\u003Cp\u003EReact изначально был спроектирован так, чтобы его можно было внедрять постепенно. Другими словами, вы можете начать с малого и использовать только ту функциональность React, которая необходима вам в данный момент. \u003Cbr\u003EДля внедрения React не надо ничего переписывать. Его можно использовать как для маленькой кнопки, так и для целого приложения. Возможно, вы захотите немного «оживить» вашу страницу. React-компоненты подходят для этого как нельзя лучше.\u003Cbr\u003EБольшинство сайтов в Интернете является обычными HTML-страницами. Даже если ваш сайт не относится к одностраничным приложениям, вы можете добавить на него React, написав всего несколько строк кода без каких-либо инструментов сборки. В зависимости от целей, можно постепенно перенести на React весь сайт или переписать всего несколько виджетов.\u003Cbr\u003E\u003Cp\u003EПробуем React\u003Cbr\u003E","\u003Cp\u003EСпособ 1. \r\nДобавление на страницу\u003Cbr\u003E","\u003Cp\u003EДля начала, откройте HTML-файл страницы, которую хотите отредактировать. Добавьте пустой тег \u003Cdiv\u003E в месте, где вы хотите отобразить что-нибудь с помощью React. Например:\u003Cbr\u003E\u003C!-- ... остальной HTML ... --\u003E\u003Cbr\u003E\r\n\u003Cdiv id=\"like_button_container\"\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\r\n\u003C!-- ... остальной HTML ... --\u003E\u003Cbr\u003E\u003Cp\u003EДобавляем DOM-контейнер в HTML\u003Cbr\u003E","\u003Cp\u003EТеперь добавьте три \u003Cscript\u003E-тега перед закрывающим тегом \u003C\u002Fbody\u003E:\u003Cbr\u003E\u003C!-- ... остальной HTML ... --\u003E\u003Cbr\u003E\r\n\u003C!-- Загрузим React. --\u003E\u003Cbr\u003E\u003C!-- Примечание: при деплое на продакшен замените «development.js» на «production.min.js». --\u003E\u003Cbr\u003E\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Freact@18\u002Fumd\u002Freact.development.js\" crossorigin\u003E\u003C\u002Fscript\u003E\u003Cbr\u003E\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Freact-dom@18\u002Fumd\u002Freact-dom.development.js\" crossorigin\u003E\u003C\u002Fscript\u003E\u003Cbr\u003E\r\n\u003C!-- Загрузим наш React-компонент. --\u003E\u003Cbr\u003E\u003Cscript src=\"like_button.js\"\u003E\u003C\u002Fscript\u003E\u003Cbr\u003E\u003Cp\u003EДобавляем script-теги\u003Cbr\u003E","\u003Cp\u003EСоздайте файл с именем like_button.js рядом с вашим HTML-файлом.\u003Cbr\u003E\r\nconst e = React.createElement;\u003Cbr\u003E\r\nclass LikeButton extends React.Component {\u003Cbr\u003E constructor(props) {\u003Cbr\u003E super(props);\u003Cbr\u003E this.state = { liked: false }; }\u003Cbr\u003E\r\n render() {\u003Cbr\u003E if (this.state.liked) {return 'You liked this.'; }\u003Cbr\u003E\r\n return e('button',{ onClick: () =\u003E this.setState({ liked: true }) },'Like');\u003Cbr\u003E }\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EСоздаём React-компонент\u003Cbr\u003E","\u003Cp\u003EДобавьте ещё 3 строки в конец файла like_button.js, после стартового кода:\u003Cbr\u003Econst domContainer = document.querySelector('#like_button_container');\u003Cbr\u003Econst root = ReactDOM.createRoot(domContainer);\u003Cbr\u003Eroot.render(e(LikeButton));\u003Cbr\u003EЭти три строки кода ищут элемент \u003Cdiv\u003E, который мы добавили в HTML на первом шаге, а затем отображают React-компонент с кнопкой «Like» внутри него.\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003EСоздаём React-компонент\u003Cbr\u003E","\u003Cp\u003EСпособ 2. \r\nReact-приложение\u003Cbr\u003E","\u003Cp\u003ENode.js — это программная платформа, которая транслирует JavaScript в машинный код, исполняемый на стороне сервера. Таким образом, JavaScript можно использовать для создания серверной части.\u003Cbr\u003Enpm — менеджер (установщик) пакетов, входящий в состав Node.js.\u003Cbr\u003Enpx — позволяет запускать пакеты Node.js, не устанавливая его и не добавляя зависимости в ваш проект. Некоторые пакеты разрабатываются специально для того, чтобы быть запущенными с помощью npx.\u003Cbr\u003EСкачиваем на — https:\u002F\u002Fnodejs.org\u002F\u003Cbr\u003E\u003Cp\u003ENode.js\u003Cbr\u003E","\u003Cp\u003EДля установки фреймворка вам понадобятся NodeJS не ниже версии 8.10 и npm не ниже версии 5.6 на вашем компьютере. Для создания проекта в командной строке выполните следующие команды:\u003Cbr\u003Enpx create-react-app my-app\u003Cbr\u003Ecd my-app\u003Cbr\u003Enpm start\u003Cbr\u003EПосле этого у вас появится папка my-app, содержащая в себе библиотеку. Найдите в этой папке папку src - это будет ваша рабочая папка, в которой вы будете вести разработку вашего проекта.\u003Cbr\u003E\u003Cp\u003ENode.js\u003Cbr\u003E","\u003Cp\u003EСтруктура проекта\u003Cbr\u003E\u003Cp\u003Enode_modules\u002F содержит все внешние библиотеки JavaScript, используемые приложением. Вам нечасто потребуется использовать его.\u003Cbr\u003EДиректория public\u002F содержит базовые файлы HTML, JSON и изображений. Это корневые ресурсы вашего проекта. \u003Cbr\u003EВ директории src\u002F содержится код React JavaScript для вашего проекта. В основном вы будете работать именно с этой директорией. \u003Cbr\u003EФайл .gitignore содержит несколько директорий и файлов по умолчанию, которые система контроля исходного кода git будет игнорировать, в том числе директорию node_modules. \u003Cbr\u003EREADME.md — это файл разметки, содержащий много полезной информации о приложении Create React App, в том числе обзор команд и ссылки на расширенные опции конфигурации. \u003Cbr\u003E","\u003Cp\u003EСтруктура проекта\u003Cbr\u003E\u003Cp\u003EПоследние два файла используются вашим диспетчером пакетов. \u003Cbr\u003EПри запуске первоначальной команды npx вы создали базовый проект, а также установили дополнительные зависимости. При установке зависимостей вы создали файл package-lock.json. Этот файл используется npm для проверки точного соответствия версий пакетов.\u003Cbr\u003EПоследний файл — package.json. Он содержит метаданные о вашем проекте, включая заголовок, номер версии и зависимости. Также он содержит скрипты, которые вы можете использовать для запуска проекта.\u003Cbr\u003E","\u003Cp\u003EВ папке src найдите файл App.js. Ближайшие уроки этот файл будет вашим основным рабочим файлом. В нем вы будете писать код, наблюдая его результаты в окне браузера.\u003Cbr\u003EОткройте этот файл в редакторе и удалите из него все лишнее, приведя его вот к такому виду:\u003Cbr\u003Eimport React from 'react';\u003Cbr\u003E\r\nfunction App() {\u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E text\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\r\nexport default App;\u003Cbr\u003E\u003Cp\u003EApp.js\u003Cbr\u003E","\u003Cp\u003EПосле того, как ваш проект установлен, для следующего запуска (например, после перезагрузки компьютера) вам достаточно будет перейти через терминал в папку my-app и выполнить следующую команду:\u003Cbr\u003Enpm start\u003Cbr\u003E\u003Cp\u003EApp.js\u003Cbr\u003E","\u003Cp\u003EУстановите в ваш браузер специальный плагин react-devtools, помогающий вести разработку на React.\u003Cbr\u003E\u003Cp\u003EПлагин для разработки\u003Cbr\u003E","\u003Cp\u003EКомпонентный подход в React\u003Cbr\u003E","\u003Cp\u003EПусть у нас есть сайт. На этом сайте мы можем выделить некоторые блоки: хедер, контент, сайдбар, футер и так далее. Каждый блок можно разделить на более мелкие подблоки. К примеру в хедере обычно можно выделить логотип, менюшку, блок контактов и так далее.\u003Cbr\u003EВ React каждый такой блок называется компонентом. Каждый компонент может содержать в себе более мелкие компоненты, те в свою очередь еще более мелкие и так далее.\u003Cbr\u003EКаждому компоненту в React соответствует js модуль, расположенный в папке src. Имя файла с модулем пишется с большой буквы и должно соответствовать функции, которая расположена в коде этого модуля. \u003Cbr\u003EНапример, файл с названием App.js должен содержать внутри себя функцию App\u003Cbr\u003E\u003Cp\u003EКомпонентный подход в React\u003Cbr\u003E","\u003Cp\u003EОдин из компонентов должен быть основным - тем, к которому добавляются остальные компоненты. В React по умолчанию таким компонентом будет компонент App.\u003Cbr\u003EК этому компоненту будут подключаться другие компоненты. Как это делается - мы разберем далеe.\u003Cbr\u003E\u003Cp\u003EОсновной компонент\u003Cbr\u003E","\u003Cp\u003EВ папке my-app\u002Fpublic в файле index.html расположен макет сайта. Вы можете размещать в нем любой HTML код - и вы увидите результат этого кода в браузере.\u003Cbr\u003EКроме того, в макете сайта есть специальный див с id, равным root, в который монтируется основной компонент. Мод монтированием понимается то, что в этот див будет выводится результат работы нашего компонента.\u003Cbr\u003E\u003Cp\u003EМакет сайта\u003Cbr\u003E","\u003Cp\u003EВ див с результатом будет выведено то, что возвращает через return функция компонента. В следующем примере это будет див с текстом:\u003Cbr\u003Efunction App() {\u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E text\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003EОбратите внимание на то, что див мы пишем без кавычек - просто пишем тег в JavaScript коде! Это основная особенность React.\u003Cbr\u003EНа самом деле в React мы пишем не на языке JavaScript, а на языке JSX, который мы будем изучать в следующих уроках.\u003Cbr\u003EПроцесс преобразования JSX в итоговый HTML код называется рендерингом.\u003Cbr\u003E\u003Cp\u003EРезультат работы компонента\u003Cbr\u003E","\u003Cp\u003EJSX в React\u003Cbr\u003E","\u003Cp\u003EЯзык JSX - это обычный JavaScript, но с некоторыми дополнениями, позволяющими писать теги прямо в коде, без кавычек.\u003Cbr\u003EТеги можно возвращать через return:\u003Cbr\u003Efunction App() {\u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E text\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EJSX в React\u003Cbr\u003E","\u003Cp\u003EТеги можно записывать в переменные или константы:\u003Cbr\u003Efunction App() {\u003Cbr\u003E const elem = \u003Cdiv\u003Etext\u003C\u002Fdiv\u003E;\u003Cbr\u003E return elem;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EJSX в React\u003Cbr\u003E","\u003Cp\u003EВсе теги в JSX должны быть закрыты, в том числе теги, которые не требуют пары, например, input или br.\u003Cbr\u003EСледующий пример кода выдаст ошибку, так как инпут не закрыт:\u003Cbr\u003Efunction App() {\u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cinput\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003EЗакроем его с помощью обратного слеша:\u003Cbr\u003E\u003Cp\u003EЗакрытость тегов\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cinput \u002F\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EВерстка в JSX должна быть корректной. В частности, не все теги можно вкладывать друг в друга. Например, если в теге ul разместить абзац, это приведет к ошибке.\u003Cbr\u003EПомимо более-менее очевидных недопустимых вложенностей, есть также и неожиданные: таблицы.\u003Cbr\u003EВ таблицах мы привыкли сразу в тег table вкладывать теги tr, вот так:\u003Cbr\u003E\u003Cp\u003EКорректность верстки\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return \u003Ctable\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E1\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E2\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E3\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E4\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003C\u002Ftable\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EТакой код в React приведет к выводу предупреждения в консоли, так как tr должны быть вложены либо в тег tbody, либо в thead, либо в tfoot.\u003Cbr\u003EДавайте исправим проблему, сделав нашу таблицу корректной:\u003Cbr\u003E\u003Cp\u003EКорректность верстки\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return \u003Ctable\u003E\u003Cbr\u003E \u003Ctbody\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E1\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E2\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E3\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E4\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003C\u002Ftbody\u003E\u003Cbr\u003E \u003C\u002Ftable\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EВ теги можно добавлять атрибуты:\u003Cbr\u003E\u003Cbr\u003EНекоторые атрибуты представляют собой исключения: вместо атрибута class следует писать атрибут className, а вместо атрибута for следует писать атрибут htmlFor:\u003Cbr\u003E\u003Cp\u003EАтрибуты\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return \u003Cdiv id=\"elem\"\u003E\u003Cbr\u003E text\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return \u003Cdiv className=\"block\"\u003E\u003Cbr\u003E \u003Clabel htmlFor=\"elem\"\u003Etext\u003C\u002Flabel\u003E\u003Cbr\u003E \u003Cinput id=\"elem\" \u002F\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EФункция в вашем основном компоненте сейчас должна выглядеть следующим образом:\u003Cbr\u003E\u003Cp\u003EПрактика\u003Cbr\u003E\u003Cp\u003Eimport React from 'react';\u003Cbr\u003E\r\nfunction App() {\u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E text\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\r\nexport default App;\u003Cbr\u003E","\u003Cp\u003EПоменяйте текст внутри дива. Посмотрите на изменения, произошедшие в браузере.\u003Cbr\u003EДобавьте в див несколько абзацев.\u003Cbr\u003EДобавьте в див несколько инпутов, разделенных тегами br.\u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E","\u003Cp\u003EСделайте внутри дива список ul, содержащий в себе 10 тегов li.\u003Cbr\u003E\u003Cp\u003E№2\u003Cbr\u003E","\u003Cp\u003EСделайте внутри дива таблицу с тремя рядами и тремя колонками.\u003Cbr\u003E\u003Cp\u003E№3\u003Cbr\u003E","\u003Cp\u003EСделайте внутри дива три абзаца с различными CSS классами.\u003Cbr\u003E\u003Cp\u003E№4\u003Cbr\u003E","\u003Cp\u003EПравила возврата функцией тегов JSX\u003Cbr\u003E","\u003Cp\u003EВнутри тега, который возвращается через return, может быть сколько угодно вложенных тегов:\u003Cbr\u003E\u003Cp\u003EВложенность тегов\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cp\u003Etext1\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003Etext2\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EОткрывающий тег обязательно должен быть написан на одной строке с командой return. Например, следующий код работать не будет:\u003Cbr\u003E\u003Cp\u003EСнос тега вниз\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return\u003Cbr\u003E \u003Cdiv\u003E\u003Cbr\u003E \u003Cp\u003Etext1\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003Etext2\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EДля того, чтобы такой снос тега вниз заработал, наш тег необходимо взять в круглые скобки:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return (\u003Cbr\u003E \u003Cdiv\u003E\u003Cbr\u003E \u003Cp\u003Etext1\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003Etext2\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E\u003Cbr\u003E );\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EЧерез return нельзя возвращать сразу несколько тегов. То есть следующий код работать не будет:\u003Cbr\u003E\u003Cp\u003EВозврат нескольких тегов\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return (\u003Cbr\u003E \u003Cdiv\u003E\u003Cbr\u003E \u003Cp\u003Etext1\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003Etext2\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E\u003Cbr\u003E \u003Cdiv\u003E\u003Cbr\u003E \u003Cp\u003Etext3\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003Etext4\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E\u003Cbr\u003E );\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EЧтобы желаемое заработало, нам придется взять наши теги в какой-нибудь общий тег, например, вот так:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return (\u003Cbr\u003E \u003Cdiv\u003E\u003Cbr\u003E \u003Cdiv\u003E\u003Cbr\u003E \u003Cp\u003Etext1\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003Etext2\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E\u003Cbr\u003E \u003Cdiv\u003E\u003Cbr\u003E \u003Cp\u003Etext3\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003Etext4\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E\u003Cbr\u003E );\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EТакой прием сработает, однако, он не без недостатков: в результате рендеринга мы получим дополнительный див, который мы в общем не хотели и ввели исключительно для корректности работы React. Этот див, к примеру, может сломать нам часть верстки.\u003Cbr\u003EДля избежания таких проблем в React введен специальный пустой тег \u003C\u003E\u003C\u002F\u003E, который группирует теги, но в готовую верстку не попадает. Давайте воспользуемся этим тегом:\u003Cbr\u003E\u003Cp\u003EВозврат нескольких тегов\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return (\u003Cbr\u003E \u003C\u003E\u003Cbr\u003E \u003Cdiv\u003E\u003Cbr\u003E \u003Cp\u003Etext1\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003Etext2\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E\u003Cbr\u003E \u003Cdiv\u003E\u003Cbr\u003E \u003Cp\u003Etext3\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003Etext4\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E\u003Cbr\u003E \u003C\u002F\u003E\u003Cbr\u003E );\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EВ качестве результата можно возвращать тег, который не нужно закрывать, например, инпут. Как вы уже знаете, по правилам React в этом случае вместо тега \u003Cinput\u003E нужно писать тег \u003Cinput \u002F\u003E:\u003Cbr\u003E\u003Cp\u003EВозврат незакрытого тега\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return \u003Cinput \u002F\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EПусть мы хотим вернуть пустой тег:\u003Cbr\u003E\u003Cp\u003EВозврат пустого тега\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return \u003Cdiv\u003E\u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EВ этом случае код можно сократить вот так:\u003Cbr\u003E\u003Cp\u003EПри этом в получившемся HTML коде React автоматические преобразует сокращенную форму в нормальную.\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return \u003Cdiv \u002F\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EВ следующем коде автор кода хочет вернуть тег ul:\u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return\u003Cbr\u003E \u003Cul\u003E\u003Cbr\u003E \u003Cli\u003Etext1\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003Etext2\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003Etext3\u003C\u002Fli\u003E\u003Cbr\u003E \u003C\u002Ful\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EКод, однако, не работает. Исправьте ошибку автора кода.\u003Cbr\u003E","\u003Cp\u003EАвтор следующего кода хочет вернуть сразу два тега ul:\u003Cbr\u003E\u003Cp\u003E№2\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return \u003Cul\u003E\u003Cbr\u003E \u003Cli\u003Etext1\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003Etext2\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003Etext3\u003C\u002Fli\u003E\u003Cbr\u003E \u003C\u002Ful\u003E\u003Cbr\u003E \u003Cul\u003E\u003Cbr\u003E \u003Cli\u003Etext1\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003Etext2\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003Etext3\u003C\u002Fli\u003E\u003Cbr\u003E \u003C\u002Ful\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EКод, однако, не работает. Исправьте ошибку автора кода.\u003Cbr\u003E","\u003Cp\u003EАвтор следующего кода хочет вернуть инпут:\u003Cbr\u003E\u003Cp\u003E№3\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return \u003Cinput\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EКод, однако, не работает. Исправьте ошибку автора кода.\u003Cbr\u003E","\u003Cp\u003EАвтор следующего кода хочет вернуть три инпута:\u003Cbr\u003E\u003Cp\u003E№4\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return \u003Cinput\u003E\u003Cinput\u003E\u003Cinput\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EКод, однако, не работает. Исправьте ошибку автора кода.\u003Cbr\u003E","\u003Cp\u003EВведение в компоненты JSX\u003Cbr\u003E","\u003Cp\u003EВзглянем на любой сайт. Он состоит из набора независимых блоков: хедер, сайдбары, футер, контент. Можно сказать, что эти блоки и есть компоненты в том смысле, в котором подразумевается в React.\u003Cbr\u003EЕсли посмотреть на тот же хедер, что в нем можно выделить блок с логотипом, блок контактов, блок с меню и так далее. То есть компоненты могут состоять из других подкомпонентов.\u003Cbr\u003EАналогичным образом дело обстоит в React - сайт строится из набора компонентов, которые в свою очередь могут содержать другие компоненты.\u003Cbr\u003EВ React каждый компонент представляет собой отдельный модуль. Обычно разработка начинается с главного компонента App, который содержит в себе остальные.\u003Cbr\u003E\u003Cp\u003EКомпоненты React\u003Cbr\u003E","\u003Cp\u003EДавайте потренируемся создавать новые компоненты. Их принято создавать в отдельных файлах.\u003Cbr\u003EПусть для примера нам нужен компонент, выводящий данные продукта. Для этого нам нужно в рабочей папке создать файл Product.js и добавить в него следующий код:\u003Cbr\u003E\u003Cp\u003EКомпоненты React\u003Cbr\u003E\u003Cp\u003Efunction Product() {\u003Cbr\u003E return product\u003Cbr\u003E \u003C\u002Fp\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EДля того, чтобы мы могли использовать компонент в другом файле, нам нужно его экспортировать – разрешить использование в других файлах с помощью команды export\u003Cbr\u003E\u003Cp\u003EКомпоненты React\u003Cbr\u003E\u003Cp\u003Efunction Product() {\u003Cbr\u003E return product\u003Cbr\u003E \u003C\u002Fp\u003E;\u003Cbr\u003E}\u003Cbr\u003E\r\nexport default Product;\u003Cbr\u003E","\u003Cp\u003EЧтобы отобразить наш компонент внутри другого компонента, нам необходимо добавить его – импортировать с помощью команды import\u003Cbr\u003E\u003Cp\u003EКомпоненты React\u003Cbr\u003E\u003Cp\u003Eimport Product from '.\u002FProduct'; \u002F\u002F импортируем продукт\u003Cbr\u003E\r\nfunction App() {\u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E text\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\r\nexport default App;\u003Cbr\u003E","\u003Cp\u003EКаждому подключенному компоненту соответствует свой JSX тег. К примеру, у нас есть компонент Product, а значит ему соответствует тег \u003CProduct \u002F\u003E.\u003Cbr\u003EНазвание тега компонента обязательно следует писать с большой буквы, чтобы React мог отличить вызов компонента от использования тега HTML.\u003Cbr\u003E\u003Cp\u003EКомпоненты React\u003Cbr\u003E\u003Cp\u003Eimport Product from '.\u002FProduct';\u003Cbr\u003E\r\nfunction App() {\u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003CProduct \u002F\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\r\nexport default App;\u003Cbr\u003E","\u003Cp\u003EМожно вставить несколько продуктов. Для этого нужно просто написать несколько тегов компонента:\u003Cbr\u003E\u003Cp\u003EНесколько экземляров компонента\u003Cbr\u003E\u003Cp\u003Eimport Product from '.\u002FProduct';\u003Cbr\u003E\r\nfunction App() {\u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003CProduct \u002F\u003E\u003Cbr\u003E \u003CProduct \u002F\u003E\u003Cbr\u003E \u003CProduct \u002F\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\r\nexport default App;\u003Cbr\u003E","\u003Cp\u003EСделайте компонент User, который будет выводить данные юзеров. Пусть сейчас этот компонент просто выводит какой-нибудь текст. Используйте этот компонент в компоненте App.\u003Cbr\u003EДобавьте в компонент App несколько экземпляров компонента User\u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E","\u003Cp\u003EСоздайте базовую разметку сайта, разбив её на компоненты Header, Main, Footer, компоненты заполните соответствующим контентом. Все компоненты добавьте в компонент App \u003Cbr\u003E\u003Cp\u003E№2\u003Cbr\u003E","\u003Cp\u003EВставка значений в JSX\u003Cbr\u003E","\u003Cp\u003EПусть у нас есть следующий код:\u003Cbr\u003E\u003Cp\u003EВставка значений\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const str = 'text';\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E text\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EЧтобы в текст дива вставилось значение константы str нашу константу нужно написать в фигурных скобках внутри, вот так:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const str = 'text';\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {str}\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003E1) Кроме вставки константы в теге может быть еще какой-нибудь текст:\u003Cbr\u003E\u003Cp\u003EНюансы\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const str = 'text';\u003Cbr\u003E\r\n return \u003Cdiv\u003E\u003Cbr\u003E eee {str} bbb\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003E2) В один тег можно вставлять сколько угодно констант:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const str1 = 'text1';\u003Cbr\u003E const str2 = 'text2';\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {str1} {str2}\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003E3) Вставки констант также могут разделяться каким-либо текстом:\u003Cbr\u003E\u003Cp\u003EНюансы\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const str1 = 'text1';\u003Cbr\u003E const str2 = 'text2';\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {str1} eee {str2}\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EВнутри фигурных скобок можно не только вставлять переменные и константы, но и выполнять произвольный JavaScript код. Давайте, к примеру, в момент вставки найдем сумму двух констант:\u003Cbr\u003E\u003Cp\u003EВыполнение JavaScript\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const num1 = 1;\u003Cbr\u003E const num2 = 2;\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {num1 + num2}\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EМожно выполнять вставку не только примитивов, но также массивов и объектов.\u003Cbr\u003EВот пример с массивом:\u003Cbr\u003E\u003Cp\u003EМассивы и объекты\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const arr = [1, 2, 3];\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cp\u003E{arr[0]}\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003E{arr[1]}\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003E{arr[2]}\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EВот пример с объектом:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const obj = {a: 1, b: 2, c: 3};\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cp\u003E{obj.a}\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003E{obj.b}\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003E{obj.c}\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EДан следующий код:\u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const str1 = 'text1';\u003Cbr\u003E const str2 = 'text1';\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cp\u003E\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003E\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EВставьте первую константу в первый абзац, а вторую константу - во второй.\u003Cbr\u003E","\u003Cp\u003EДан следующий код:\u003Cbr\u003E\u003Cp\u003E№2\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const name = 'user';\u003Cbr\u003E const age = '30';\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E name: ?\u003Cbr\u003E age: ?\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EВставьте константу с именем вместо первого знака ?, а константу с возрастом - вместо второго.\u003Cbr\u003E","\u003Cp\u003EНапишите код, возвращающий num1 в степени num2:\u003Cbr\u003E\u003Cp\u003E№3\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const num1 = 3;\u003Cbr\u003E const num2 = 2;\u003Cbr\u003E \u003Cbr\u003E return ?\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EНапишите код, возвращающий Имя и Фамилию человека, разделенные нижним подчеркиванием:\u003Cbr\u003E\u003Cp\u003E№4\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const name = 'john';\u003Cbr\u003E const surname = 'smit';\u003Cbr\u003E \u003Cbr\u003E return ?\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EНапишите код, возвращающий корень из числа:\u003Cbr\u003E\u003Cp\u003E№5\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const num = 4;\u003Cbr\u003E \u003Cbr\u003E return ?\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EСделайте так, чтобы результатом рендеринга был тег ul, в тегах li которого будут стоять элементы массива.\u003Cbr\u003E\u003Cp\u003E№6\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const arr = [1, 2, 3, 4, 5];\u003Cbr\u003E return ?\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EСделайте так, чтобы результатом рендеринга был следующий код:\u003Cbr\u003E\u003Cp\u003E№7\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const obj = {name: 'john', surname: 'smit’};\u003Cbr\u003E return ?\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003E name: \u003Cspan\u003Ejohn\u003C\u002Fspan\u003E, \u003Cbr\u003E surname: \u003Cspan\u003Esmit\u003C\u002Fspan\u003E,\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003EДля значений имени и фамилии используйте значения элементов объекта\u003Cbr\u003E","\u003Cp\u003EХранение тегов в JSX\u003Cbr\u003E","\u003Cp\u003EВ переменных и константах можно хранить теги, выполняя затем их вставку в нужное место.\u003Cbr\u003E\u003Cp\u003EХранение тегов\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const str = \u003Cp\u003Etext\u003C\u002Fp\u003E;\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {str}\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003E\u003Cdiv\u003E\u003Cbr\u003E \u003Cp\u003Etext\u003C\u002Fp\u003E\u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cp\u003EВ результате рендеринга получится следующий код:\u003Cbr\u003E","\u003Cp\u003EУчтите, что несколько тегов, хранящихся в константе, обязательно нужно обернуть в какой-то общий тег. \u003Cbr\u003E\u003Cp\u003EНесколько тегов в константах\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const str = \u003Cdiv\u003E\u003Cp\u003Etext1\u003C\u002Fp\u003E\u003Cp\u003Etext2\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E;\u003Cbr\u003E \u003Cbr\u003E return \u003Cmain\u003E\u003Cbr\u003E {str}\u003Cbr\u003E \u003C\u002Fmain\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const str = \u003C\u003E\u003Cp\u003Etext1\u003C\u002Fp\u003E\u003Cp\u003Etext2\u003C\u002Fp\u003E\u003C\u002F\u003E;\u003Cbr\u003E \u003Cbr\u003E return \u003Cmain\u003E\u003Cbr\u003E {str}\u003Cbr\u003E \u003C\u002Fmain\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EМожно также использовать пустые теги:\u003Cbr\u003E","\u003Cp\u003EТеги, записываемые в константы, не обязательно писать на одной строке. Можно сделать и так:\u003Cbr\u003E\u003Cp\u003EТеги не в одну строку\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const str = text\u003Cbr\u003E \u003C\u002Fp\u003E;\u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {str}\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const str = \u003Cmain\u003E\u003Cbr\u003E text\u003Cbr\u003E \u003C\u002Fmain\u003E;\u003Cbr\u003E \u003Cbr\u003E return str;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EКонстанты с тегами можно возвращать через return:\u003Cbr\u003E","\u003Cp\u003EВставку переменных и констант можно делать не только в тексты тегов, но и в атрибуты. При этом кавычки от атрибутов не ставятся:\u003Cbr\u003E\u003Cp\u003EВставка в атрибуты тегов\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const str = 'elem';\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv id={str}\u003E\u003Cbr\u003E text\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003E\u003Cdiv id=\"elem\"\u003E\u003Cbr\u003E text\u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cp\u003EРезультатом работы этого кода будет следующее:\u003Cbr\u003E","\u003Cp\u003EНапоминаю, что вместо атрибута class следует писать атрибут className:\u003Cbr\u003E\u003Cp\u003EИсключения\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const str = 'elem';\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv className={str}\u003E\u003Cbr\u003E text\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const str = 'elem';\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Clabel htmlFor={str}\u003Etext\u003C\u002Flabel\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EА вместо атрибута for следует писать атрибут htmlFor:\u003Cbr\u003E","\u003Cp\u003EДан следующий код:\u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const li1 = \u003Cli\u003Etext1\u003C\u002Fli\u003E;\u003Cbr\u003E const li2 = \u003Cli\u003Etext2\u003C\u002Fli\u003E;\u003Cbr\u003E const li3 = \u003Cli\u003Etext3\u003C\u002Fli\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EСделайте так, чтобы результатом рендеринга было следующее:\u003Cbr\u003E\u003Cp\u003E\u003Cul\u003E\u003Cbr\u003E \u003Cli\u003Etext1\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003Etext2\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003Etext3\u003C\u002Fli\u003E\u003Cbr\u003E\u003C\u002Ful\u003E\u003Cbr\u003E","\u003Cp\u003EАвтор следующего кода хотел записать в константу несколько тегов li и вставить их в ul:\u003Cbr\u003E\u003Cp\u003E№2\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const items = \u003Cli\u003Etext1\u003C\u002Fli\u003E\u003Cli\u003Etext2\u003C\u002Fli\u003E\u003Cli\u003Etext3\u003C\u002Fli\u003E;\u003Cbr\u003E \u003Cbr\u003E return \u003Cul\u003E\u003Cbr\u003E {items}\u003Cbr\u003E \u003C\u002Ful\u003E\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EКод, однако, не работает. Исправьте ошибку автора кода.\u003Cbr\u003E","\u003Cp\u003EНекий программист написал следующий код:\u003Cbr\u003E\u003Cp\u003E№3\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const str1 = 'label';\u003Cbr\u003E const str2 = 'block';\u003Cbr\u003E const str3 = 'elem';\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Clabel id={str1} for={str2} class={str3}\u003Etext\u003C\u002Flabel\u003E \u003Cbr\u003E \u003Cinput id={str2}\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EКод, однако, не работает. Исправьте ошибку автора кода.\u003Cbr\u003E","\u003Cp\u003EПрименение условий в JSX\u003Cbr\u003E","\u003Cp\u003EДавайте сделаем так, чтобы в зависимости от содержимого константы show на экран вывелся или один, или другой текст:\u003Cbr\u003E\u003Cp\u003EПрименение условий\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E let text;\u003Cbr\u003E const show = true;\u003Cbr\u003E \u003Cbr\u003E if (show) {\u003Cbr\u003E text = 'text1';\u003Cbr\u003E } else {\u003Cbr\u003E text = 'text2';\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {text}\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EМожно сделать так, чтобы текст показывался, если в show будет true, и не показывался, если в ней будет false:\u003Cbr\u003E\u003Cp\u003EТолько показ\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E let text;\u003Cbr\u003E const show = true;\u003Cbr\u003E \u003Cbr\u003E if (show) {\u003Cbr\u003E text = \u003Cp\u003Etext\u003C\u002Fp\u003E;\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {text}\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EМожно возвращать через return переменную, содержащую тег:\u003Cbr\u003E\u003Cp\u003EВозврат тегов\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E let text;\u003Cbr\u003E const show = true;\u003Cbr\u003E \u003Cbr\u003E if (show) {\u003Cbr\u003E text = \u003Cp\u003Etext1\u003C\u002Fp\u003E;\u003Cbr\u003E } else {\u003Cbr\u003E text = \u003Cp\u003Etext2\u003C\u002Fp\u003E;\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return text;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EПусть в константе isAdult содержится true, если пользователю уже есть 18 лет, и false, если нет:\u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const isAdult = true;\u003Cbr\u003E \u003Cbr\u003E \u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EСделайте так, чтобы в зависимости от значения isAdult на экране показался или один абзац с текстом, или другой.\u003Cbr\u003E","\u003Cp\u003EПусть в константе isAdmin содержится true, если пользователь админ, и false, если нет:\u003Cbr\u003E\u003Cp\u003E№2\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const isAdmin = true;\u003Cbr\u003E \u003Cbr\u003E \u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EСделайте так, чтобы, если isAdmin имеет значение true, на экране показался див с абзацами. В противном случае ничего показывать не нужно.\u003Cbr\u003E","\u003Cp\u003EСокращенные условия в JSX\u003Cbr\u003E","\u003Cp\u003EКак вы уже знаете, внутри фигурных скобок можно выполнять JavaScript код. На самом деле этот код может быть не любым, а только самым простым.\u003Cbr\u003EВ частности, условия if там применять нельзя. Взамен следует пользоваться сокращенными вариантами условий. Давайте разберемся с ними.\u003Cbr\u003E\u003Cp\u003EПрименение условий\u003Cbr\u003E","\u003Cp\u003EДавайте в зависимости от значения константы show выведем один или другой текст. Используем для этого тернарный оператор:\u003Cbr\u003E\u003Cp\u003EТернарный оператор\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const show = true;\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {show ? 'text1' : 'text2'}\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EМожно работать не только с текстами, но и с тегами:\u003Cbr\u003E\u003Cp\u003EТернарный оператор\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const show = true;\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {show ? \u003Cp\u003Etext1\u003C\u002Fp\u003E : \u003Cp\u003Etext2\u003C\u002Fp\u003E}\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EНам может понадобится выполнить вставку текста, если условие истинно, и ничего не делать, если ложно. Это делается с помощью оператора &&.\u003Cbr\u003EДавайте посмотрим его работу на примере. В следующем коде, если в show будет true, то вставиться абзац с текстом, а если будет false, то ничего не вставится:\u003Cbr\u003E\u003Cp\u003EОператор &&\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const show = true;\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {show && \u003Cp\u003Etext\u003C\u002Fp\u003E}\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EМожет быть и обратная ситуация: нужно выполнить вставку текста, если условие ложно, и ничего не делать, если истинно. Для этого нужно выполнить инвертирования константы с помощью оператора !.\u003Cbr\u003EВ следующем примере, если в hide будет false, то вставиться абзац с текстом:\u003Cbr\u003E\u003Cp\u003EИнвертирование\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const hide = false;\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {!hide && \u003Cp\u003Etext\u003C\u002Fp\u003E}\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EДан следующий код:\u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const age = 19;\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EЕсли в age записано больше 18 лет, то в тексте тега div покажите пользователю абзац с одним текстом, а если меньше - то с другим. \u003Cbr\u003EНе использовать if\u003Cbr\u003E","\u003Cp\u003EДан следующий код:\u003Cbr\u003E\u003Cp\u003E№2\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const isAuth = true;\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cp\u003Eвы авторизованы\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EСделайте так, чтобы приведенный абзац с текстом показывался только если в isAuth записано true.\u003Cbr\u003EНе использовать if\u003Cbr\u003E","\u003Cp\u003EДан следующий код:\u003Cbr\u003E\u003Cp\u003E№3\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const isAuth = false;\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cp\u003Eпожалуйста, авторизуйтесь\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EСделайте так, чтобы приведенный абзац с текстом показывался только если в isAuth записано false.\u003Cbr\u003EНе использовать if\u003Cbr\u003E","\u003Cp\u003EИспользование функций в React\u003Cbr\u003E","\u003Cp\u003EВнутри основной функции компонента можно делать вспомогательные функции. К примеру, давайте с помощью вспомогательных функций найдем сумму степеней двух чисел и выведем ее в тексте тега:\u003Cbr\u003E\u003Cp\u003EИспользование функций\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E function square(num) {\u003Cbr\u003E return num ** 2;\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function cube(num) {\u003Cbr\u003E return num ** 3;\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E const sum = square(3) + cube(4);\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {sum}\u003Cbr\u003E \u003C\u002Fdiv\u003E\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EФункции можно вызывать прямо в фигурных скобках:\u003Cbr\u003E\u003Cp\u003EВызов функций внутри тегов\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E function square(num) {\u003Cbr\u003E return num ** 2;\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {square(3)}\u003Cbr\u003E \u003C\u002Fdiv\u003E\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EВ фигурных скобках можно также делать вызовы нескольких функций:\u003Cbr\u003E\u003Cp\u003EВызов функций внутри тегов\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E function square(num) {\u003Cbr\u003E return num ** 2;\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function cube(num) {\u003Cbr\u003E return num ** 3;\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {square(3) + cube(4)}\u003Cbr\u003E \u003C\u002Fdiv\u003E\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EСделайте функцию getDigitsSum, которая будет находить сумму цифр переданного числа. С ее помощью выведите на экран сумму цифр числа 123.\u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E\u003Cp\u003EИспользуя созданную вами функцию getDigitsSum выведите в абзац сумму цифр числа 12345.\u003Cbr\u003E","\u003Cp\u003EСобытия в JSX\u003Cbr\u003E","\u003Cp\u003EДавайте теперь изучим работу с событиями на React. К примеру, сделаем так, чтобы по клику на блок выводился алерт с некоторым текстом.\u003Cbr\u003EПусть у нас есть функция showMess, которая выводит алерт с сообщением, а в HTML коде есть кнопка, по клику на которую нам и хотелось бы видеть этот алерт:\u003Cbr\u003E\u003Cp\u003EНавешивание событий\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E function showMess() {\u003Cbr\u003E alert('hello');\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cbutton\u003Eshow\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EДавайте привяжем к нашей кнопке событие onclick так, чтобы по клику на этот див срабатывала функция showMess. Для этого нужно добавить атрибут onClick (именно в camelCase, то есть onClick, а не onclick), а в нем указать функцию, которая выполнится по этому событию:\u003Cbr\u003E\u003Cp\u003EНавешивание событий\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E function showMess() {\u003Cbr\u003E alert('hello');\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cbutton onClick={showMess}\u003Eshow\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EПусть наша функция showMess параметром принимает имя того, с кем мы хотим поздороваться:\u003Cbr\u003E\u003Cp\u003EПараметры в функции\u003Cbr\u003E\u003Cp\u003Efunction showMess(name) {\u003Cbr\u003E alert('hello, ' + name);\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EМожно передать этот параметр при привязывании функции к событию. Для этого вызов нашей функции следует обернуть в стрелочную функцию:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E function showMess(name) {\u003Cbr\u003E alert('hello, ' + name);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cbutton onClick={() =\u003E showMess('user')}\u003Eshow\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EТаким образом мы можем привязать одну и ту же функцию к нескольким кнопкам с разными параметрами:\u003Cbr\u003E\u003Cp\u003EПараметры в функции\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E function showMess(text) {\u003Cbr\u003E alert(text);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cbutton onClick={() =\u003E showMess('user1')}\u003Eshow1\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003Cbutton onClick={() =\u003E showMess('user2')}\u003Eshow2\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EСделайте так, чтобы по клику на первую кнопку срабатывала первая функция, а по клику на вторую кнопку - вторая функция.\u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E function show1() {\u003Cbr\u003E alert(1);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function show2() {\u003Cbr\u003E alert(2);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cbutton\u003Eact1\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003Cbutton\u003Eact2\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EСделайте так, чтобы по клику на первую кнопку алертом выводилось число 1, по клику на вторую кнопку - число 2, а по клику на третью - число 3.\u003Cbr\u003E\u003Cp\u003E№2\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cbutton\u003Eact1\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003Cbutton\u003Eact2\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003Cbutton\u003Eact3\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EОбъект Event в React\u003Cbr\u003E","\u003Cp\u003EВнутри функции, привязанной к обработчику событий, доступен объект Event:\u003Cbr\u003E\u003Cp\u003EОбъект Event\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E function func(event) {\u003Cbr\u003E console.log(event); \u002F\u002F объект с событием\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cbutton onClick={func}\u003Eact\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EВ переменную event попадает не родной объект Event браузера, а специальная кроссбраузерная обертка над ним со стороны React. Эта обертка называется SyntheticEvent. Эта обертка помогает событиям работать одинаково во всех браузерах. \u003Cbr\u003E","\u003Cp\u003EДана кнопка. По клику на нее получите объект Event и выведите его в консоль.\u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E","\u003Cp\u003EДана кнопка. По клику на нее получите выведите в консоль event.target клика.\u003Cbr\u003E\u003Cp\u003E№2\u003Cbr\u003E","\u003Cp\u003EПусть у нас есть некоторая функция func, которую мы хотим использовать в качестве обработчика события. Пусть эта функция принимает некоторый параметр:\u003Cbr\u003E\u003Cp\u003EEvent передача параметров\u003Cbr\u003E\u003Cp\u003Efunction func(arg) {\u003Cbr\u003E console.log(arg);\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EДавайте используем эту функцию в качестве обработчика, передав ей параметр:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E function func(arg) {\u003Cbr\u003E console.log(arg);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cbutton onClick={() =\u003E func('eee')}\u003Eact\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EПусть теперь кроме параметра мы хотим получить в нашей функции объект Event. Для этого нам нужно поступить следующим образом:\u003Cbr\u003E\u003Cp\u003EEvent передача параметров\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E function func(arg, event) {\u003Cbr\u003E console.log(arg, event);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cbutton onClick={event =\u003E func('eee', event)}\u003Eact\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EОсознайте, как работает приведенный код, запустите у себя.\u003Cbr\u003E\u003Cp\u003E№3\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E function func(arg, event) {\u003Cbr\u003E console.log(arg, event);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cbutton onClick={event =\u003E func('eee', event)}\u003Eact\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EПеределайте приведенный код так, чтобы функция принимала два параметра.\u003Cbr\u003E\u003Cp\u003E№4\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E function func(arg, event) {\u003Cbr\u003E console.log(arg, event);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cbutton onClick={event =\u003E func('eee', event)}\u003Eact\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EМодифицируйте предыдущую задачу так, чтобы объект с событием передавался первым параметром функции, а не последним.\u003Cbr\u003E\u003Cp\u003E№5\u003Cbr\u003E","\u003Cp\u003EМодифицируйте предыдущую задачу так, чтобы объект с событием передавался вторым параметром функции, находясь между первым и третьим параметрами.\u003Cbr\u003E\u003Cp\u003E№6\u003Cbr\u003E","\u003Cp\u003EТеги в массивах и циклах JSX\u003Cbr\u003E","\u003Cp\u003EПусть у нас в массиве хранятся теги:\u003Cbr\u003E\u003Cp\u003EТеги в массивах\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const arr = [\u003Cp\u003E1\u003C\u002Fp\u003E, \u003Cp\u003E2\u003C\u002Fp\u003E, \u003Cp\u003E3\u003C\u002Fp\u003E];\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EМы можем выполнить вставку содержимого нашей переменной с помощью фигурных скобок:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const arr = [\u003Cp\u003E1\u003C\u002Fp\u003E, \u003Cp\u003E2\u003C\u002Fp\u003E, \u003Cp\u003E3\u003C\u002Fp\u003E];\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {arr}\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EМассив с тегами можно создать в цикле:\u003Cbr\u003E\u003Cp\u003EФормирование в цикле\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const arr = [];\u003Cbr\u003E \u003Cbr\u003E for (let i = 0; i \u003C= 9; i++) {\u003Cbr\u003E arr.push(\u003Cp\u003E{i}\u003C\u002Fp\u003E);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {arr}\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EПусть у нас есть какой-нибудь массив с некими данными, например, вот такой:\u003Cbr\u003E\u003Cp\u003EФормирование из массива с данными\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const arr = [1, 2, 3, 4, 5];\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EДавайте положим каждый элемент этого массива в абзац и выведем эти абзацы в диве. Для этого мы можем воспользоваться любым удобным циклом JavaScript. Например, обычным for-of:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const arr = [1, 2, 3, 4, 5];\u003Cbr\u003E const res = [];\u003Cbr\u003E \u003Cbr\u003E for (const elem of arr) {\u003Cbr\u003E res.push(\u003Cp\u003E{elem}\u003C\u002Fp\u003E);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {res}\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EОднако, в React для таких дел более принято использовать цикл map:\u003Cbr\u003E\u003Cp\u003EФормирование из массива с данными\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const arr = [1, 2, 3, 4, 5];\u003Cbr\u003E \u003Cbr\u003E const res = arr.map(function(item) {\u003Cbr\u003E return \u003Cp\u003E{item}\u003C\u002Fp\u003E;\u003Cbr\u003E });\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {res}\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EМетод «arr.map(callback[, thisArg])» используется для трансформации массива.\u003Cbr\u003EОн создаёт новый массив, который будет состоять из результатов вызова callback(item, i, arr) для каждого элемента arr.\u003Cbr\u003E","\u003Cp\u003EДан массив:\u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E\u003Cp\u003Econst arr = [\u003Cbr\u003E \u003Cli\u003E1\u003C\u002Fli\u003E,\u003Cbr\u003E \u003Cli\u003E2\u003C\u002Fli\u003E,\u003Cbr\u003E \u003Cli\u003E3\u003C\u002Fli\u003E,\u003Cbr\u003E \u003Cli\u003E4\u003C\u002Fli\u003E,\u003Cbr\u003E \u003Cli\u003E5\u003C\u002Fli\u003E,\u003Cbr\u003E];\u003Cbr\u003E\u003Cp\u003EС помощью этого массива получите результатом рендеринга следующий код:\u003Cbr\u003E\u003Cp\u003E\u003Cul\u003E\u003Cbr\u003E \u003Cli\u003E1\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003E2\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003E3\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003E4\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003E5\u003C\u002Fli\u003E\u003Cbr\u003E\u003C\u002Ful\u003E\u003Cbr\u003E","\u003Cp\u003EС помощью цикла for сформируйте следующий код:\u003Cbr\u003E\u003Cp\u003E№2\u003Cbr\u003E\u003Cp\u003E\u003Cul\u003E\u003Cbr\u003E \u003Cli\u003E1\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003E2\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003E3\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003E4\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003E5\u003C\u002Fli\u003E\u003Cbr\u003E\u003C\u002Ful\u003E\u003Cbr\u003E","\u003Cp\u003EДан массив:\u003Cbr\u003E\u003Cp\u003E№3\u003Cbr\u003E\u003Cp\u003Econst arr = ['a', 'b', 'c', 'd', 'e'];\u003Cbr\u003E\u003Cp\u003EС помощью этого массива получите результатом рендеринга следующий код:\u003Cbr\u003E\u003Cp\u003E\u003Cul\u003E\u003Cbr\u003E \u003Cli\u003Ea\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003Eb\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003Ec\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003Ed\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003Ee\u003C\u002Fli\u003E\u003Cbr\u003E\u003C\u002Ful\u003E\u003Cbr\u003E","\u003Cp\u003EВ предыдущем примере мы формировали наши абзацы в цикле, вот так:\u003Cbr\u003E\u003Cp\u003EПроблема с ключами\u003Cbr\u003E\u003Cp\u003E const res = arr.map(function(item) {\u003Cbr\u003E return \u003Cp\u003E{item}\u003C\u002Fp\u003E;\u003Cbr\u003E });\u003Cbr\u003E\u003Cp\u003EЭто будет работать, однако, если заглянуть в консоль - мы увидим ошибку: Warning: Each child in an array or iterator should have a unique \"key\" prop. В данном случае React требует, чтобы каждому тегу из цикла мы дали уникальный номер, чтобы React было проще с этими тегами работать в дальнейшем.\u003Cbr\u003E","\u003Cp\u003EЭтот номер добавляется с помощью атрибута key. В данном случае в качестве номера мы можем взять номер элемента в массиве. В нашем случае этот номер хранится в переменной index и значит исправленная строка будет выглядеть вот так:\u003Cbr\u003E\u003Cp\u003EПроблема с ключами\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const arr = [1, 2, 3, 4, 5];\u003Cbr\u003E \u003Cbr\u003E const res = arr.map(function(item, index) {\u003Cbr\u003E return \u003Cp key={index}\u003E{item}\u003C\u002Fp\u003E;\u003Cbr\u003E });\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {res}\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EПроблема с ключами\u003Cbr\u003E\u003Cp\u003EЕще раз: этот атрибут key имеет служебное значение для React, более глубоко вы поймете этот момент в следующих уроках. Пока просто знайте: если вы видите такую ошибку - добавьте атрибут key с уникальным для каждого тега значением и проблема исчезнет.\u003Cbr\u003EКлюч key должен быть уникальным только внутри этого цикла, в другом цикле значения key могут совпадать со значениями из другого цикла.\u003Cbr\u003E","\u003Cp\u003EМодифицируйте ваше решение предыдущей задачи в соответствии с описанным.\u003Cbr\u003E\u003Cp\u003E№4\u003Cbr\u003E","\u003Cp\u003EВывод массива объектов в JSX\u003Cbr\u003E","\u003Cp\u003EПусть у нас есть массив объектов с продуктами:\u003Cbr\u003E\u003Cp\u003EВывод массива объектов\u003Cbr\u003E\u003Cp\u003Econst prods = [\u003Cbr\u003E {name: 'product1', cost: 100},\u003Cbr\u003E {name: 'product2', cost: 200},\u003Cbr\u003E {name: 'product3', cost: 300},\u003Cbr\u003E];\u003Cbr\u003E\u003Cp\u003EДавайте выведем каждый продукт в своем абзаце:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const res = prods.map(function(item) {\u003Cbr\u003E return \u003Cspan\u003E{item.name}\u003C\u002Fspan\u003E:\u003Cbr\u003E \u003Cspan\u003E{item.cost}\u003C\u002Fspan\u003E\u003Cbr\u003E \u003C\u002Fp\u003E;\u003Cbr\u003E });\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {res}\u003Cbr\u003E \u003C\u002Fdiv\u003E;}\u003Cbr\u003E","\u003Cp\u003EНе забудем добавить атрибут key:\u003Cbr\u003E\u003Cp\u003EАтрибут key\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const res = prods.map(function(item, index) {\u003Cbr\u003E return \u003Cp key={index}\u003E\u003Cbr\u003E \u003Cspan\u003E{item.name}\u003C\u002Fspan\u003E:\u003Cbr\u003E \u003Cspan\u003E{item.cost}\u003C\u002Fspan\u003E\u003Cbr\u003E \u003C\u002Fp\u003E;\u003Cbr\u003E });\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {res}\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EВ компоненте App дан следующий массив:\u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E\u003Cp\u003Econst users = [\u003Cbr\u003E {id: 1, name: 'user1', surn: 'surn1', age: 30},\u003Cbr\u003E {id: 2, name: 'user2', surn: 'surn2', age: 31},\u003Cbr\u003E {id: 3, name: 'user3', surn: 'surn3', age: 32},\u003Cbr\u003E];\u003Cbr\u003E\u003Cp\u003EВыведите элементы этого массива в виде списка ul.\u003Cbr\u003E","\u003Cp\u003EВ приведенном выше коде в атрибут key мы добавляли порядковый номер элемента в массиве. На самом деле такая практика является плохой и ей следует пользоваться лишь в крайнем случае.\u003Cbr\u003EДело в том, что при сортировке массива у элементов станут другие ключи и React не сможет правильно отслеживать связь между элементами массива и соответствующими тегами.\u003Cbr\u003EБолее хорошей практикой будет добавить каждому продукту уникальный идентификатор, который и будет использоваться в качестве ключа.\u003Cbr\u003EДавайте в нашем массиве каждому продукту добавим свойство id с номером нашего продукта:\u003Cbr\u003E\u003Cp\u003EКлючи через id\u003Cbr\u003E\u003Cp\u003Econst prods = [\u003Cbr\u003E {id: 1, name: 'product1', cost: 100},\u003Cbr\u003E {id: 2, name: 'product2', cost: 200},\u003Cbr\u003E {id: 3, name: 'product3', cost: 300},\u003Cbr\u003E];\u003Cbr\u003E","\u003Cp\u003EТеперь в качестве ключа используем этот id:\u003Cbr\u003E\u003Cp\u003EКлючи через id\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const res = prods.map(function(item) {\u003Cbr\u003E return \u003Cp key={item.id}\u003E\u003Cbr\u003E \u003Cspan\u003E{item.name}\u003C\u002Fspan\u003E:\u003Cbr\u003E \u003Cspan\u003E{item.cost}\u003C\u002Fspan\u003E\u003Cbr\u003E \u003C\u002Fp\u003E;\u003Cbr\u003E });\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E {res}\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EМодифицируйте предыдущую задачу, добавив в массив id и использовав их в качестве значений атрибута key.\u003Cbr\u003E\u003Cp\u003E№2\u003Cbr\u003E","\u003Cp\u003EВывод в таблицу\u003Cbr\u003E","\u003Cp\u003EПусть у нас опять дан наш массив с продуктами:\u003Cbr\u003E\u003Cp\u003EВывод в таблицу\u003Cbr\u003E\u003Cp\u003Econst prods = [\u003Cbr\u003E {name: 'product1', cost: 100},\u003Cbr\u003E {name: 'product2', cost: 200},\u003Cbr\u003E {name: 'product3', cost: 300},\u003Cbr\u003E];\u003Cbr\u003E\u003Cp\u003EДавайте выведем элементы нашего массива в виде HTML таблицы:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const rows = prods.map(function(item) {\u003Cbr\u003E return \u003Ctr key={item.id}\u003E\u003Cbr\u003E \u003Ctd\u003E{item.name}\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E{item.cost}\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E;\u003Cbr\u003E });\u003Cbr\u003E \u003Cbr\u003E return \u003Ctable\u003E\u003Cbr\u003E \u003Ctbody\u003E\u003Cbr\u003E {rows}\u003Cbr\u003E \u003C\u002Ftbody\u003E\u003Cbr\u003E \u003C\u002Ftable\u003E;}\u003Cbr\u003E","\u003Cp\u003EДобавим заголовки колонок нашей таблице:\u003Cbr\u003E\u003Cp\u003EВывод в таблицу\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const rows = prods.map(function(item) {\u003Cbr\u003E return \u003Ctr key={item.id}\u003E\u003Cbr\u003E \u003Ctd\u003E{item.name}\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E{item.cost}\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E;\u003Cbr\u003E });\u003Cbr\u003E \u003Cbr\u003E return \u003Ctable\u003E\u003Cbr\u003E \u003Cthead\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003Eназвание\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003Eстоимость\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003C\u002Fthead\u003E\u003Cbr\u003E \u003Ctbody\u003E\u003Cbr\u003E {rows}\u003Cbr\u003E \u003C\u002Ftbody\u003E\u003Cbr\u003E \u003C\u002Ftable\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EСделайте проект «Новостная лента», это сайт представляющий собой поток информации, как лента в «ВК», нужно сделать его, используя 5 компонент\u003Cbr\u003EМеню (для ссылок использовать объект как в прошлом дз)\u003Cbr\u003EКатегории (правое меню, для пунктов использовать массив)\u003Cbr\u003EОсновная лента (просто место, куда будут помещаться все посты), содержит в себе только компоненты «Пост»\u003Cbr\u003EПост (отдельный компонент, с фоткой и текстом, будет заполнять собой ленту)\u003Cbr\u003EПодвал (копирайт и год)\u003Cbr\u003EДля образца – использовать ленту в ВК\u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E","\u003Cp\u003EВ компоненте App дан следующий массив:\u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E\u003Cp\u003Econst users = [\u003Cbr\u003E {id: 1, name: 'user1', surn: 'surn1', age: 30},\u003Cbr\u003E {id: 2, name: 'user2', surn: 'surn2', age: 31},\u003Cbr\u003E {id: 3, name: 'user3', surn: 'surn3', age: 32},\u003Cbr\u003E];\u003Cbr\u003E\u003Cp\u003EВыведите элементы этого массива в виде таблицы table так, чтобы каждое поле объекта попало в свой тег td. Сделайте заголовки колонок вашей таблицы.\u003Cbr\u003E","\u003Cp\u003EОбсуждение id для объектов\u003Cbr\u003E","\u003Cp\u003EКак вы уже знаете, в массиве объектов должны присутствовать уникальные id. Давайте разберемся, откуда они берутся.\u003Cbr\u003EМассивы объектов могут иметь два происхождения: либо они присланы нам сервером, либо сгенерированы на клиенте (то есть в браузере).\u003Cbr\u003EДанные, присланные нам сервером, как правило хранились там в базе данных. Базы данных (БД) бывают вида SQL (например, mySQL, PostgreSQL) или NoSQL (например, MongoDB).\u003Cbr\u003ESQL базы данных, как правило имеют числовые id, автоматически расставляемые базой данных по возрастанию.\u003Cbr\u003ENoSQL базы данных, как правило, имеют id, представляющие собой случайные уникальные строки. Предполагается, что эти строки не имеют совпадений (коллизий) у двух элементов массива.\u003Cbr\u003EУникальность id достигается за счет достаточно большой длины случайных строк - настолько больших, что вероятность совпадения двух строк будет близка в нулю.\u003Cbr\u003EПри этом, чем больше данных в БД, тем больше вероятность коллизии. Задача программиста состоит в том, чтобы заранее прикинуть объем данных и определить оптимальную длину случайных строк, чтобы вероятность коллизий была минимальна (достаточно мала, чтобы считаться приемлемой).\u003Cbr\u003E\u003Cp\u003Eid для объектов\u003Cbr\u003E","\u003Cp\u003EПусть из SQL базы данных нам пришел следующий массив объектов:\u003Cbr\u003E\u003Cp\u003EПроблемы с добавлением данных\u003Cbr\u003E\u003Cp\u003Econst prods = [\u003Cbr\u003E {id: 1, name: 'product1', cost: 100},\u003Cbr\u003E {id: 2, name: 'product2', cost: 200},\u003Cbr\u003E {id: 3, name: 'product3', cost: 300},\u003Cbr\u003E];\u003Cbr\u003E\u003Cp\u003EКак вы видите, id нумеруются по порядку. Однако, нам следует учитывать, что числа могут иметь пропуски, к примеру, после 3-го может сразу идти 5-тый или 6-той. Из-за этого наш клиентский скрипт не может знать, какой будет следующий id (в нашем случае это не обязательно 4).\u003Cbr\u003EНовые id создаются базой данных сервера. Это может вызвать некоторые проблемы при работе на клиенте. Суть в следующем: представим, что с помощью формы мы добавили новый элемент в наш массив. Однако, мы не можем просто взять и добавить данные из формы - ведь мы не знаем какой id будет у нового элемента!\u003Cbr\u003EНам нужно будет отправить запрос на сервер, чтобы он дал нам следующий по порядку id, и только затем добавить элемент в наш массив объектов. Это вызовет задержку с отображением данных на экране: пока данные придут на сервер, пока сервер пришлет нам их обратно - пройдет некоторое время.\u003Cbr\u003E","\u003Cp\u003EПусть теперь массив объектов имеет следующий вид:\u003Cbr\u003E\u003Cp\u003EId в виде строк\u003Cbr\u003E\u003Cp\u003Econst prods = [\u003Cbr\u003E {id: 'GYi9G_uC4gBF1e2SixDvu', name: 'product1', cost: 100},\u003Cbr\u003E {id: 'IWSpfBPSV3SXgRF87uO74', name: 'product2', cost: 200},\u003Cbr\u003E {id: 'JAmjRlfQT8rLTm5tG2m1L', name: 'product3', cost: 300},\u003Cbr\u003E];\u003Cbr\u003E\u003Cp\u003EКак вы видите, теперь наши id представляют собой случайные уникальные строки. Такой массив мог быть получен с NoSQL базы данных, либо просто сгенерирован на клиенте.\u003Cbr\u003EОпять представим себе ситуацию с добавлением в этот массив данных формы. В этом случае задержки не возникнет - при добавлении данных мы просто сгенерируем случайную строку, которая и будет новым id.\u003Cbr\u003E","\u003Cp\u003EК счастью, нам не нужно самостоятельно придумывать код, генерирующий случайные id. К нашим услугам есть готовые библиотеки. Например, библиотека nanoid, генерирующая случайные строки, либо библиотека react-uuid, генерирующая UUID.\u003Cbr\u003E\u003Cp\u003EГенерация id\u003Cbr\u003E\u003Cp\u003EТак как используемая библиотека для генерации id может быть разная, далее в уроках я буду использовать следующую функцию-оболочку:\u003Cbr\u003E\u003Cp\u003Efunction id() {\u003Cbr\u003E \u002F\u002F тут генерация id\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EПредполагается, что эта функция генерирует id удобным вам способом.\u003Cbr\u003E","\u003Cp\u003EМы можем использовать нашу функцию следующим образом при объявлении массива объектов:\u003Cbr\u003E\u003Cp\u003EИспользование функции id()\u003Cbr\u003E\u003Cp\u003Econst prods = [\u003Cbr\u003E {id: id(), name: 'product1', cost: 100},\u003Cbr\u003E {id: id(), name: 'product2', cost: 200},\u003Cbr\u003E {id: id(), name: 'product3', cost: 300},\u003Cbr\u003E];\u003Cbr\u003E","\u003Cp\u003EНеправильно генерировать id прямо в атрибуте, вот так:\u003Cbr\u003E\u003Cp\u003EНеправильное использование id()\u003Cbr\u003E\u003Cp\u003Econst res = prods.map(function(prod) {\u003Cbr\u003E return \u003Cp key={id()}\u003E\u003Cbr\u003E \u003Cspan\u003E{prod.name}\u003C\u002Fspan\u003E\u003Cbr\u003E \u003Cspan\u003E{prod.cost}\u003C\u002Fspan\u003E\u003Cbr\u003E \u003C\u002Fp\u003E;\u003Cbr\u003E});\u003Cbr\u003E\u003Cp\u003EПричины этого будут вам понятны в следующих уроках. Пока просто имейте ввиду, что так делать неправильно и никогда так не делайте.\u003Cbr\u003E","\u003Cp\u003EУстановите и изучите обе библиотеки (nanoid, react-uuid). Сгенерируйте с их помощью случайные строки. \u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E","\u003Cp\u003EРеализуйте функцию id() с помощью библиотеки nanoid.\u003Cbr\u003EРеализуйте функцию id() с помощью библиотеки react-uuid.\u003Cbr\u003E\u003Cp\u003E№2\u003Cbr\u003E","\u003Cp\u003EСделайте массив объектов с юзерами, сгенерировав им id с помощью нашей функции.\u003Cbr\u003E\u003Cp\u003E№3\u003Cbr\u003E","\u003Cp\u003EВведение в стейты\u003Cbr\u003E","\u003Cp\u003EСледующая концепция, которую мы с вами разберем, называется стейты. Стейты представляют собой реактивные переменные компонентов.\u003Cbr\u003EРеактивность означает, что при изменении стейта изменения произойдут во всех местах, где этот стейт используется. Технически это достигается путем перендерования всего компонента при изменении какого-либо стейта.\u003Cbr\u003E\u003Cp\u003EВведение в стейты\u003Cbr\u003E","\u003Cp\u003EПреимущества\u003Cbr\u003E\u003Cp\u003EМанипулировать DOM (Document Object Model) вручную может быть сложно, трудоемко и чревато ошибками, в то время как использование состояний в React дает ряд преимуществ:\u003Cbr\u003EАбстракция: React абстрагируется от сложности манипулирования DOM, предоставляя декларативный синтаксис для создания и обновления компонентов. Это облегчает рассуждения о состоянии приложения и изменениях, которые необходимо внести.\u003Cbr\u003EПовторное отображение: Когда состояние компонента меняется, React автоматически перерисовывает компонент и обновляет представление компонента, чтобы отразить новое состояние. Это означает, что нам не нужно беспокоиться о ручном обновлении представления компонента или обработке событий и взаимодействий.\u003Cbr\u003EВиртуальный DOM: React использует виртуальное представление DOM, называемое Virtual DOM, которое оптимизирует обновление компонента, сравнивая состояние и параметры компонента до и после, а затем React обновляет только тот компонент, который изменился, тем самым повышая производительность компонента.\u003Cbr\u003EПроизводительность: Алгоритм виртуального DOM в React позволяет оптимизировать обновления и минимизировать количество необходимых манипуляций с DOM, что может помочь улучшить производительность приложения.\u003Cbr\u003E","\u003Cp\u003EНачало работы\u003Cbr\u003E\u003Cp\u003Eimport { useState } from 'react';\u003Cbr\u003E\u003Cp\u003EДля использования стейтов для начала необходимо импортировать функцию useState:\u003Cbr\u003E\u003Cbr\u003EФункция useState параметром принимает начальное значение стейта, а своим результатом возвращает специальный массив из двух элементов. В первом элементе массива будет хранится текущее значение стейта, а во втором - функция для изменения стейта.\u003Cbr\u003EДля корректной работы стейтов их нельзя менять напрямую, а следует пользоваться функцией для их изменения - только тогда будет работать реактивность.\u003Cbr\u003E","\u003Cp\u003EПример\u003Cbr\u003E\u003Cp\u003Eimport { useState } from 'react';\u003Cbr\u003E\u003Cp\u003EВоспользуемся функцией useState для создания стейта, содержащего название продукта:\u003Cbr\u003E\u003Cbr\u003EВ результате константа state будет представлять собой массив, в первом элементе которого будет хранится название продукта, а во втором - функция для изменения названия:\u003Cbr\u003E\u003Cp\u003E const state = useState('prod');\u003Cbr\u003E const name = state[0]; \u002F\u002F Переменная состояния, сейчас - prod\u003Cbr\u003E const setName = state[1]; \u002F\u002F Функция для изменения состояния\u003Cbr\u003E","\u003Cp\u003EПример\u003Cbr\u003E\u003Cp\u003EДля краткости обычно не используют промежуточную константу для массива, а используют деструктуризацию (да так можно):\u003Cbr\u003E\u003Cbr\u003EДавайте теперь выведем наш стейт с именем продукта в какой-нибудь верстке:\u003Cbr\u003E\u003Cp\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cspan\u003E{name}\u003C\u002Fspan\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E\u003Cp\u003Econst [name, setName] = useState('prod');\u003Cbr\u003E","\u003Cp\u003EПример\u003Cbr\u003E\u003Cp\u003EСоберем все вместе и получим следующий код:\u003Cbr\u003E\u003Cp\u003Eimport { useState } from 'react';\u003Cbr\u003E\r\nfunction App() {\u003Cbr\u003E const [name, setName] = useState('prod');\u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cspan\u003E{name}\u003C\u002Fspan\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\r\nexport default App\u003Cbr\u003E\u003Cp\u003EЕсли запустить этот код, то изначально в диве выведется начальное значение стейта, в нашем случае 'prod'. При изменение стейта через функцию setName и верстке автоматически появится новое значение стейта.\u003Cbr\u003E","\u003Cp\u003EПопробуем реактивность\u003Cbr\u003E\u003Cp\u003EСделаем кнопку, по нажатию на которую будет изменяться наш стейт:\u003Cbr\u003E\u003Cp\u003Ereturn \u003Cdiv\u003E\u003Cbr\u003E \u003Cspan\u003E{name}\u003C\u002Fspan\u003E\u003Cbr\u003E \u003Cbutton onClick={clickHandler}\u003Ebtn\u003C\u002Fbutton\u003E\u003Cbr\u003E\u003C\u002Fdiv\u003E;\u003Cbr\u003E\u003Cp\u003EВ обработчике клика используем функцию setName, чтобы установить продукту новое название:\u003Cbr\u003E\u003Cp\u003E function clickHandler() {\u003Cbr\u003E setName('xxxx');\u003Cbr\u003E }\u003Cbr\u003E","\u003Cp\u003EПопробуем реактивность\u003Cbr\u003E\u003Cp\u003EСоберем весь наш код вместе. Получится, что после нажатия на кнопку текст в спане мгновенно поменяется на новое значение:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E let [name, setName] = useState('prod');\u003Cbr\u003E \u003Cbr\u003E function clickHandler() {\u003Cbr\u003E setName('xxxx');\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cspan\u003E{name}\u003C\u002Fspan\u003E\u003Cbr\u003E \u003Cbutton onClick={clickHandler}\u003Ebtn\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EПопробуем реактивность\u003Cbr\u003E\u003Cp\u003EИспользование отдельных функций-обработчиков не обязательно. Можно использовать анонимную стрелочную функцию:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E let [name, setName] = useState('prod');\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cspan\u003E{name}\u003C\u002Fspan\u003E\u003Cbr\u003E \u003Cbutton onClick={() =\u003E setName('xxxx')}\u003Ebtn\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EСделаем два стейта\u003Cbr\u003E\u003Cp\u003EДавайте сделаем один стейт для названия продукта, а второй - для цены и кнопки для изменения наших стейтов:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E let [name, setName] = useState('prod');\u003Cbr\u003E let [cost, setCost] = useState('1000');\u003Cbr\u003E \u003Cbr\u003E function clickHandler1() {\u003Cbr\u003E setName('xxxx');\u003Cbr\u003E }\u003Cbr\u003E function clickHandler2() {\u003Cbr\u003E setCost('2000');\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cspan\u003E{name}\u003C\u002Fspan\u003E\u003Cbr\u003E \u003Cspan\u003E{cost}\u003C\u002Fspan\u003E\u003Cbr\u003E \u003Cbr\u003E \u003Cbutton onClick={clickHandler1}\u003Ebtn1\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003Cbutton onClick={clickHandler2}\u003Ebtn2\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EСделаем два стейта\u003Cbr\u003E\u003Cp\u003EПерепишем на сокращенный вариант:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E let [name, setName] = useState('prod');\u003Cbr\u003E let [cost, setCost] = useState('1000');\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cspan\u003E{name}\u003C\u002Fspan\u003E\u003Cbr\u003E \u003Cspan\u003E{cost}\u003C\u002Fspan\u003E\u003Cbr\u003E \u003Cbr\u003E \u003Cbutton onClick={() =\u003E setName('xxxx')}\u003Ebtn1\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003Cbutton onClick={() =\u003E setCost('2000')}\u003Ebtn2\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EЛогическое значение в стейте\u003Cbr\u003E\u003Cp\u003EДавайте сделаем стейт inCart, который будет показывать, в корзине продукт или нет:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E let [inCart, setInCart] = useState(false);\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EПусть значение false значит, что продукт не в корзине, а значение true - что в корзине. Выведем информацию об этом с помощью тернарного оператора:\u003Cbr\u003E\u003Cp\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cspan\u003E{inCart ? 'в корзине' : 'не в корзине'}\u003C\u002Fspan\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E","\u003Cp\u003EЛогическое значение в стейте\u003Cbr\u003E\u003Cp\u003EА теперь сделаем кнопку, по нажатию на которую продукт добавится в корзину:\u003Cbr\u003E\u003Cp\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cspan\u003E{inCart ? 'в корзине' : 'не в корзине'}\u003C\u002Fspan\u003E\u003Cbr\u003E \u003Cbutton onClick={() =\u003E setInCart(true)}\u003Ebtn\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E\u003Cp\u003EА как сделать так, чтобы первое нажатие добавляло товар в корзину, а второе убирало?\u003Cbr\u003E","\u003Cp\u003EЛогическое значение в стейте\u003Cbr\u003E\u003Cp\u003EМодифицируем наш код так, чтобы первое нажатие на кнопку добавляло в корзину, а второе - удаляло из нее:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E let [inCart, setInCart] = useState(false);\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cspan\u003E{inCart ? 'в корзине' : 'не в корзине'}\u003C\u002Fspan\u003E\u003Cbr\u003E \u003Cbutton onClick={() =\u003E setInCart(!inCart)}\u003Ebtn\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EСчетчик\u003Cbr\u003E\u003Cp\u003EДавайте сделаем счетчик кликов по кнопке:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E let [count, setCount] = useState(0);\u003Cbr\u003E \u003Cbr\u003E function clickHandler() {\u003Cbr\u003E setCount(count + 1);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cspan\u003E{count}\u003C\u002Fspan\u003E\u003Cbr\u003E \u003Cbutton onClick={clickHandler}\u003E+\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EКак сделать сокращенный вариант?\u003Cbr\u003E","\u003Cp\u003EСчетчик\u003Cbr\u003E\u003Cp\u003EМожно избавится от функции-обработчика, заменив ее анонимной стрелочной функцией:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E let [count, setCount] = useState(0);\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cspan\u003E{count}\u003C\u002Fspan\u003E\u003Cbr\u003E \u003Cbutton onClick={() =\u003E setCount(count + 1)}\u003E+\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003E1. Пусть вы хотите отображать на экране данные юзера: его имя, фамилию, возраст. Сделайте для этого соответствующие стейты с начальными значениями.\u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E\u003Cp\u003E2. Сделайте кнопки для изменения имени и фамилии.\u003Cbr\u003E\u003Cp\u003E3. Добавьте еще один стейт, который будет показывать, забанен пользователь или нет. Выведите информацию об этом в каком-нибудь теге.\u003Cbr\u003E\u003Cp\u003E4. Сделайте кнопку, нажатие на которую будет банить пользователя и кнопку, нажатие на которую будет разбанивать пользователя.\u003Cbr\u003E","\u003Cp\u003EМодифицируйте предыдущую задачу так, чтобы из двух кнопок всегда была видна только соответствующая. То есть, если пользователь забанен, то видна кнопка для разбанивания, а если не забанен - для забанивания.\u003Cbr\u003E\u003Cp\u003E№2\u003Cbr\u003E","\u003Cp\u003EСделайте еще две кнопки. Пусть первая кнопка увеличивает возраст на единицу, а вторая - уменьшает его.\u003Cbr\u003E\u003Cp\u003E№3\u003Cbr\u003E","\u003Cp\u003EРабота с инпутами\u003Cbr\u003E","\u003Cp\u003EРабота с инпутами\u003Cbr\u003E\u003Cp\u003EРабота с инпутами в React происходит с помощью стейтов. Каждому инпуту назначается свой стейт, содержащий в себе value инпута.\u003Cbr\u003EДавайте посмотрим на примере. Пусть у нас есть инпут и стейт к нему, пока не связанные:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const [value, setValue] = useState('text');\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cinput \u002F\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EРабота с инпутами\u003Cbr\u003E\u003Cp\u003EДавайте к атрибуту value инпута привяжем нас стейт:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const [value, setValue] = useState('text');\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cinput value={value} \u002F\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EВ таком случае получится, что при изменении стейта, реактивно поменяется и текст инпута.\u003Cbr\u003E","\u003Cp\u003EРабота с инпутами\u003Cbr\u003E\u003Cp\u003EЭто, однако, дает интересный побочный эффект: теперь при запуске кода в браузере в инпуте невозможно поменять текст! Почему: потому что при вводе текста в инпут не меняется стейт value, соответственно, и текст в инпуте не должен меняться.\u003Cbr\u003EОткройте консоль браузера - вы увидите в ней предупреждение React. Это предупреждение указывает нам, что мы привязали стейт к инпуту, но тем самым заблокировали инпут.\u003Cbr\u003E","\u003Cp\u003EРабота с инпутами\u003Cbr\u003E\u003Cp\u003EДавайте сделаем так, чтобы в наш инпут можно было вводить текст. Для этого нужно сделать так, чтобы при вводе изменялся наш стейт на текущее значение инпута.\u003Cbr\u003EДля начала для этого нужно навесить на инпут событие onChange:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const [value, setValue] = useState('text');\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cinput value={value} onChange={handleChange} \u002F\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EДанное событие в React ведет себя по-другому по сравнению с чистым JS. В React оно срабатывает сразу же по изменению инпута. То есть при вводе или удалении символа.\u003Cbr\u003E","\u003Cp\u003EРабота с инпутами\u003Cbr\u003E\u003Cp\u003EДавайте теперь добавим обработчик нашего события. В этом обработчике мы должны прочитать текущий текст инпута и установить его в стейт с помощью функции setValue.\u003Cbr\u003EПроблема в том, что this данной функции не будет указывать на наш инпут - такова особенность React. Чтобы получить элемент, в котором случилось событие, нам необходимо использовать event.target:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const [value, setValue] = useState('text');\u003Cbr\u003E \u003Cbr\u003E function handleChange(event) {\u003Cbr\u003E console.log(event.target); \u002F\u002F ссылка на DOM элемент инпута\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cinput value={value} onChange={handleChange} \u002F\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EРабота с инпутами\u003Cbr\u003E\u003Cp\u003EА теперь запишем текст инпута в наш стейт вытащив его из event.target.value:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const [value, setValue] = useState('text');\u003Cbr\u003E \u003Cbr\u003E function handleChange(event) {\u003Cbr\u003E setValue(event.target.value);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cinput value={value} onChange={handleChange} \u002F\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EРабота с инпутами\u003Cbr\u003E\u003Cp\u003EТеперь мы сможем вводить текст в инпут. При этом стейт value всегда будет содержать текущий текст инпута.\u003Cbr\u003EМы можем легко убедится в этом. Выведем содержимое нашего текста в абзац. В этом случае при вводе текста в инпут введенный текст будет автоматически появляться в абзаце:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const [value, setValue] = useState('');\u003Cbr\u003E \u003Cbr\u003E function handleChange(event) {\u003Cbr\u003E setValue(event.target.value);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cinput value={value} onChange={handleChange} \u002F\u003E\u003Cbr\u003E \u003Cp\u003Etext: {value}\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EСокращаем\u003Cbr\u003E\u003Cp\u003EМожем переписать на более компактный вариант с анонимной стрелочной функцией:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const [value, setValue] = useState('');\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cinput value={value} onChange={event =\u003E setValue(event.target.value)} \u002F\u003E\u003Cbr\u003E \u003Cp\u003Etext: {value}\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EИзменение данных при выводе\u003Cbr\u003E\u003Cp\u003EПусть мы будем вводить в инпут число. Давайте сделаем так, чтобы по мере ввода числа в инпут в абзац выводился квадрат вводимого числа:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const [value, setValue] = useState(0);\u003Cbr\u003E \u003Cbr\u003E function handleChange(event) {\u003Cbr\u003E setValue(event.target.value);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cinput value={value} onChange={handleChange} \u002F\u003E\u003Cbr\u003E \u003Cp\u003E{value ** 2}\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EИспользуем функцию\u003Cbr\u003E\u003Cp\u003EНе обязательно совершать некие операции над стейтом прямо на выводе. Можно воспользоваться функцией:\u003Cbr\u003E\u003Cp\u003Efunction square(num) {\u003Cbr\u003E return num ** 2;\u003Cbr\u003E}\u003Cbr\u003E\r\nfunction App() {\u003Cbr\u003E const [value, setValue] = useState(0);\u003Cbr\u003E \u003Cbr\u003E function handleChange(event) {\u003Cbr\u003E setValue(event.target.value);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cinput value={value} onChange={handleChange} \u002F\u003E\u003Cbr\u003E \u003Cp\u003E{square(value)}\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EНесколько инпутов\u003Cbr\u003E\u003Cp\u003EПусть у нас есть два инпута, в которые будут вводится числа. Давайте сделаем так, чтобы по мере ввода в абзац выводилась сумма двух инпутов:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const [value1, setValue1] = useState(0);\u003Cbr\u003E const [value2, setValue2] = useState(0);\u003Cbr\u003E \u003Cbr\u003E function handleChange1(event) {\u003Cbr\u003E setValue1(+event.target.value);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function handleChange2(event) {\u003Cbr\u003E setValue2(+event.target.value);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cinput value={value1} onChange={handleChange1} \u002F\u003E\u003Cbr\u003E \u003Cinput value={value2} onChange={handleChange2} \u002F\u003E\u003Cbr\u003E \u003Cp\u003Eresult: {value1 + value2}\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EВыводы\u003Cbr\u003E\u003Cp\u003EТаким образом, для работы любого инпута нам нужно следующее: создать стейт для этого инпута, привязать стейт к атрибуту value инпута, навесить событие onChange на инпут, в обработчике события менять стейт инпута на его текст.\u003Cbr\u003EДанные операции нужно будет проводить с каждым инпутом. То есть, если у вас два инпута, то у вас будет два стейта и две функции-обработчика события onChange.\u003Cbr\u003E","\u003Cp\u003EСделайте два инпута. Пусть текст первого инпута выводится в первый абзац, а текст второго инпута - во второй абзац.\u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E","\u003Cp\u003EДан инпут. Дан абзац. Сделайте так, чтобы при вводе текста в инпут, в абзаце выводилось количество введенных в инпут символов.\u003Cbr\u003E\u003Cp\u003E№2\u003Cbr\u003E","\u003Cp\u003EДан инпут и абзац. В инпут вводится возраст пользователя. Сделайте так, чтобы при наборе текста, в абзаце автоматически появлялся год рождения пользователя. (использовать функцию)\u003Cbr\u003E\u003Cp\u003E№3\u003Cbr\u003E","\u003Cp\u003EДан инпут и абзац. В инпут вводятся градусы Фаренгейта. Сделайте так, чтобы при наборе текста, в абзаце автоматически выполнялась конвертация в градусы Цельсия. (использовать функцию)\u003Cbr\u003E\u003Cp\u003E№4\u003Cbr\u003E","\u003Cp\u003EДаны 5 инпутов. Сделайте так, чтобы при вводе чисел в наши инпуты в абзац выводилось среднее арифметическое введенных чисел.\u003Cbr\u003E\u003Cp\u003E№5\u003Cbr\u003E","\u003Cp\u003EОбработка данных формы\u003Cbr\u003E","\u003Cp\u003EОбработка данных формы\u003Cbr\u003E\u003Cp\u003EВ предыдущем уроке мы делали так, чтобы при вводе символа в инпут в абзаце мгновенно появлялся результат. Это, конечно же, смотрится красиво, но имеет недостаток.\u003Cbr\u003EПредставим себе, что нам нужно сделать некоторую \"тяжелую\", ресурсоемкую операцию. Не очень оптимально делать ее на каждый ввод символа - лучше дождаться окончательного ввода данных и потом выполнить нужную операцию один раз и результат вывести в абзац.\u003Cbr\u003EДля этого нам нужно ввести кнопку, по нажатию на которую будет совершаться наша ресурсоемкая операция. В таком случае у нас опять каждому инпуту будет соответствовать свой стейт, плюс еще один стейт нам нужен для записи результата операции и отображения его на экран.\u003Cbr\u003E","\u003Cp\u003EОбработка данных формы\u003Cbr\u003E\u003Cp\u003EПосмотрим на примере. Пусть у нас есть два инпута и кнопка. По нажатию на кнопку давайте найдем сумму чисел, введенных в инпуты.\u003Cbr\u003EРеализуем сразу в сокращенном виде:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const [value1, setValue1] = useState(0);\u003Cbr\u003E const [value2, setValue2] = useState(0);\u003Cbr\u003E const [result, setResult] = useState(0);\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cinput value={value1} onChange={event =\u003E setValue1(event.target.value)} \u002F\u003E\u003Cbr\u003E \u003Cinput value={value2} onChange={event =\u003E setValue2(event.target.value)} \u002F\u003E\u003Cbr\u003E \u003Cbr\u003E \u003Cbutton onClick={() =\u003E setResult(Number(value1) + Number(value2))}\u003Ebtn\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003Cp\u003Eresult: {result}\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EДаны два инпута, две кнопки и абзац. Пусть в инпуты вводятся числа. По нажатию на первую кнопку найдите сумму чисел, а по нажатию на вторую кнопку - произведение. Результат выводите в абзац.\u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E","\u003Cp\u003EДаны два инпута, кнопка и абзац. Пусть в инпуты вводятся даты в формате 31-12-2025. По нажатию на кнопку найдите разницу между датами в днях и результат выведите в абзац.\u003Cbr\u003E\u003Cp\u003E№2\u003Cbr\u003E","\u003Cp\u003EМодифицируйте предыдущую задачу так, чтобы по умолчанию в инпутах стояла текущая дата.\u003Cbr\u003E\u003Cp\u003E№3\u003Cbr\u003E","\u003Cp\u003EРабота с textarea\u003Cbr\u003E","\u003Cp\u003EРабота с textarea\u003Cbr\u003E\u003Cp\u003EДавайте теперь научимся работать с многострочным полем ввода textarea. В React для удобства работа с ним сделана похожа на работу с текстовым инпутом. В отличие от чистого JS, в React в textarea не нужен закрывающий тег, а его текст следует размещать в атрибуте value.\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const [value, setValue] = useState('');\u003Cbr\u003E \u003Cbr\u003E function handleChange(event) {\u003Cbr\u003E setValue(event.target.value);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Ctextarea value={value} onChange={handleChange} \u002F\u003E\u003Cbr\u003E \u003Cp\u003E{value}\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EРабота с textarea\u003Cbr\u003E\u003Cp\u003EВ сокращенной форме:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const [value, setValue] = useState('');\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Ctextarea value={value} onChange={event =\u003E setValue(event.target.value)} \u002F\u003E\u003Cbr\u003E \u003Cp\u003E{value}\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EРабота с чекбоксами\u003Cbr\u003E","\u003Cp\u003EРабота с чекбоксами\u003Cbr\u003E\u003Cp\u003EРабота с чекбоксами также осуществляется по схожему принципу, только вместо атрибута value мы указываем атрибут checked. Если в этот атрибут передать true - то чекбокс будет отмечен, а если false - не будет отмечен:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cinput type=\"checkbox\" checked={true} \u002F\u003E отмечен\u003Cbr\u003E \u003Cinput type=\"checkbox\" checked={false} \u002F\u003E не отмечен\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EРабота с чекбоксами\u003Cbr\u003E\u003Cp\u003EОбычно в атрибут checked передается стейт, содержащий логическое значение:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const [checked, setChecked] = useState(true);\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cinput type=\"checkbox\" checked={checked} \u002F\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EРабота с чекбоксами\u003Cbr\u003E\u003Cp\u003EТак же, как и при работе с инпутами, если жестко задать значение атрибута checked - состояние чекбокса нельзя будет сменить. Для корректной работы будем по изменению чекбокса менять его стейт на противоположное ему значение:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const [checked, setChecked] = useState(true);\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cinput type=\"checkbox\" checked={checked} onChange={() =\u003E setChecked(!checked)} \u002F\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EРабота с чекбоксами\u003Cbr\u003E\u003Cp\u003EДавайте выведем состояние чекбокса в абзац, используя тернарный оператор:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const [checked, setChecked] = useState(true);\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cinput type=\"checkbox\" checked={checked} onChange={() =\u003E setChecked(!checked)} \u002F\u003E\u003Cbr\u003E \u003Cp\u003Eсостояние: {checked ? 'отмечен' : 'не отмечен'}\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EЧекбоксы и условный рендеринг\u003Cbr\u003E\u003Cp\u003EДавайте сделаем так, чтобы в зависимости от отметки чекбокса, на экран выводился либо один кусочек кода, либо другой. Используем для этого условный рендеринг:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const [checked, setChecked] = useState(true);\u003Cbr\u003E \u003Cbr\u003E let message;\u003Cbr\u003E if (checked) {\u003Cbr\u003E message = \u003Cp\u003Eсообщение 1\u003C\u002Fp\u003E;\u003Cbr\u003E } else {\u003Cbr\u003E message = \u003Cp\u003Eсообщение 2\u003C\u002Fp\u003E;\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cinput type=\"checkbox\" checked={checked} onChange={() =\u003E setChecked(!checked)} \u002F\u003E\u003Cbr\u003E \u003Cdiv\u003E{message}\u003C\u002Fdiv\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EДан чекбокс, кнопка и абзац. По клику на кнопку, если чекбокс отмечен, выведите в абзац текст приветствия с пользователем, а если не отмечен - текст прощания.\u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E","\u003Cp\u003EС помощью трех чекбоксов попросите пользователя выбрать языки, которые он знает: html, css и js. Результат выбора по каждому языку выводите в отдельные абзацы.\u003Cbr\u003E\u003Cp\u003E№2\u003Cbr\u003E","\u003Cp\u003EДан чекбокс. С помощью чекбокса спросите у пользователя, если ли ему уже 18 лет. Если чекбокс отмечен, покажите пользователю следующий блок кода:\u003Cbr\u003E\u003Cp\u003E№3\u003Cbr\u003E\u003Cp\u003E\u003Cdiv\u003E\u003Cbr\u003E \u003Ch2\u003EУра, вам уже есть 18\u003C\u002Fh2\u003E\u003Cbr\u003E здесь расположен контент только для взрослых\u003Cbr\u003E \u003C\u002Fp\u003E\u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cp\u003EА если чекбокс не отмечен - то следующий:\u003Cbr\u003E\u003Cp\u003E\u003Cdiv\u003E\u003Cbr\u003E увы, вам еще нет 18 лет:(\u003Cbr\u003E \u003C\u002Fp\u003E\u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E","\u003Cp\u003EДан чекбокс и абзац. Если чекбокс отмечен, пусть абзац будет видимым на экране, а если не отмечен - спрячьте его.\u003Cbr\u003E\u003Cp\u003E№4\u003Cbr\u003E","\u003Cp\u003EРабота с селектами\u003Cbr\u003E","\u003Cp\u003EРабота с селектами\u003Cbr\u003E\u003Cp\u003EДавайте теперь займемся выпадающими списками select. Работа с ними также практически не отличается от работы с инпутами и чекбоксами.\u003Cbr\u003EПусть у нас есть вот такой селект:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cselect\u003E\u003Cbr\u003E \u003Coption\u003Etext1\u003C\u002Foption\u003E\u003Cbr\u003E \u003Coption\u003Etext2\u003C\u002Foption\u003E\u003Cbr\u003E \u003Coption\u003Etext3\u003C\u002Foption\u003E\u003Cbr\u003E \u003Coption\u003Etext4\u003C\u002Foption\u003E\u003Cbr\u003E \u003C\u002Fselect\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EРабота с селектами\u003Cbr\u003E\u003Cp\u003EДавайте обеспечим его работу средствами React:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const [value, setValue] = useState('');\u003Cbr\u003E \u003Cbr\u003E function handleChange(event) {\u003Cbr\u003E setValue(event.target.value);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cselect value={value} onChange={handleChange}\u003E\u003Cbr\u003E \u003Coption\u003Etext1\u003C\u002Foption\u003E\u003Cbr\u003E \u003Coption\u003Etext2\u003C\u002Foption\u003E\u003Cbr\u003E \u003Coption\u003Etext3\u003C\u002Foption\u003E\u003Cbr\u003E \u003Coption\u003Etext4\u003C\u002Foption\u003E\u003Cbr\u003E \u003C\u002Fselect\u003E\u003Cbr\u003E ваш выбор: {value}\u003Cbr\u003E \u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EАтрибуты value\u003Cbr\u003E\u003Cp\u003EПусть теперь у нас в тегах option есть атрибуты value:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cselect\u003E\u003Cbr\u003E \u003Coption value=\"1\"\u003Etext1\u003C\u002Foption\u003E\u003Cbr\u003E \u003Coption value=\"2\"\u003Etext2\u003C\u002Foption\u003E\u003Cbr\u003E \u003Coption value=\"3\"\u003Etext3\u003C\u002Foption\u003E\u003Cbr\u003E \u003C\u002Fselect\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EАтрибуты value\u003Cbr\u003E\u003Cp\u003EВ таком случае из-за наличия атрибутов value в стейт будут попадать именно их значения, а не тексты тегов option. Можно убедится в этом, выведя результат выбора в абзац:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const [value, setValue] = useState('');\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cselect value={value} onChange={(event) =\u003E setValue(event.target.value)}\u003E\u003Cbr\u003E \u003Coption value=\"1\"\u003Etext1\u003C\u002Foption\u003E\u003Cbr\u003E \u003Coption value=\"2\"\u003Etext2\u003C\u002Foption\u003E\u003Cbr\u003E \u003Coption value=\"3\"\u003Etext3\u003C\u002Foption\u003E\u003Cbr\u003E \u003C\u002Fselect\u003E\u003Cbr\u003E ваш выбор: {value}\u003Cbr\u003E \u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EАтрибуты value\u003Cbr\u003E\u003Cp\u003EРазделить текст option и его значение может быть удобно: текст тега мы можем менять как нам угодно, при этом в нашем скрипте результат выбора будет обрабатываться по значению атрибута value, которые останется неизменным.\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const [value, setValue] = useState('');\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cselect value={value} onChange={event =\u003E setValue(event.target.value)}\u003E\u003Cbr\u003E \u003Coption value=\"1\"\u003Etext1\u003C\u002Foption\u003E\u003Cbr\u003E \u003Coption value=\"2\"\u003Etext2\u003C\u002Foption\u003E\u003Cbr\u003E \u003Coption value=\"3\"\u003Etext3\u003C\u002Foption\u003E\u003Cbr\u003E \u003C\u002Fselect\u003E\u003Cbr\u003E {value === '1' && 'вы выбрали первый пункт'}\u003Cbr\u003E {value === '2' && 'вы выбрали второй пункт'}\u003Cbr\u003E \u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E;}\u003Cbr\u003E\u003Cp\u003EТеперь, если мы изменим тексты option, то работа скрипта не нарушится - ведь она привязана к значению атрибута value.\u003Cbr\u003E","\u003Cp\u003EСделайте выпадающий список городов. Сделайте также абзац, в который будет выводиться выбор пользователя.\u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E","\u003Cp\u003EС помощью выпадающего списка предложите пользователю выбрать к какой возрастной группе он относится: от 0 до 12 лет, от 13 до 17, от 18 до 25, либо старше 25 лет.\u003Cbr\u003EВ зависимости от выбранной группы вывести на страницу: Младшая группа, Средняя группа, Взрослая группа, Пожилая группа.\u003Cbr\u003E\u003Cp\u003E№2\u003Cbr\u003E","\u003Cp\u003EРабота с radio\u003Cbr\u003E","\u003Cp\u003EРабота с radio\u003Cbr\u003E\u003Cp\u003EРабота с радиокнопочками radio несколько отличается, к примеру, от тех же чекбоксов. Проблема в том, что у нескольких радио будет один и тот же стейт, но разные value.\u003Cbr\u003EПоэтому работа происходит следующем образом: каждой радиокнопке в атрибут value записывают свое значение, а в атрибут checked - специальное условие, которое проверяет, равен ли стейт определенному значению. Если равен - радиокнопочка станет отмеченной, а если не равен - будет не отмеченной.\u003Cbr\u003E","\u003Cp\u003EРабота с radio\u003Cbr\u003E\u003Cp\u003EВот реализация описанного:\u003Cbr\u003E\u003Cp\u003Efunction App() {\u003Cbr\u003E const [value, setValue] = useState(1);\u003Cbr\u003E \u003Cbr\u003E function changeHandler(event) {\u003Cbr\u003E setValue(event.target.value);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E return \u003Cdiv\u003E\u003Cbr\u003E \u003Cinput type=\"radio\" name=\"radio\" value=\"1\"\u003Cbr\u003E checked={value === '1' ? true : false}\u003Cbr\u003E onChange={changeHandler}\u003Cbr\u003E \u002F\u003E\u003Cbr\u003E \u003Cinput type=\"radio\" name=\"radio\" value=\"2\"\u003Cbr\u003E checked={value === '2' ? true : false}\u003Cbr\u003E onChange={changeHandler}\u003Cbr\u003E \u002F\u003E\u003Cbr\u003E \u003Cinput type=\"radio\" name=\"radio\" value=\"3\"\u003Cbr\u003E checked={value === '3' ? true : false}\u003Cbr\u003E onChange={changeHandler}\u003Cbr\u003E \u002F\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EДаны 3 радиокнопки. Дан абзац. Сделайте так, чтобы значение выбранной радиокнопки выводилось в этот абзац.\u003Cbr\u003E\u003Cp\u003E№1\u003Cbr\u003E","\u003Cp\u003EС помощью радиокнопок спросите у пользователя его любимый язык программирования. Выведите его выбор в абзац. Если выбран язык JavaScript, похвалите пользователя.\u003Cbr\u003E\u003Cp\u003E№2\u003Cbr\u003E","\u003Cp\u003EПрактика со стейтами\u003Cbr\u003E","\u003Cp\u003EПрактика со стейтами\u003Cbr\u003E\u003Cp\u003EСоздайте простой компонент переключателя, который отображает кнопку и сообщение. При нажатии на кнопку сообщение должно измениться с \"включено\" на \"выключено\" и наоборот. Сообщение должно выводиться разными цветами. Используйте state для отслеживания текущего состояния.\u003Cbr\u003E","\u003Cp\u003EПрактика со стейтами\u003Cbr\u003E\u003Cp\u003EСоздайте простой компонент смены темы, который позволяет пользователям включать и выключать светлую тему. Используйте state для отслеживания текущего состояния темы.\u003Cbr\u003E","\u003Cp\u003EПрактика со стейтами\u003Cbr\u003E\u003Cp\u003EСоздайте простой компонент светофора, который отображает текущее состояние светофора с помощью state и переключается по кнопке.\u003Cbr\u003E","\u003Cp\u003EПрактика со стейтами\u003Cbr\u003E\u003Cp\u003EСоздайте простой компонент калькулятора, который позволяет пользователям выполнять основные арифметические операции с использованием состояния.\u003Cbr\u003E","\u003Cp\u003EПрактика со стейтами\u003Cbr\u003E\u003Cp\u003EСоздайте викторину: Создайте компонент викторины, который отображает серию вопросов и отслеживает оценку пользователя. Компонент должен использовать состояние для отслеживания текущего вопроса, ответов пользователя и итоговой оценки.\u003Cbr\u003E"],href:"\u002Finformatika\u002Fyazyk-programmirovaniya-javascript-2",href_category:"\u002Finformatika",date:1677730074,related:[{id:213898,name:"Стандартные функции. Сортировка данных в Excel",href:"\u002Finformatika\u002Fstandartnye-funktsii-sortirovka-dannyh-v-excel",jpg:"jpg\u002F213898"},{id:327590,name:"Программа VirtualBox",href:"\u002Finformatika\u002Fprogramma-virtualbox",jpg:"jpg\u002F327590"},{id:206108,name:"Мікроконтролерна система цифрової ідентифікації персоналу для ЧДУ ім. П. Могили",href:"\u002Finformatika\u002Fmkrokontrolerna-sistema-tsifrovo-dentifkats-personalu-dlya",jpg:"jpg\u002F206108"},{id:579779,name:"Курс веб-разработка. Редактируемая главная страница",href:"\u002Finformatika\u002Fkurs-veb-razrabotka-redaktiruemaya-glavnaya-stranitsa",jpg:"jpg\u002F579779"},{id:302598,name:"Массивы. Одномерные массивы целых чисел",href:"\u002Finformatika\u002Fmassivy-odnomernye-massivy-tselyh-chisel",jpg:"jpg\u002F302598"},{id:101391,name:"Операционная система Windows",href:"\u002Finformatika\u002Foperatsionnaya-sistema-windows-86",jpg:"jpg\u002F101391"},{id:205505,name:"Электрондық кестеде формула, функцияларды қолдану",href:"\u002Finformatika\u002Felektrondy-kestede-formula-funktsiyalardy-oldanu",jpg:"jpg\u002F205505"},{id:189381,name:"Области действия идентификаторов",href:"\u002Finformatika\u002Foblasti-deystviya-identifikatorov",jpg:"jpg\u002F189381"},{id:116919,name:"Подходы к понятию информации и измерению информации. Информационные объекты различных видов",href:"\u002Finformatika\u002Fpodhody-k-ponyatiyu-informatsii-i-izmereniyu-1",jpg:"jpg\u002F116919"},{id:262554,name:"Анимация. Ван Гог",href:"\u002Finformatika\u002Fanimatsiya-van-gog",jpg:"jpg\u002F262554"},{id:378433,name:"Microinvest Склад Pro. Установка сервера MS SQL 2008R2 Express",href:"\u002Finformatika\u002Fmicroinvest-sklad-pro-ustanovka-servera-ms",jpg:"jpg\u002F378433"},{id:607558,name:"Парадигмы программирования. Концепции ООП",href:"\u002Finformatika\u002Fparadigmy-programmirovaniya-kontseptsii-oop",jpg:"jpg\u002F607558"},{id:239867,name:"Прототип АИС Путевка. Регистрация",href:"\u002Finformatika\u002Fprototip-ais-putevka-registratsiya-1",jpg:"jpg\u002F239867"},{id:580565,name:"Розпізнавання. Загальні алгоритми навчання",href:"\u002Finformatika\u002Frozpznavannya-zagaln-algoritmi-navchannya",jpg:"jpg\u002F580565"},{id:7585,name:"Автоматизоване розроблення веб-сайтів. Огляд сервісів Веб 2.0",href:"\u002Finformatika\u002Favtomatizovane-rozroblennya-veb-saytv-oglyad-servsv",jpg:"jpg\u002F7585"},{id:578060,name:"Rest API 2",href:"\u002Finformatika\u002Frest-api-2",jpg:"jpg\u002F578060"},{id:249018,name:"Обзор прикладных статистических программ для решения задач социологического исследования. Лекция 1-2",href:"\u002Finformatika\u002Fobzor-prikladnyh-statisticheskih-programm-dlya-resheniya",jpg:"jpg\u002F249018"},{id:236306,name:"О бизнес возможностях. Международный Интернет-магазин слитков Золота",href:"\u002Finformatika\u002Fo-biznes-vozmozhnostyah-mezhdunarodnyy-internet-magazin",jpg:"jpg\u002F236306"},{id:225870,name:"Измерение информации. Единицы измерения информации",href:"\u002Finformatika\u002Fizmerenie-informatsii-edinitsy-izmereniya-informatsii",jpg:"jpg\u002F225870"},{id:239518,name:"Анимация в Power Point",href:"\u002Finformatika\u002Fanimatsiya-v-power-point",jpg:"jpg\u002F239518"},{id:145620,name:"Технологии построения локальных компьютерных сетей",href:"\u002Finformatika\u002Ftehnologii-postroeniya-lokalnyh-kompyuternyh-setey",jpg:"jpg\u002F145620"},{id:164207,name:"Одномерные массивы. В помощь сдающему ЕГЭ",href:"\u002Finformatika\u002Fodnomernye-massivy-v-pomoshch-sdayushchemu-ege",jpg:"jpg\u002F164207"},{id:169874,name:"Подпрограммы (язык C, лекция 7)",href:"\u002Finformatika\u002Fpodprogrammy-yazyk-c-lektsiya-7",jpg:"jpg\u002F169874"},{id:202976,name:"Двовимірні масиви",href:"\u002Finformatika\u002Fdvovimrn-masivi",jpg:"jpg\u002F202976"},{id:346044,name:"Шифрование и дешифрование матрицы с использованием ключа",href:"\u002Finformatika\u002Fshifrovanie-i-deshifrovanie-matritsy-s-ispolzovaniem",jpg:"jpg\u002F346044"},{id:335664,name:"Проектирование АСУ ТП . Принципы проектирования",href:"\u002Finformatika\u002Fproektirovanie-asu-tp-printsipy-proektirovaniya",jpg:"jpg\u002F335664"},{id:20940,name:"Posters NPE",href:"\u002Finformatika\u002Fposters-npe",jpg:"jpg\u002F20940"},{id:281893,name:"Мультипрограмування на основі переривань. Системні виклики. Лекція 2.2",href:"\u002Finformatika\u002Fmultiprogramuvannya-na-osnov-pererivan-sistemn-vikliki",jpg:"jpg\u002F281893"}],navigation:{next:"\u002Fyurisprudentsiya\u002Fmezhdunarodno-pravovaya-ohrana-intellektualnoy-sobstvennosti-tema",next_name:"Международно- правовая охрана интеллектуальной собственности (тема 6)",prev:"\u002Finformatika\u002Fproektirovanie-i-realizatsiya-dizayn-maketa-kinoteatra",prev_name:"Проектирование и реализация дизайн-макета кинотеатра"}}}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:J,SITE_HOST:"mypreza.com",SITE_LANG:K,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:J,short_name:a,description:a,lang:K,start_url:"\u002F?standalone=true",display:"standalone",background_color:l,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:R,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:b,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable","h2","#d53032",10,11,"#ffffff","Язык программирования JavaScript","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","div","images_before","category","both",88,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E",1,"Информатика",13,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))</script><script type="module" src="/_nuxt/entry.0d6add34.js" crossorigin></script></body>
</html>