[музыка]

дамы и господа Всех приветствую Меня

зовут владилен Минин и я уже в it больше

11 лет 7 лет из которых я преподаю

JavaScript а также являюсь сейчас

основателем онлайн университета result

University который полностью посвящён

именно качественному образованию по

front-end разработке и я решил что

русскому Ютубу не хватает хорошего

базового материала именно по react react

- это библиотека которая написана на

языке JavaScript которая позволяет как

знаете из строительных блоков строить

пользовательский интерфейс и это самое

популярное сейчас решение на рынке труда

то есть эта технология требуется для

того чтобы устроиться на работу её чаще

всего спрашивают и многие начинающие

сталкиваются с тем что есть

некачественные материалы А вот эти вот

большие школы Они продают всё это дорого

и там очень плохое качество Поэтому я

решил что это будет большой ролик

который позволит вам вообще с нуля без

каких-то начальных знаний Ну кроме там

JavaScript вы кстати тоже можете найти

его его на моём канале полностью

погрузиться в react и понять как эти

базы работают Вы можете оценить вообще

качество подачи материала и способ Да

которым я доношу информацию и Обучаю вас

потому что это как раз-таки и есть

демонстрация того подхода и принципа

которым мы пользуемся в res Out

University То есть все программы которые

вы видите в этом университете они

построены Вот примерно по такому

принципу что мы прямо наглядно

показываем вам как это работает Ну и

дальше Вы уже можете применять это на

практике у нас безусловно там сделан

полный акцент на том что вы 20% как бы

времени Учите теорию на небольших

роликах а не на этих трёхчасовой

материалах а потом значит вы практикуете

большую часть времени и вас сопровождают

опытные наставники мы отбираем только

лучших это midle ПС уровень то есть эти

опытные действующие специалисты они

напрямую передают вам знания и

сопровождают вас именно до результата а

результатом является устройство на

работу что касается вообще этого курса

Сейчас вы с нуля будете смотреть как

работает react как он устроен там как вы

можете начать свои Первые шаги в нём

делать И это безусловно не весь контент

который есть по реакту в описании к

этому ролику вы найдёте ссылку где я

приложил дополнительные материалы

которые позволят вам понять А что вообще

делать дальше с этими знаниями то есть

во-первых там вы найдёте полный roadmap

который показывает какие есть технологии

в самом реакте которые потом ещё нужно

будет доучиться какие есть сторонние

библиотеки и также там есть полный

список актуальных технологий по разным

направлениям там от стейт менеджмента до

тестирования который вы просто можете

забрать себе и изучать уже по этой

инструкции также в этой ссылки я заложил

ещё дополнительный контент который

показывает а с какими задачами Вы можете

столкнуться на реальной работе на уровне

midle june или june П И как эти задачи

можно решить с помощью react на этих

примерах я вам хочу показать что вас

ожидает на реальном рынке труда и что

вам нужно выучить для того чтобы эти

задачи решить контент очень полезный

поэтому вы можете бесплатно его забрать

и если вам понравится подход который я

даю в этом ролике если вам понравится

материал то будем рады пригласить вас на

платную программу которая уже

профессиональная даёт знания нужные для

устройства на работу а наш HR отдел

позволит вам комфортно устроиться на

работу или попасть в компании партнёры

поэтому я желаю вам успехов на этом

этапе впереди вас ждёт очень много

интересного и полезного контента

внимательно его изучайте Кстати да что

касается ещё рекомендаций по изучению

вначале вы смотрите а тот материал

который я даю и в идеале вам нужно не

просто смотреть А ещё ставить на паузу и

самому писать ручками чем больше вы

будете писать ручками и решать задач или

просто хотя бы знакомиться с синтаксисом

и понимать как это работает сами это

реализовывать результат от просмотра

этого видео будет колоссальным Поэтому

Ещё раз желаю вам успехов и Давайте

переходить к обучению Итак давайте

теперь разбираться с тем что же такое

react И для этого Я перешёл на

официальный сайт технологии это react то

DF Кстати это новый обновлённый сайт

потому что до этого он по-моему

находился на reactjs.org В общем это уже

устаревший считается документация на

этом сайте есть информация про то что

такое react как с ним работать что он из

себя представляет Ну то есть вы можете

полистать я вам естественно Всё буду

сейчас рассказывать и показывать

Единственное что вот на сайте мы видим

главное определение реакта и нам в базе

очень важно понимать что он из себя

представляет это кстати его логотип

часто вы его сможете встретить в общем

здесь написано что это библиотека для

веб-разработки и для разработке нативных

пользовательских интерфейсов значит если

немного расшифровать это определение то

в первую очередь мы видим что react -

это

библиотека которая кстати написана на

языке JavaScript и это большой его плюс

Кстати если вы вдруг не очень хорошо

понимаете JS сейчас будет

подсказок альный курс на момент конца

двадцать третьего года по JS очень

хорошей будет базой для этого ролика и в

общем разработчики берут JavaScript

разрабатывают набор инструментов которые

нам позволяют автоматизировать или

упростить разработку Ну непосредственно

там в данном случае веб интерфейсов

веб-интерфейс - это сайты любые сайты

причём которые вы видите в мобильных

устройствах браузерах и так далее ну и

также разработка нативных

пользовательских интерфейсов под этим

подразумевается что с помощью реакта Вы

можете разрабатывать мобильные

приложения есть такая технология как

react native которая берёт и там потом

партией в общем понимая Как работает вот

эта библиотека Вы можете делать

довольно-таки много с точки зрения

интерфейсов но Фишка в том что react как

раз-таки отвечает за визуализацию и как

Сейчас мы посмотрим он нам сильно

упрощает разработку и путём того что

react работает с компонентами по сути у

нас будет большое количество

строительных блоков с помощью которых мы

сможем создавать там сайты ну Правильнее

будет говорить интерфейсы всё-таки любой

сложности и вот на этом этапе Давайте

закончим с сайтом остальное будет всё в

практике на примерах Я бы хотел

показать один пример на котором вы

сможете понять В чём разница между

например использованием чистого

JavaScript Ну и непосредственно react

потому что тут JavaScript тут JavaScript

Зачем нам ещё что-то нужно делать И для

этого значит я написал очень простой

сайт Как видите дизайн потрясающий

абсолютно Ну даже анимации какие-то

добавил в общем смотрите да То есть

можно кликать

и показывается там новый контент в табе

то есть в целом сайт довольно-таки

простой но Давайте посмотрим как он

реализован а написал я его на чистом

JavaScript чит Т что нас здесь

интересует Ну это стили

неинтересно с точки зрения Бади вот у

нас присутствует пустой тег UL То есть

это весь контент нашего сайта потому что

всё остальное генерируется уже с помощью

JavaScript дальше Я создаю контент А ну

это просто массив И после этого Вот мне

необходимо получается взять пробежаться

по этому массиву вывести его в дом

дерева как я это делаю получаю контейнер

потом вызываю функцию render Content Ну

то есть я пробегаю по контенту Каждый

элемент преобразовывать в

строчку вот здесь обычная строчка с

элементом Le Ну и всё и дальше складываю

это всё в контейнер А для того чтобы всё

это было

кликабельно значит Я обращаюсь к

контейнеру добавляю ему слушатель Клик

дальше я проверяю вот таким вот ифом что

Клик был совершён по правильному месту

Да потому что там можно попасть не

только вли но и внутренние элементы

непосредственно самого списка и в случае

если вс-таки я попал по элементу ли

тогда я удаляю классы а классы удаляются

также через контейнер мы получаем все

элементы ли прибегаем и для каждого

элемента удаляем класс и собственно

говоря только после этого мы добавляем

уже активный класс да то есть за счёт

этого вот поется такой

эффект кстати Раз уж мы рассмотрели

javas как реализован то вот это подход

что на самом деле отличается от того что

мы видим в реакте Да но это такое

последовательное выполнение команд Окей

Теперь давайте покажу тоже самое на ре

опять же пока вы не будете там понимать

весь код для этого и есть этот курс

после этого вы сможете намного сложнее

вещи делать Вам будет всё понятно но в

общем и целом Вот как это выглядит то

есть абсолютно тотже самый

функционал умещается вот в 29 к здесь у

меня ушло Ну тут 991

минус 46 Можете посчитать Короче больше

тут Получилось Да по функционалу видите

что абсолютно тоже самое Ну кроме того

что я стилем поменял цвет синий Да и

если здесь разобрать что происходит есть

абсолютно тот же самый контент что и был

в JavaScript Но дальше идёт так

называемый уже декларативный подход

подход Код да который вы видите то есть

мы создаём некоторое состояние для того

какой элемент будет активным Мы также

делаем Map по аналогии с тем что было в

JavaScript вот мы выводим Ту же самую

структуру но только здесь мы уже не

мучаемся там с этими кликами мы сразу

говорим что конкретно Если по этому

элементу Бул Клик мы просто меняем

состояние а не меняем что-то в коде за

это как раз-таки отвечает react потому

что он сам по себе реактивный и в этом

заключается его фишка что мы Просто

описываем некоторые

состояния как здесь и меняя их react уже

за нас перерисовываю интерфейс то есть

мы думаем здесь про логику а не про то

как это ещё реализовать в JS Поэтому вот

такая вот Разница есть можете с этим

поиграться но опять же мы сейчас всё

поэтапно будем разбирать и вот на этом

этапе следующий момент который я бы

хотел вам

объяснить Это то а как вы можете

стартануть вообще с

приложением react новым И как вы можете

в общем начать на нём разрабатывать

потому что есть несколько способов

А смотрите первый самый простой Вы

можете в

а строчки поисковый запрос где делается

написать react New в любом браузере

кстати нажать Enter и вы автоматически

попадаете на кон Sandbox это такой

онлайн-редактор кода где

можно сразу же разрабатывать и за нас

генерируется вот такой вот базовый

проект на react Ну который вот если вы

зайдёте в систему вы сможете уже

как-нибудь там редактировать и управлять

всем

этим вот видите тут всё обновляется

показывается результат и так далее То

есть это самый простой способ Ну ко

опять же Это просто один из онлайн

редакторов кода который можно

использовать хорошо для прототипирования

или для практики какой-то но зачастую

вам потребуется всё-таки и будет удобнее

разрабатывать на react локально то есть

для этого я буду в этом курсе

использовать такой редактор кода как vs

код Вы можете его найти здесь

в по такому запросу и первая ссылка

ведёт на данный редактор кода можете его

скачать стабильную версию и всё у вас

будет примерно тоже самое что и у меня

опять же существует другие редакторы

Если вы пользовались там каким-нибудь

вебшторм например пожалуйста это

абсолютно будет подходить он тоже

прекрасно работает с react но я буду

показывать опять же вот на этом это

бесплатное

решение помимо этого также я хочу

предупредить

что дальше нам потребуется ещё такая

программа как not JS Если вы ещё не

установили её Зайдите на этот сайт как я

показал сейчас и установите Вот эту вот

рекомендованную для большинства

пользователей ве просто его скачиваете и

устанавливаете как обычную программу

этого будет достаточно после этого

откроете терминал в macos это терминал

называется там в Windows cmd по-моему

или Shell точно уже не помню но смысл в

том что одинаковые команды будут для

начала можете прописать Note - V вот у

меня восемнадцатая версия стоит нас

конкретно будет интересовать такая

утилита как npm пишете npm Window V если

выдаёт Всё круто можно продолжать ть

опять же на канале У меня есть вводный

курс быстрый по nots постараюсь его

приложить если что вы можете в поиске

его найти там прям пошагово подробно

тоже рассказываю как всё это устроено

Чтобы у вас было понимание как

разрабатывать классное приложение и

Теперь смотрите для того чтобы нам

локально развернуть какой-либо проект на

react в начале Нам нужно будет

определиться с папкой я с помощью

команды CD перейду в папочку vs код и

здесь у нас есть на самом деле два

способа создания реакта Ну из простых Я

имею в виду смотрите есть такая

технология которая называется Create

react App у неё тоже есть свой сайт

Create react updf здесь можно посмотреть

документацию тоже по технологии Как

стартануть с ней но в целом всё что нам

потребуется это прописать вот такую вот

команду npx Create react App My App

значит здесь Давайте только мы правим не

My допустим inro давайте так вот

inro Project это просто будет название

папки где будет храниться уже весь

проект который относится к react значит

что происходит здесь мы Обращаемся по

сути к пакету который

называется локально вле устанавливается

иже

зано про где мы сможем сразу же

разрабатывать на react там уже настроена

вся инфраструктура нам не нужно уже ни

про что думать мы просто садимся и пишем

код это довольно-таки удобная

фича сейчас мы его установим то есть по

факту сейчас идёт установка зависимости

для работы react там

всякие ну если вы работали до этого то

это называется папка НОД модуля В общем

для того чтобы поддерживать

инфраструктуру и смотрите мы можем

перейти

react int

Project и дальше нам необходимо открыть

Это в нашем редакторе то есть я могу

написать Вот так вот код Точка И это у

меня

открывает ВС код Ну либо просто там

нажимаете

файл открыть папку и ищете Где вы е

па sce то здесь как раз таки

присутствует вот

базовая потом разберусь что это такое А

там какие-то проблемы с Дена базовая

структура для

react Ну и в принципе всё для того чтобы

стартануть Вам необходимо прописать

команду Старт как это выглядит здесь

наверху есть кнопочка создать терминал

он создаётся прямо в папке Где мы

находимся и мы просто пишем

nm после этого открывается Local Host

3000 и мы попадаем на вот главную

страницу ВС которую можно редактировать

опять же сейчас не про это речь потому

что буду показывать всё

поэтапно чтобы остановить процесс

нажимаем Ctrl C Ну и всё

останавливается сразу же отвечу на

вопрос Зачем нам вообще какие-то вот эти

вот огромное количество зависимостей

какие-то библиотеки там модули и по

факту то что мы делаем называется ну

создание

инфраструктуры процесса есть один

нюанс который специфичен для реакта суть

заключается в том что вот у нас есть как

бы JavaScript

файлы там есть код JavaScript который

понимает браузер если мы посмотрим на

какой-нибудь react код то здесь вы

увидите кое-что необычное например Это

то что мы без каких-либо кавычек просто

пишем здесь HTML теги по факту мы

естественно в этом курсе разм Как это

работает я вам покажу что происходит

после билда буквально вот скоро уже

достаточно по курсу но суть в том что

такой синтаксис браузер не понимает и

для того чтобы всё это работало мы

вначале должны пропустить это через

инструменты которые в данном случае

предлагает например Create react и

только после этого уже как бы

скомпилированный код jav скриптовый

отдать браузеру чтобы он работал да но

вот вы должны понимать что вот это не

совсем JavaScript

подробности дальше так и это

спойлеры значит то что вас ждёт потом и

следующий покажу момент как можно

сгенерировать по-другому приложение

которое мы будем использовать в этом

курсе есть такая технология как вид

очень

быстрый инструмент для сборки проектов

Вот можете тоже про него почитать у

него шаблоны очень мощный и быстрый

инструмент и например мы здесь можем

работать с react или Rea typescript но

опять же это продвинутая уже тема про

неё подробнее в большой программе мы там

даём контент а потому что в рамках туба

сложно такое дать вот и всё что нам

необходимо сделать Мы также переходим в

консоль здесь я выйду на верхний уровень

и напишу

npm L кстати вот эта вот собака latest

это означает что Ну есть же разные

версии пакетов там технология же

обновляется Да её постоянно там допили

так вот мы говорим что здесь мы работаем

как бы с последней версией доступной всё

нажимаю

Enter нам говорят что нам необходимо

установить вид здесь я нажимаю

Yes Project name давайте мы назовём его

react

Intro и дальше стрелочками Мы выбираем

ну нас интересует в данном случае react

здесь смотрите мы не выбираем там

typescript или tyt сево мы выбираем

JavaScript просто здесь я нажимаю

Enter всё После этого мы переходим в

папку react Intro дальше очень важно

дальше мы делаем npm

install

inst для того чтобы установить список

зависимо Потому что если в случае

с сам для нас их ставил Здесь нам нужно

их вручную поставить Вот и давайте тоже

открою я его в ВС

коде здесь мы видим немножечко иную

структуру и файлы но при этом суть

остаётся той же самой то есть

присутствует вот этот App GSX уже опять

же все эти там вещи мы разберём с вами в

курсе Почему так как это всё работает

вот и

HTML с другой стороны опять же всё это

Рабочая история и нам чтобы запустить

Этот проект открываю консоль здесь и

пишу npm Run

Def открывается Loc Host

5173 перехожу видите выглядит это

немножечко иначе Вот Но зато кнопку

можно нажимать и она будет работать а

такая вот вводная получается значит

попрактиковаться

для проекта который подготовил чтобы

было ещ проще нам нужно переходить к

следующей теме но сейчас будет маленькая

презентация потому что нам необходимо

разобраться А что такое компоненты Итак

для того чтобы нам прям эффективно

приходить к основному контенту данного

курса в первую очередь необходимо

разобраться А что такое react компоненты

и это такой как бы философский базовый

подход у библиотеки потому что ВС на

самом деле в м строе на компонентах это

Ключевая его фишка поэтому очень важно

понимать что это такое и как оно

строится Итак что такое компоненты

Давайте сразу же разберём это на

практике значит я зашёл на сайт своего

университета и здесь на главной странице

выбрал те места которые вот по факту мы

разрабатываем как отдельные компоненты

то есть мы можем видеть что отдельный

компонент - это логотип каж ссылочка -

это тоже а какой-либо компонент Да они

одинаковые как бы но видите у них разные

составляющие здесь сейчас мы разберёмся

с этим есть кнопочка она это тоже

отдельный компонент текст заглавный Да

это тоже отдельный компонент Ну и

картинка с текстом это тоже отдельные

компоненты которые могут быть объединены

в другой компонент то есть по сути это

такой строительный блок для интерфейса И

как вы понимаете интерфейс можно

разделить на большое количество этих

строительных

блоков для того чтобы ими было проще

управлять то есть да я немного даже

опередил презентацию ведь действительно

что вам важно понимать Это маленькие

строительные блоки сайта значит какие

есть преимущество вот такого подхода да

Опять же как оппозиция есть например

Монолит Да когда мы всё пишем там в

одном JavaScript файле весь функционал

но с ростом объёма нашего приложения там

или его возможностей в файле становится

сложнее ориентироваться а вот у

компонентов есть определённые

преимущества во-первых они

переиспользовать Понятно В чём вообще

суть этого подхода дальше это разделение

и изоляция логики в этом курсе вы

поймёте подробнее в чём прикол вообще

этого подхода и почему он действительно

классный но смысл в том что мы дробим

как раз-таки вот следующая Да часть

проще разрабатывать Интерфейс Да мы

дробим получается вот какую-нибудь

большую задачу на

маленькие и точечно да разрабатываем

функционал для конкретного элемента

интерфейса и когда мы Вот решаем не

сразу же там задача всего сайта А

конкретно одного локального места это

конечно же намного проще с точки зрения

разработки И тем самым можно допускать

меньше ошибок быстрее разрабатывать и

так далее Вот ну как следствие проще

разрабатывать непосредственно с

использованием

компонентов следующий плюс это то что и

HTML и CSS и JavaScript Они лежат в

одном месте и то есть Представьте Да что

вот вы раздробили ваш сайт такие

маленькие как бы блоки и вам не нужно

там думать где CSS лежит там где

JavaScript вы просто переходите в нужный

необходимый блок быстренько его правите

с точки зрения стилей функционала или

структуры ВС у вас всё работает опять же

в этом вы сечас

Убедитесь соответственно последний плюс

основной - это то что компоненты на

самом деле используются сейчас везде

потому что вы можете встретить это в

других фреймворка таких как angular W

quid Solid там View

А вы сможете это использовать в

мобильной разработке потому что это

очень хорошая практика которая

действительно сейчас используется везде

при построения интерфейсов Теперь

смотрите что касается

зашёл в Яндекс музыку

и есть список треков Да которые у меня

там последние добавлены например И если

мы посмотрим внимательно с точки зрения

Вот именно разработчика фронтенд

разработчика сейчас на этот скриншот то

мы увидим не просто список треков а мы

увидим одинаковые компоненты Но вот я

красненьким подчеркнул верхние опять же

другие тоже относятся к этим компонентам

смысл здесь вот в чём то есть они

одинаковые по своей структуре то есть

видите есть картинка есть текст Есть ну

название трека Да есть автор есть к и

длительность Понятное дело что другой

трек он содержит себе другие данные

но у него точно такая же структура и на

самом деле мы же не будем вручную да

описывать там структуры для каждого

компонента Ну точнее для каждого трека

нет Мы один раз создали этот компонент и

Да передам в него памет того то есть

нужно ли нам отобразить буковку е или

нет но при этом структура вот для такого

компонента она у нас одинаковая и это

позволяет переиспользовать эти

компоненты один раз написав что

существенно упрощает разработку

интерфейсов для того чтобы вы заранее

понимали Примерно как это выглядит здесь

Кстати я показал Как выглядит

одновременно и JavaScript и CSS HTML вот

типичный react компонент это кстати

скриншот из курса Да который мы сейчас

будем проходить и

это простой код который Вы будете

понимать на самом деле там куда более

сложные вещи вот смотрите Да здесь идея

в том что есть CSS мы сразу же да задаём

стилистику для корневого элемента ли

есть JavaScript то есть мы сразу же

описываем какой-то функционал здесь и

есть HTML удобно удобно и Видите какой

маленький Это всего лишь элемент ли но

он при этом принимает параметры

ирисова примерно тоже самое что мы

только что видели с Яндекс

музыкой использование компонентов это

действительно позволяет разделить

интерфейс и намного проще

программировать функционал который от

вас

требуется как я и говорил да react

позволяет создавать

переиспользовать То есть Вам вручную

ничего не нужно будет делать это очень

очень удобно тоже Убедитесь Ну

собственно говоря это я уже перечислил

Да что Всё лежит в одном файле опять же

покажу множество подходов в том числе со

стилистикой это достаточно удобно сразу

же так вот программировать и конечно же

вы должны понимать что чем сложнее

объёмнее там больше будет проект который

вы разрабатываете тем больше и больше

будет виден плюс от использования

компонентов Ну потому что когда

маленький проект его можно просто

написать когда проект Большой там уже

можно легко запутаться Ну и собственно

говоря да Про это тоже уже говорю что

компоненты они используются и в

мобильных приложениях в даже нативной

разработке в том числе там iOS cotl А и

также компоненты используются в других

фреймворка кстати видео на них Вы тоже

можете найти на моём канале Ну ладно мы

сейчас про react короче я думаю что я

вас заинтересовал Я надеюсь что вам

понятно пока и Давайте посмотрим как это

работает на практики потому что впереди

очень много увлекательной и практичной

полезной информации Итак Теперь давайте

раз как же работают компоненты но только

на практике И сейчас мы с вами будем

писать уже полноценный сайт с

использованием

reacts в первую очередь вам необходимо

будет скачать Исходный код данного

проекта он называется 01 react bic

по-моему старт и здесь вы получите вот

такую структуру то есть распакуйте

откроете в коде эту папку и в первую

очередь нам потребуется установить

зависимость ч библиотек с помощью npm то

есть Я просто пишу Здесь npm inst также

и вы делаете Это в консоли и получаете

папку НОД модули и теперь наш проект

готов к работе Давайте сразу же на него

и посмотрим для этого я напишу команду

npm

Run всё это работает на вид То есть он

довольно-таки быстрый и теперь наш

проект доступен на Local

Host

[музыка]

5173 и здесь мы видим потрясающее

абсолютно приложение где написано Hello

react и больше ничего нет но во всяком

случае мы теперь видим что это запущено

И сейчас я хочу разобраться А как вообще

мы в браузере видим Вот эту вот строчку

Как это работает и связано вот с тем

кодом который сейчас есть у нас в

проекте Давайте разбираться У нас есть

папка Source и здесь мы видим Ну

некоторый набор файлов сейчас вот мы не

будем рассматривать Икс CSS и Data это

обычные JavaScript CSS они не относятся

к реакту и Давайте откроем fil main.go

здесь внимание присутствует такое

необычное довольно-таки расширения jsx

не просто GS с ним мы разберёмся немного

позже пока мы видим что здесь

присутствует Ну в принципе более-менее

похожий на JavaScript synxis но как

видите здесь нет никакой информации о

том как выглядит структура нашего

проекта там как HTML теги из этого

складываются То есть просто какой-то

функционал что-то происходит

знакомую штуку можно выпить

здесь можем даже вот

перенести назвать например это То есть

это просто обычный дом

элемент скопировать его и вставить сюда

да то есть так вот немного

[музыка]

декомпозиции на react на самом деле если

посмотреть на другую папочку

Public Прошу прощения не здесь вот он

индекс HTML в паблике если не с витом

создавать А с Create Rea тогда он там

будет в Вите индекс HTML лежит здесь

Давайте мы его откроем То есть это то

что открывается вообще в браузере и где

работает react и вот что мы здесь можем

наблюдать видим title Ну то есть в

принципе знакома HTML структура нам но в

ба также присутствует с ID Root и он

абсолютно пустой но теперь мы понимаем

что вот сюда получается этот элемент мы

забираем и что-то мы делаем дальше с до

он там какой-то OT создаёт И после этого

уже выводится вот э непонятная строчка

сейчас мы с ней разберёмся то есть вот

где будет

инициализировать приложение

виф рассматриваем больше в HTML ничего

нет то есть всё остальное будет

проходить именно в react отлично с этим

я думаю мы разобрались Теперь давайте

разбираться вот с этой строчкой здесь мы

делаем рендер и дальше присутствует

довольно-таки необычный Синтаксис это

как будто бы тег но неизвестный нам Да

он называется App мы его также

импортируем из App GSX если мы его

откроем то наконец-то мы добрались уже

до Ну чего-то понятного это HTML теги

правда Если разобраться сейчас то как

видите они также находятся у нас

в JavaScript в формате GSX То есть

сейчас мы про это поговорим но в любом

случае здесь мы видим структуру что всё

наше приложение - это div и в нём есть

заголовок H1 где написано Hell react

причём если мы добавим например что-то в

заголовок Я нажму сохранить и посмотрим

в браузере То мы видим что вот

появляется этот восклицательный знак

если мы проинспектируйте

вот у на получается есть с ID Root и

дальше то что мы видели в GSX примерно

так это работает то есть больше у нас

таких файлов сейчас нет И теперь

действительно Я хочу прокомментировать А

что это вообще за такой синтаксис потому

что в JavaScript мы не можем писать

просто теги и в действительности это и

не является тегами на самом деле это

специальный который есть в

который функциями которые заложены в

react но так как браузер не понимает

такой

синтаксис Для этого нам нужен bu процесс

то есть для этого у нас там вид сделан

другие сборщики которые на самом деле в

фоне анализирует что мы здесь написали и

дальше преобразовывает это уже в

какой-то код который будет понятен

браузеру и в процессе разработки

действительно если у на есть вот такой

мы его обозначаем с расширением GSX то

есть оно так и называется вот этот

синтаксис по факту это просто обычный

JavaScript Но вот эти теги Они сделаны

для удобства разработки чуть позже по

видео я покажу как на самом деле это

выглядит сейчас не хочу

проект то есть Вид всё это собрал и

дальше уже отобразил в браузере То что

ему Понятно Окей и Давайте попробуем

теперь с этим поработать То есть как я и

говорил до этого react - это библиотека

которая служит для более удобного

создания пользовательских интерфейсов

путём декомпозиции на вот эти вот разные

компоненты Ну и так называемые UI блоки

то есть р интерфейс какие-либо блоки и

соответственно мы можем создавать

какую-то более нежели там заголовок H1

поэтому Давайте попробуем как это мы

можем сделать например для этого сайта Я

хочу создать header Ну то есть

какую-нибудь шапку я в принципе могу так

и начать писать header дальше я нажимаю

Tab в ВС коде Да это просто превращает в

готовый тег Ну и здесь например

там можно написать скажем заголовок

H3 здесь я напишу

University это собственно говоря курс

часть программы из университета который

мы разрабатываем по фнн разработке Ну и

Давайте здесь будет какой-нибудь Спан

там сейчас напишем здесь просто временно

тут будет время забавно что я сказал

временно и про время то есть мы создаём

просто какую-то структуру Да всё это

отображая в нашем а

компоненте смотрим И за счёт того

что у нас прописаны некоторые стили мы

вдруг получаем уже

готовый они не идеальные но скоро мы со

всем этим разберёмся и в элементах Мы

видим что действительно вот теги которые

мы прописали То есть пока я думаю

разработка выглядит Ну довольно-таки

понятным образом Теперь давайте вот э

вот часть нашего приложения оберн в

[музыка]

г Ну и просто здесь будет лежать

заголовок H1 кстати Обратите внимание

что вот

сейчас

завода то есть форматирование не было

соблюдено при этом я нажимаю Command S и

Как видите автоматически у меня

форматирование

а встаёт правильно Да это работает

притер в vs коде То есть вы можете Если

вдруг у вас такого нет поставить это

расширение вот здесь в маркетплейсе

притир называется код

форматер так Main мы сделали Да теперь у

нас получается Чуть более красивые

приятные отступы Ну и всё наше

приложение начинает уже оживать

прекрасно

Однако Как вы понимаете Ну то есть

хранить всю структуру нашего приложения

в одном только компоненте пока это

функция Up Ну не очень удобно потому что

тогда у нас будет очень много кода мы не

сможем разобраться в чём прикол а как

раз-таки опять же react он про такую

молекулярность то есть про декомпозицию

про изоляцию Да различных компонентов и

на этом этапе Давайте разберёмся вот со

второй частью то есть Что происходит

вообще в этом файле У нас есть функция

обычная функция в javas кото что-то нам

возвращает и дальше мы её экспортируем

Кстати я не всегда люблю отдельно писать

такие экспорты мы можем здесь в одну

строчку написать и немножечко сократить

коды но по функционалу это одно и тоже

то есть мы её экспортируем и дальше в

мене мы её получаем и Теперь смотрите

это функция у нас и мы её Превращаем как

бы в г путём Ну добавления вот такого

синтаксиса с треугольными ско

то есть в реакте получается чтобы

создать компонент нужно создать просто

функцию дальше вернуть в этой функции

какой-то шаблон и получится компонент

Давайте попробуем значит для этого вот

например в данном случае мне кажется что

хедер отлично подходит под компонент

который куда-то можно вынести в

отдельное место он логически объединён

функционалом хедера и мне кажется это

правильно Я создаю функцию и здесь я

назову е с большой буквы header сейчас

мы поговорим про нейминг После этого мне

необходимо сделать Return я пишу круглые

скобочки и сюда Вставляю то есть вырезаю

весь этот шаблон и Вставляю сюда опять

же сохраняю видите форматирование У меня

сохраняется и всё хорошо Отлично Теперь

если мы посмотрим на наш проект Мы видим

что РТО у нас пропал Потому

что почему мы не использовали эту

функцию то есть мы её создали но никак

не вызвали и теперь нам нужно вставить

её в правильное место только теперь мы

уже знаем да что функцию нам нужно

превратить в тег поэтому здесь я пишу

header и всё сохраняю сразу же могу

сказать что вот в таких ситуациях можно

использовать сокращённую запись для

этого

тега ровно такие же правила как в

обычном HTML Так теперь давайте

посмотрим работает ли это да И как

Видите вот у нас прекрасно отобразил Р И

если мы посмотрим по структуре опять же

в элементах то есть вот есть этот div

дальше внутренний div дальше header идёт

и Main то есть вместо вот этого

компонента header который мы только что

создали вставляется просто его структура

Да и получается что на этапе разработки

мы вот так вот можем дробить эти

элементы и создавать структуру нашего

приложения теперь Пару слов про

правильный нейминг этих

компонентов смотрите их нужно называть с

большой буквы Это сигнал реакту того что

этот компонент не встроенный там в HTML

или ещё где-либо этот компонент мы

создавали сами поэтому первое самое

важное правило для названия компонентов

это то что они вот именно начинаются с

большой буквы Это позволяет в том числе

как бы вот ну не перепутать те теги

которые есть

встроенные и сразу же на этом этапе Я бы

хотел ещё поработать над структурой

потому что да Безусловно мы сейчас

создали отдельный компонент но он всё

ещё хранится в одном файле и менеджери

это довольно-таки сложно поэтому Давайте

Поработаем над архитектурой для этого я

создам папку в папочке Source Я назову

её

components и здесь я создам новый файл

который назову с большой буквы тоже

header

GSX ещё раз Почему GSX потому что в этом

файле мы используем вот специальный

синтаксис в

реакте так Эр Def мы сделаем да то есть

Нам необходимо экспортировать данный

компонент но при этом в некоторых

проектах вы всё равно можете встретить

такую ситуацию

что скажем файл Да в котором будет

прописан jsx будет с расширением JS Дело

в том что нет какого-то строгого

регламента потому что вот нужно

использовать такое расширение или такое

больше это сделано именно для удобства

разработки то есть вот мы сразу можем

понять что например вот в дате у нас нет

GSX Да потому что это GS а в хедере у

нас есть GSX но если мы даже назовём его

GS в принципе функционал вот этого не

изменится то есть в разных проектах

существуют разные

гайды смотрите дальше мы header

экспортировали теперь нам необходимо его

импортировать То есть я пишу и header

From

header Теперь давайте посмотрим да

Видите Всё у нас работает и вот в доме

мы получаем следующую структуру то есть

ничего не изменилось но теперь видите

из-за изоляции этих

компонентов очень просто смотреть какие

части мы можем изменить как они работают

и как ими управлять

Поэтому я думаю что со статикой мы

разобрались наверное ещё пару слов скажу

про вот эти вот

компоненты мы его используем

в

функци если мы возьмём и продублируйте

посмотрим Мы видим что мы просто

получили дополнительную структуру с

точки зрения хедера конечно Это

неправильно для приложения Да что у нас

несколько вот так вот идёт подряд но тем

не менее Смысл в том что теперь да когда

мы вынесли вообще функционал в отдельный

компонент мы можем использовать этот код

как захотим и где захотим И сколько

захотим и это как раз таки есть огромное

удобство в реакте потому что Теперь у

нас есть такой один строительный блок на

основе которого мы можем вот формировать

целый Ну целое приложение и

переиспользовать его поэтому сейчас мы

будем с этим тоже разбираться подробнее

естественно я удалю все эти лишние

компоненты И как я и говорил то есть

сейчас мы разобрались со статикой Да мы

поняли примерно пока базово как

формировать HTML А что насчёт динамики

как вообще выводить какие-то

динамические значения давайте для этого

Поработаем вфа то

GSX и вот у меня здесь есть Спан да

давайте здесь напишем

допустим

время Сейчас двоеточие и вот здесь вот

нам необходимо вывести Ну что-то

динамическое потому что время оно

постоянно меняется так вот в react есть

специальный синтаксис когда мы находимся

в

GSX здесь мы пишем фигурные скобочки И

на самом деле вот в них мы можем писать

уже любой JavaScript и он будет

интерпретироваться

ретом как что-то динамическое он будет

выводить его в итоге в шаблон то есть

здесь мы пишем то что можно привести к

строке например мы можем здесь сложить

скажем 21 п 21 Угадайте что получится ну

те кто давно смотрит мои ролики

поймут естественно мы здесь получаем 42

и вот на самом деле тут мы можем тепер

действительно попробовать выводить

вообще различные элементы там разли

сущности например деление

умножение какую-нибудь строчку написать

там например вот это вот Давайте лучше

другую например

Hello to upper Case Да мы получаем здесь

Hello то есть Поиграйте с этим поймите

Как это работает в принципе здесь нет

ничего сложного концепция в том что в

фигурных скобках у нас происходит

динамика и как следствие если мы хотим

получить время то мы можем создать

например

а константу Now равно New

Date Ну и сюда мы можем вывести

Now Однако если мы сейчас посмотрим мы

получим ошибку потому что мы передаём

сюда объект он по умолчанию не может

привести его к строке поэтому здесь

Давайте напишем to La Time

string обновляю страницу чтобы ушли эти

все ошибки Вуаля мы получаем текущее

время причём смотрите если я буду

ни то она будет показывать уже другое

время да потому что оно меняется то есть

мы разобрались как выводится здесь

динамика в реакте также я хочу сказать

что безусловно Вот эту вот константу мы

можем создать и внутри этой функции То

есть как бы изолировать тоже этот

функционал пока это база Но чуть позже я

покажу как работать именно уже

с меняющимися величинами более правильно

но тем не менее так може

делать Давайте разберёмся Как работать с

атрибутами потому что по сути Мы сейчас

что-то выводим в сам HTML но также есть

и второй способ вводить вот эту динамику

Давайте Я приведу пример с картинкой вот

у меня в папке Public и у вас тоже есть

лого name svg и мы хотим импортировать

эту картинку Причём я покажу как

правильно её импортировать и вывести вот

допустим вместо этого H3 то есть его я

закомментировать

Здорово что я это показал потому что

смотрите я нажал Command СШ и вот что

произошло то есть мы видите обернули

тоже как раз вот это вот фигурные

скобочки что говорит реакту о том что

дальше будет здесь динамика и просто как

обычный JavaScript мы закомментировать

картинки Мы можем написать следующим

образом

допустим я назову картинку

лого и дальше я говорю Откуда мы её

импортируем учитывая что она лежит в

папочке па то мы здесь ставим просто СШ

и пишем название того что нам нужно

сделать Log SG то есть по факту Мы

работаем с картинкой здесь как с обычным

JavaScript чтобы мы не думали где эта

картинка лежит какой у не правильный

путь когда наш проект будет собираться

он правильно поставили сюда название

файла его путь и всё нам не нужно будет

с этим заморачиваться то есть а с точки

зрения разработки видите довольно-таки

удобно получается и дальше Вот у меня

будет тег Image соответственно вот это

вот мне нужно положить в атрибут Source

и для того чтобы это было динамично Да

потому что мы не можем так вот написать

это будет неправильная картинка Вот то

есть видите тут ошибки должны быть мы

собственно говоря сделаем то же самое то

есть мы в качестве значения для этого

атрибута передаём фигурные скобки и сюда

указываем уже просто лого Теперь если мы

посмотрим всё наша картинка подгрузило И

теперь мы можем уже с ней работать она

нам украшает сайт что касается Альта то

смотрите тоже немного поиграемся с этим

мы можем просто написать здесь

а какой-то альтернативный текст и мы

абсолютно можем использовать это всё в

двойных кабы как мы это делаем в обычном

HTML но вдруг если скажем вот это вот

значение у нас будет

храниться в строчке Да и нам нужно его

вывести то мы абсолютно также можем

сделать вывести сюда строчку либо таким

образом либо вот таким вот образом то

есть так как опять же это лежит уже

внутри фигурных скобок то мы здесь

описываем JavaScript поэтому здесь мы

уже используем эти кавычки вот есть уть

этот момент сечас посмотрим видите

Отт Теперь давайте разберёмся Как мы

можем переиспользовать различные

компоненты и передавать в них параметры

потому что опять же сейчас мы просто

обозначили Куда нужно вставить компонент

но никак с ним не взаимодействуем для

этого немножечко поправим структуру если

я добавлю SE з есть у меня будет

заголовок H3 здес напишу наш подход к

обучению Я честно говоря возьму сайт

своего университета и просто возьму

отсюда

информацию Ну вот отсюда будем брать да

то есть мы поговорим про наш подход к

обучению отсюда будет проще копировать

Итак Теперь давайте разработаем

какую-нибудь структуру например Здесь я

создам список у дальше будет

ли в ли я создам параграф P и вот у меня

здесь будет уже информация вначале будет

что-то в ге Ну и потом просто я буду

описывать текст вот таким вот образом

скажем фильтрация информационных

технологий информации и

технологий Ну я сейчас думаю про то как

про react рассказывать поэтому не сильно

читаю Да больше сосредоточен на

правильного донесение

информации дальше мы можем это

скопировать сейчас я поясню зачем мы всё

это

делаем вставим сюда формат

обучения

это кстати абсолютная

правда так ну и Давайте посмотрим как

это выглядит Вот то есть есть уже тоже

базовая вёрстка благодаря тому что мы

стили описали но теперь мы видим

очевидную проблему Что кода получается

довольно-таки много и он дублирует себя

Потому что Обратите внимание у этого

списка одинаковая абсолютно

структура корневой тегли есть параграф

есть тег STR только

вот данные внутри каждого из этих

элементов списка они отличаются то есть

на самом деле вот это вот чистый

компонент Да который мы как раз-таки

можем вынести и сделать его

универсальным для того чтобы сократить и

упростить нам работу а я создам

отдельную функцию которую назову

например Way To

teach у нас будет функция и здесь Я буду

что-то возвращать в круглых скобках

давайте мы возьмём тут структуру

скопирую и вставлю

сюда и мы уже знаем что теперь вместо

того чтобы описывать вообще

а каждый компонент мы можем превратить

наш компонент именно в ТГ да то есть

ставить его например три

раза если мы сейчас посмотрим то мы

получаем уже три компонента всё клёво

работает с точки зрения вёрстки Вот

только

одна и таже потому что мы пока е не

передавали дополнительных параметров Ну

и никак их не обрабатываем поэтому здесь

выводится статика на самом деле для того

чтобы нам взять данные Я подготовил этот

файл dats и здесь видите есть

именованный экспорт константы вот как

раз-таки ну это массив Да который

содержит в себе объекты у него два

свойст ко мы толь чтоли

и их немножечко больше Поэтому Давайте

просто мы возьмём этот массив

импортируем сейчас

ВТО

GSX импортируем что-то из Data и нас

интересует W то есть опять же Это просто

массив И

теперь как мы передаём параметры в

компонент на самом деле мы просто

придумываем какое-то название как будто

бы это атрибут Ну непосредственно для

этого тега только

комн на Ну например

и давайте пока временно со статикой

поработаем потом перейдём уже к дате

например напишу

11 и дальше передам Деп вот эти вот

названия я сам придумываю

сейчас Деп будет 222 Ну например в таком

формате А здесь давайте так вот сделаем

чтобы нам просто было проще это

вть есть я переда

эмет

в обк который называется опять же

технически Вы можете называть эту штуку

как угодно Хоть даже таким образом

просто это прям конкретное название из

самого реакта которые постоянно

используется поэтому Ну обычно вы

увидите вот такую запись это у нас

Объект который содержит в себе вот эти

вот ключи tle и des в этом мы можем

очень легко убедиться

вы рас прилетает объект А title

description ну и второй раз вызывается

уже с другим параметром соответственно

если например я здесь передам ещё

что-нибудь там скажем тест и например 42

то в первом концу и логе одну лю

страницу видите Мы также ещё получаем

здесь тест и Обратите внимание что оно

уже интерпретируется именно Как число да

то есть это вот к вопросу о передаче

параметрах в данном же случае это просто

строчки

вот естественно нам здесь тест не нужен

Но в любом случае вот мы уже можем как

бы получать эти пропсы то есть

сокращённо от

свойства и теперь мы можем их вывести то

есть вместо теперь этого статики я

выведу здесь props title а вместо этого

текста я выведу props то

description и теперь если мы посмотрим

мы получаем

динамический контент для данной страницы

то есть примерно Вот такая логика Как

это работает Давайте теперь выведем все

элементы из

массива их кстати четыре штуки 1 2 3 4

да то есть Четыре элемента должно

быть теперь вместо вот этой вот строчки

мы сюда выводим дата Обращаемся к

первому массиву то есть по нулевому

индексу Ну и точка tle здесь мы будем

выводить

description Ну и теперь мы можем просто

взять это и

[музыка]

продублировать только здесь мы меняем

индекс на

первый и у нас ещё есть два элемента

поэтому их тоже добавим то есть меняем

только

индексы дата 2 и дата

3 Так здесь у нас есть ошибка по той

причине что у нас называется не а Да

нужно было быть внимательнее

мне так сохраню обновлю страницу ошибок

больше нет и смотрите у нас получается

уже красивая вёрстка с необходимой

информацией и при этом мы знаем что

именно внутри самого реакта мы сделали

Всё это динамически то есть выглядит это

довольно-таки круто Однако здесь я хочу

обратить Ваше внимание что мы сейчас

довольно-таки много дублируем кода а то

есть Tile там tle дублируется

description и на самом деле есть Для

таких случаев более удобный способ

смотрите Да потому что в массиве Ways У

нас есть ключ title и description и

компонент Как раз-таки принимает title и

description то есть для того чтобы

упростить нам код мы можем вместо этого

написать таким образом здесь мы вводим

как бы динамику сами по себе и дальше с

помощью оператора spread мы Обращаемся к

waye Ну и в общем к

тому объекту который мы как бы хотим

развернуть и передать эти параметры

Теперь

смотрите я просто возьму

продублируйте

я оставлю эту запись но мы также можем

здесь написать там типа СД

и нулевой элемент просто вот э Вот

запись и вот э Вот запись в данном

случае она идентична мы в этом тоже

легко можем убедиться если Перезагрузи

страницу видите в ИО у нас здесь

выводится и также очень часто в

приложениях вы встретите следующую

запись то есть не обязательно обращаться

непосредственно сразу

к Мы можем с помощью такого синтаксиса

Это

называется как бы мы знаем что мы

принимаем здесь объект Поэтому мы можем

обратиться к конкретным полям которые мы

здесь хотим получить это у нас title

ИП

в самом компоненте теперь

становится более лаконичная и приятная

если мы посмотрим то как видите Всё у

нас работает то есть таким образом

выстраивается именно вот базовое

взаимодействие компонентов куда мы можем

передавать параметры на этом этапе

давайте мы сделаем теперь правильно и я

создам отдельный файл для этого

компонента Way To teach то

GSX сюда я Перенесу весь этот код только

буду его

экспортировать и в App Мы просто его

импортируем Да смотрим всё работает но

опять же теперь код этого компонента

находится в отдельном месте

и мы можем как бы если захотим точечно

его

исправлять Теперь давайте разберём

следующий функционал для этого я добавлю

немножечко вёрстки в наш главный

компонент там добавлю отдельный сек

здесь у меня будет за головок H3 опять

же я с сайта

возьму Вот чем Мы отличаемся от других

текст

будет и дальше Я хочу здесь показывать

там несколько блоков но для этого мне

потребуется такая отдельная кнопка

которую я хочу использовать дальше в

нашем проекте и я хочу чтобы это был

кастомный компонент кам Это значит что

мы сами его создам и это очень часто

используемая практика именно в react

когда мы выносим по сути вот функционал

для какого-либо компонента например

кнопочки в отдельный компонент чтобы он

был универсальный для нашего проекта и

им было удобно использовать Ани каждый

раз там прописывают какие-нибудь классы

функционал и прочее поэтому я создам

новый файл назову его с большой буквы

Button GSX если я буду

экспортировать по

дефолту функцию

опять же пишу с большой буквы То есть

это интерпретирует как именно наша

кнопочка и дальше я верну buton кстати

если это всё пишется в одну строчку то

круглую скоки писать необязательно Ну и

пока я здесь напишу

Клик дальше импортируют

компонент Если вы это слышали то там

соседи что-то делают наверху В

воскресенье ь наверно не знаю

и react здесь я как бы создаю Button

передаю его в шаблон Да если мы сейчас

посмотрим то вот у нас кнопочка есть

супер базовая но во всяком случае если

мы её опять же

проинспектируйте

О'кей А сейчас мы поговорим про

функционал потому что очевидно что

кнопочки нужны для того чтобы по ним

кликать Но мне бы хотелось чтобы она

была красивая для нашего проекта то есть

её нужно стилизовать

и сейчас в нашем проекте стили прописаны

очень просто они есть только в файле

index.css Ну я совсем базу написал здесь

импортируют работа для хедера какие-то

базовые стили добавил Для мейна Ну и там

чуть позже Да мы с вами разберём Но для

кнопочки здесь как бы ничего нет кстати

как вообще почему работает этот индекс

CSS потому что в main.js видите мы его

импортируем отдельно То есть когда

стартует наш проект мы

добавляем стили И поэтому они

считываются то есть мы тоже их как бы

как JavaScript рассматриваем смотрите

для того чтобы изолировать стили потому

что сейчас я буду их писать только для

компонента buton Я конечно же могу их

написать в икс CSS но правильно будет

если я напишу их в отдельном CSS файле

который предназначен исключительно для

нужного нам компонента Давайте покажу

как это делается сполер очень

просто CSS компонента Ну и здесь буду

уже описывать стили и дальше в этом

GSX я должен их

импортировать Button CSS Потому что если

я их не импортируют существовать но он

не будет работать Я думаю что с этим

понятно теперь в Button CSS я немного

срю я добавлю уже готовый код но оставлю

немножечко экран чтобы вы смогли его

перепечатать по Су задаю кае стилистики

для класса Button для Хара добавляю и

видите ещё есть активное состояние

кнопки То есть если мы добавляем клас

Active вот очень простые стили с точки

зрения функционала этого ролика оно нам

не повлияет но можете просто переписать

и теперь если мы посмотрим Я обновлю

страницу то стилей всё ещё нет а потому

что у нас всё это работает через классы

класс Мы не добавили для кнопочки то

есть для этого здесь нам нужно написать

класс и тут тоже есть следующая

особенность в реакте которую просто

нужно запомнить если мы хотим задать

атрибут CSS атрибут класс то мы

используем не ключевое слово класс как в

HTML А мы используем кла name причём

именно вот в кейсе Ну Дело в том что в

JavaScript присутствует ключевое слово

класс и так как здесь мы на самом деле

находимся не в HTML Мы здесь находимся в

JavaScript будет коллизия определённая

Поэтому в GS Мы всегда прописываем

именно но это тоже самое что и класс да

то есть сюда мы добавляем

buton и видите Всё теперь Ну я не скажу

что это самая красивая кнопка но она во

всяком случае есть то есть наши стили

успешно

сработали дальше

смотрите следующий такой момент есть

архитектурный архитектура - это способ

по сути построение структуры вашего

проекта чтобы потом было гибко и удобно

во всём этом

разбираться будет Неправильно если мы

будем так вот плодить вот эти вот

сущности там CSS GSX Представьте Да если

у нас будет 100 компонентов у каждого

компонента будет по CSS файлу мы просто

потеряемся здесь Поэтому правильно будет

если у нас есть какая-то группа создать

новую папку Я назову её по имени

компонента Button и в неё я Перенесу все

сущности

так нет здесь наж кнопочку Нет сейчас

всё вручную сделаю то есть видите теперь

уже получается у меня отдель папка под

компонент и Здесь есть всё что ну

относится непосредственно к нему

проверяем импорты то есть здесь у нас

относительный импорт Всё окей и дальше

ВТО GSX нам также необходимо поправить

этот импорт то есть Пока У нас компонент

отсутствует потому что мы перенесли его

в папку Так что здесь прописываем ещё

раз ба проверяем Да всё хорошо Супер

Теперь значит смотрите Мы создали Вот

эту вот кнопочку но Понятное дело что мы

не хотим постоянно выводить здесь текст

клик Ну вот условно я ещё раз выведу

кнопку она постоянно будет выводиться

Клик да то есть мы как-то хотим

кастомизировать вообще вот это вот текст

который в самой кнопке будет передавать

её как

параметр смотрите мы знаем один способ

Например я могу здесь передать параметр

текст Ну и там пока временно

будет А сюда Давайте передадим текст БА

2 опять же пока Если я обновлю страницу

ничего не изменилось потому что мы не

принимаем эти параметры но мы знаем что

сейчас сюда попадает некоторый текст и

вот мы его можем вывести то есть мы

можем спокойно это сделать Как видите

всё это успешно работает знаем это

способно иго спосо

в случае он будет более правильный

потому

что для этих параметров мы сюда другой

функционал будем передавать Я бы хотел

воспользоваться этим компонентом как

обычным HTML

тегом то есть Пусть он будет

закрывающимся и кнопочку точнее текст

для этой кнопки передавать между как для

как и в обычном HTML допустим первая

кнопка у меня будет

подход будет ещё две

кнопки

доступность и

концентрация пока мы такой способ не

разбирали если мы посмотрим то как

видите сейчас у нас текст отсутствует

потому что параметр мы не передаём и в

react Чтобы принять вот этот параметр

существует специальный прос который

называется

Children мы его явно не передаём но в

действительности Да когда мы передам

что-то вот внутри этого компонента оно

попадает ВС

В данный про если мы сейчас это всё

выведем то как видите у нас всё это

успешно получилось то есть это просто

другой способ передачи этих параметров и

он нужен для того чтобы ну вот именно

так описывать сам компонент при этом

сразу же забегая немного вперёд мы можем

здесь писа не только просто текст мы

можем зде

описывать

Спан

передать в спане там будет не знаю

заголовок H3 какой-нибудь здесь будет Ну

я сейчас как бы не то пишу что

соответствует здравой логике создания

приложений Но это нужно только для

демонстрации то есть видите более

сложную структуру какую-то я сюда

передаю Ну и в теории Вот видите мы

получаем эту кнопку она абсолютно

неправильно

эме успешно также вставляет То есть это

вот можно использовать мы естественно

делать так не будем там по-моему у нас

была доступность пусть она и остаётся а

подход что ж идём дальше теперь

поработаем с самой кнопкой потому что

кнопка которая не умеет обрабатывать

Клик бесполезная кнопка Значит мы хотим

сейчас чтобы при клике что-то

происходило и вот в обычном значит

JavaScript как мы делаем там мы пишем

doc

But потом там L Ну и так далее вы это

уже Я думаю Знаете в реакте всего этого

делать не нужно всё намного проще мы

добавляем специальный как бы атрибут Ну

в действительности это параметр для вот

этого компонента встроенного в

react этоша собы тое

с

ви

ско вообще Т присутствует различных

событий вариаций того что можно сделать

Ну по сути вот все события которые есть

в браузере в

JavaScript самые базовые который нас

интересует - это конечно же клик и здесь

мы можем уже создать какой-либо

функционал значит для этого я создам

отдельную функцию Ну вот Обычно она

называется мы называем handle cck

естественно называть её Вы можете

абсолютно как угодно но как бы

получается такая логика что здесь мы

добавляем слушатель при клике будет

выполняться функция которая в общем

ответственно за выполнение клика здесь

пока мы напишем cons Log

допустим Button

clicked и смотрите очень важный момент

эту функцию я передаю сюда в onclick но

не вызываю её это будет не правильно

потому что она сразу же один раз вызове

В такой момент и Клик больше работать не

будет То есть если мы хотим чтобы эта

функция работала только непосредственно

в момент клика то мы её передаём как

референс без

вызова

сохраню так и Теперь смотрите я нажимаю

и Как видите мы получаем действительно

вот этот вот консоль Лог при нажатии на

каждую из кнопок это успешно

работает Ну и уже первый интерактив есть

Ну как пример я также могу ещё вам

привести что мы можем добавлять

множество слушателей там на один из

элементов

скажем какой-нибудь возьму on Mouse

Enter Да например

handle Mouse

Enter кстати раз уж я показываю другую

функцию то мы можем создавать её

действительно и другим способом как

стрелочку функцию например в данном

случае нет никакой разницы только лишь в

синтаксисе Ну и здесь там напишу

например

Log

entered так

Смотрим смотрите теперь видите при

наведении у меня получается вот этот

enter то есть и вы можете посмотреть там

поиграться тоже Какие а слушатели

событий вы бы хотели добавить для

элементов там типа даблклик там правая

кнопка и прочее всё это вот работает

непосредственно с помощью такой логики

нам это не нужно Ну конкретно вот Mouse

Enter и так далее Короче я это всё удалю

а мы пойдём именно с кликом но концепция

добавления именно слушателей Такова Хотя

знаете правильно будет отметить

что есть ещё и другой синтаксис который

Вы наверняка встретите Мы тоже будем его

использовать давайте я в общем

продемонстрирую на примере даблклика

например

как это работает то есть мы можем ещё и

внутреннюю функцию здесь писать не

отдельно выносить там в константу или

функцию А как речную использовать таким

вот образом Sol

Log

dou то есть мы её можем так уже здесь

описать Ну и теперь просто проверим да

то есть если я два раза кликаю видите

два раза вызывается клик и потом один

раз вызывается Double то есть эта штука

тоже работает ошибки не смотрите Ани от

прошлого остались вот то есть это ещё

Илай

способ работы с функциями Ну и

естественно последний комментарий в этом

файле в том что ну точнее на этой теме в

том что да Безусловно мы находимся в в

функции сейчас по факту но внутри мы

создаём другие функции так вот в

JavaScript это абсолютно нормально и в

при работе с react вы постоянно будете с

этим сталкиваться Просто эта функция она

изолирована областью видимости только

этой функции и доступна только внутри

неё теперь говоря о самих кликах и

функционале смотрите А да Безусловно мы

сейчас обработали сам Клик Но что я хочу

сделать с этими кнопками Я хочу чтобы

это у меня работало как табы То есть я

нажимал на конкретную кно и у меня

показывался соответствующий контент Ну

какой-то

текст соответственно нам нужно понимать

а по какой кнопке мы кликали не просто

вот этот консоль получать а конкретную

какую-то информацию отсюда доставать и

правильно это будет сделать именно в App

GSX потому что здесь мы вызываем этот

компонент здесь у нас будет храниться

логика относительно того какой контент

показывать Потому что сама кнопочка про

это не знает

обрабатывать это Клик именно

в Ну смотрите пока логика такая же то

есть Я создаю просто обычную функцию там

назову

её параметры нам не нужны пока я напишу

здесь тоже самое то

есть И вот этот Hand Мы

[музыка]

хотим

значит это мы убираем Да потому что он

нам здесь не

нужен и в действительности нам всё равно

вед нужно как-то обрабатывать вот этот

вот оклик но мы можем передавать функцию

как параметр от родительского элемента

до дочернего в данном случае

родительским является jsx и отсюда мы

передадим параметр вот эту функцию и

пусть она уже

обрабатывается есть это называтся переда

имен и Давайте придумаем название для

этой кнопки ой точнее для этого

события

допустим удивитесь но можно его назвать

оклик опять же это параметр А это

атрибут который позволяет Добавить

события то есть вот этот вот онклик вы

часто увидите именно такое название но

его можно там назвать о tch например или

одем что называть этот параметр можно

абсолютно как угодно и вот мы его

передаём вот этот параметр как функцию

как референс в онклик это

зарезервированное название это название

мы придумаем самостоятельно Я надеюсь

это будет понятно но всё-таки я назову

это

Оли И сейчас я объясню почему потому что

это просто интуитивно будет понятно да

что вот у нас есть кнопка и мы не

придумываем какой-то сторонний параметр

со сторонним названием замыслова нет мы

просто

пишем и просто это мы знаем что наш

компонент у которого там своя Логика

есть и сюда мы уже передаём этот

Клик всё сохранили Обратите внимание что

в батоне у нас нет больше никакого

функционала но при этом если мы

обновляем страницу мы всё равно получаем

buton cck пока нам сильно это не помогло

ещё ну потому что мы не определяли по

какой кнопке мы кликаем но в любом

случае знаем что ври мы это

Поли

Перед тем как мы пойм

дальше у кнопочки с точки зрения C есть

ещ

класс который вот выглядит Именно таким

образом вы вот на текущем этапе в

качестве такой небольшой самостоятельной

работы можете попробовать добавлять этот

класс как параметр То есть вы будете

передавать какой-то параметр из батона и

случае есно будет

авре

пока я оставлю чтобы ну просто

по-другому как бы выглядел у нас

экран Окей значит смотрите дальше нам

нужно понять А по какой кнопке Мы в

итоге кликаем Потому что сейчас у нас ну

постоянно один и тот же

текст оказывается в консоли и для того

чтобы вот при клике передавать в эту

функцию параметр который у нам уже будет

сигнализировать о том куда мы нажимаем

мы можем сделать следующим образом то

есть мы знаем что паме

функцию А что если мы сюда и передадим

эту функцию таким вот образом вы очень

часто будете встречать именно такой

паттерн в реакте да то есть мы формируем

замыкание в данном случае и здесь уже Мы

можем вызвать эту функцию с

фиксированным параметром Давайте

посмотрим как они называются у нас что

мы сечас этим

поработаем E и

PR знат сюда мы будем

передавать

у нас

будет

Easy и

Program Давайте посмотрим работает ли

это да Видите мы нажимаем и оно всё ещё

работает но нет этого параметра потому

что мы его передали в саму функцию но

никак не обработали то есть здесь я

назову его например Type и дальше уже

буду его сюда

выводить обновляю страницу и видите Да

теперь кликая по одной из этих кнопок мы

чётко понимаем какого она была типа

опять же вы сюда можете передавать любые

параметры Ну просто для текущей задачи у

нас здесь была именно строчка это могут

быть там объекты массивы числа и так

далее дальше Вот мы получаем уже Тип и

теперь давайте вот выведем ну

какой-нибудь контент в зависимости от

типа кнопки на которые мы нажали для

этого значит после батонов я добавлю

параграф п я напишу Нажми на

кнопку и значит Ну как мы можем сделать

А давайте подумаем я могу создать

например какой-нибудь Let Content да

пусть он будет в

начале так и называться Нажми на

кнопку да Опять же мы этот контент можно

спокойно вывести вот таким вот образом и

видите у нас всё это успешно работает да

то есть вот он

показывается и в случае Например если

мы кликнули на кнопочку нашу Давайте

этому контенту мы

присвоить он выводится то есть мы знаем

что Тап меняется поэтому поменяли

контент Ну и всё он будет Значит у нас

рендерится такой пла нажимаю на

доступность вот мы получаем здесь а Easy

там Program Way а кнопочка точнее текст

не меняется что-то пошло не так и здесь

мы подошли на самом деле к одной из прям

ключевых фундаментальных концепций в

реакте которая называется State и вот в

чём заключается идея

react он реактивный ну даже по названию

Вы можете посуди То есть он

автоматически следит за каким-то

изменением которые происходят в коде

если это как-то влияет на изменение

шаблона то он берёт и перерисовываю

конкретное место в шаблоне таким образом

его

оптимизируя но что пошло не так потому

что в целом-то вот мы изменили как бы

константу точнее переменную а он её

почему-то не изменил в шаблоне так вот а

в реакте для того чтобы он понимал Зачем

нужно следить а зачем не нужно следить

есть такое понятие как й то есть

состояние вашего там приложения

компоненты и так далее

и мы должны сами вручную сигнализировать

реакту о том что является стейтон А что

является Ну просто какой-то статикой и в

случае если это у нас состояние то тогда

реакт будет это всё перерисовывать если

это не состояние то он просто это про

игнорирует и

способ с помощью которого мы можем

создавать это состояние я вам сейчас

покажу Но прежде давайте мы ещё сделаем

следующий момент то есть по дебажить

немножечко здес я напишу а cons Log Up

допустим Up

component

render и Давайте посмотрим когда этот

рендер вызывается то есть ну рендер -

это помещение по сути вот этого GSX

прямо в шаблон я обновляю страницу и

Видите вот у меня один раз он вызывается

если я нажимаю на кнопочки кнопочки они

как бы нажимают

есть то что я и говорил как ки состояние

мы не обозначили поэтому ре его и

игнорирует при этом кстати вот у нас

есть внутренние компоненты

скажем Да мы же здесь тоже можем

написать

buter видите он три раза у нас как бы

рендерится

ного

проходит react не перерисовываю э всю

историю она статическая остаётся сейчас

так что теперь поговорим про то как мы

правильно работаем со стей в

реакте для этого я

импортируют и это что-то называется

use State значит US State - это функция

и она начинается со специального такого

префикса use что сигнализирует нам о том

что это

к с помощью которого мы можем создавать

локальное состояние для

компонента Сейчас я вам покажу как это

работает

значит в самом App компоненте мы

вызываем эту функцию use State

и здесь на самом деле не принципиально

что мы получим из этого тейта ну в том

плане это будет констант или LED Мы

всегда получаем один и тот же

формат допустим State

я его назову это у нас всегда будет

некоторый массив значит Перед тем как мы

будем разбирать что это такое Как это

работает сразу же несколько обязательных

правил по использованию вот

этого стейта ну и вообще хуков в реакте

Первое правило нельзя писать их вне

компонента Вот например как здесь это

будет ошибкой то есть мы используем вот

эти вот хуки в данном случае только

внутри опонента либо другого хука но

опять же пока не берите в голову Просто

дело в том что мы можем самостоятельно

создавать некоторые хуки про это мы вот

подробно рассказываем там уже в большом

курсе да где не для начинающих потому

что это более-менее продвинутая тема но

опять же То есть сейчас что вам нужно

запомнить usate мы используем а внутри

компоненты и он всегда должен находиться

на Верхнем уровне то есть ну нельзя

скажем написать там типа If 1 1 ра 2

неважно И какой-то да и вот если так то

тогда мы создадим стоит ошибка Нельзя

так делать никаких иов То есть если мы

используем вот эти вот й то только на

Верхнем уровне теперь что касается вот

этого State Давайте пока для начала сюда

я передам

42 ладно не 42 пусть будет будет текст

Нажми на ноп и Давайте посмотрим что

есть

если мы Ну посмотрим в консоли то мы

видим что нулевой элемент Ну по первому

индексу это у нас как раз таки то

состояние начальное которое мы передали

Нажми на кнопку а второй элемент - это

функция и действительно то есть вот то

что попадает в нулевой элемент только

как бы это значение присвоения только

уже в формате стейта а второй Эмен это

функция позволяющая изменять

это

по факту мы можем вот так вот

написать

равно нулевой

индекс и

дальше а ви тут коллизия есть небольшая

давайте это контент я закомментировать

й контент и дальше мы добавляем Set это

не обязательно но это вот та практика

которая используется вообще во всех

приложениях с любым гадом Поэтому просто

запомните потому что это как раз-таки

метод позволяющий

изменить Конкретно этот й Но каждый раз

если мы прописывали вот всё для й таким

образом Было бы очень неудобно поэтому

мы можем воспользоваться синтаксисом

JavaScript и сделать деструктуризация

самого вот этого вот массива State array

Мы всегда знаем что первый

элемент это само значение которое мы

сможем использовать а второй элемент -

это функция позволяющая изменять это

значение Set Content всё И теперь вот от

трёх строчек Мы пришли к одной строчке и

именно вот такую запись вы постоянно

будете видеть А вот это вот состояние

это начальное состояние А вот это вот Ну

в данном случае контент который мы

назвали

Ну теперь что мы можем здесь вывести

контент посмотреть что оно

показывает Нажмите на кнопку чётенько

работает и теперь в теории смотрите Так

у нас есть эта функция Если при клике на

кнопку мы вызовем этот Set контент и

сюда передадим Type да то есть мы не

напрямую пишем опять же Обратите

внимание это очень важно не напрямую

пишем Котен рано это Не сработает потому

что для правильного изменения стейта нам

нужно пользоваться вот этой вот функцией

Только таким образом react поймёт что

ага что-то изменилось и поэтому мне

нужно это отрендерить

обновляем страницу вот смотрите сейчас у

нас есть component render один раз три

раза кнопки потому что у нас три кнопки

и дальше я нажимаю например на

концентрацию смотрим Что произошло

произошло следующее мы кликнули на

кнопку дальше снова вызвался рендер Up

компонента потому что мы изменили

состояние в этом компоненте и за счёт

этого он перерисовал нам контент потому

что мы Его изменили Ну а кнопки они

снова рендерится потому что рендерится

весь а компонент Ну Поэтому нужно и

кнопочки отрендерить и теперь видите мы

получили первую динамику с первым

состоянием нажимая на эти кнопке

по-моему очень круто то есть с этим

дальше уже можно идти и работать на этом