#2. React для НАЧИНАЮЩИХ (Зачем он нужен. Что такое Virtual Dom. SPA. MPA)

Поддержать автора:
www.donationalerts.com/r/kake...
***** Таймкоды:
00:00 Введение
00:35 SPA и MPA
05:51 DOM
08:25 Virtual DOM
10:01 Что такое кэширование
11:19 Всем спасибо, всем пока
***** Музыка:
♪ Afternoon (Prod. by Lukrembo)
Link : • lukrembo - afternoon (...
♪ Animal Friends (Prod. by Lukrembo)
Link : • lukrembo - animal frie...
♪ Branch (Prod. by Lukrembo)
Link : • (no copyright music) c...
♪ Late morning (Prod. by Lukrembo)
Link : • (no copyright music) c...
♪ Lunch (Prod. by Lukrembo)
Link : • (no copyright music) j...

[@kirillkononov5094]

Объяснение очень толковое. На мой взгляд, тема не до конца раскрыта :)) В части React: императивное/декларативное программирование. Это важно для программиста. Если вы используете ванильный JS, то для того, чтобы браузер заставить что-то перечерчивать нужно ему писать очень подробные инструкции (императивно) шажок за шажком (что то типа Форест, беги!, Форест, стой!....) т.е. для каждой кнопки нужно прописывать много строчек кода, и при этом в MPA эти кнопки (элементы) повторяются. получается тысячи строк кода! В REACT декларативный подход, т.е. ты описываешь, какой результат ты хочешь, а алгоритмы React прописывают JS за программиста (под капотом). И все часто повторяющиеся элементы прописываются один раз а далее применяются многократно (компонентный подход). В части SPA: есть не мало сайтов MPA где блок контента перерисовывает backend, написанный, например на PHP. такие сайты достаточно быстры и также клиент практически не видит, что они перегружаются (так еще есть и SSR). Тут важно понимать, что SPA загружается, на клиентскую сторону целиком и исполняет код в браузере клиента. А отсюда и минусы. Если у клиента слабое соединение или браузер имеет мало аппаратных ресурсов, то такой сайт будет очень долго грузиться и плохо работать. так же он будет плохо читаться поисковыми роботами (если конечно это не NEXT или Gatsby.js).

[@kakieToYroki]

Про React: да, все так, я о таком плюсе даже и не подумал. Но на самом деле, разницу между декларативным и императивным подходом трудно понять новичку (сужу по своему прошлому). Ее нужно прочувствовать. Попробовать писать код сначала в одном стиле, потом в другом и видеть разницу наглядно. А так да, плюс хороший По поводу SPA:Можно, кстати, не грузить весь код клиенту сразу, а разбить его на кусочки (чанки). А далее лениво их подгружать. И получится крутая для пользователя магия

[@karimov3556]

Блиннн, пересмотрел почти все уроки на KZbin. Ну этот парень объясняет лучше всех. Просто отлично и профессионально. Спасибо тебе от душы🤙

[@kakieToYroki]

Еее 🙃🙃

[@dragoplay3418]

Тоже уже неделю не мог понять react js

[@artemlobanchikov2270]

Не, ну контент реально в кайф! Давай давай еще ! Вообще красавчик!

[@kakieToYroki]

🫡

[@user-bi5sl9mi3t]

Спасибо! Самое понятное введение в реакт)

[@imnephy817]

Отличное видео) С нетерпением жду продолжение!)

[@user-lm9ee1gn5p]

Спасибо вам за уроки

[@DeadlyCute]

Музыка балдёжная!!!! Ждём следующую часть !)

[@seventeen8777]

прекрасное объяснение.

[@Grape_Killer]

Класс!👍🏻 Жду #3 видео про React

[@vitalygaraev8093]

Это должно иметь продолжение. Даже, если это будет платный контент.

[@Sylar7773]

Спасибо, ОГРОМНОЕ 💪

[@dimasnytin]

Просто топ рассказал. 💪 Спасибо ❤️

[@ruslanrv802]

Спасибо за подачу уроков. Легко и понятно.

[@kakieToYroki]

Надеюсь, что следующие уроки по реакту будут такими же )

[@Ardbot]

9:33 Куплю пакет на 1000 апельсинов! Спасибо, полезное видео

[@user-hv7rn7uk2m]

Спасибо

[@pinnikolay]

Спасибо за видео

[@andreynoskoff5010]

Спасибо за объяснение на пальцах!

[@kakieToYroki]

🫡

[@armanscription1428]

Не смог дождаться новых роликов по JS и перешёл к плейлисту с Реактом)) Попробовал сделать пару прикольных 'штук' на ютубе, в одной использовал API, там пишешь слова, и выводится информация про это слово, также можно прослушать это слово, и сделал игру бутылочка, которая выпадает на рандомного участника и загадывает рандомное желание. Надеюсь этого хватит что бы попробовать React.

[@kakieToYroki]

Звучит неплохо. Но в целом да, этого хватит, думаю. Чтобы точно проверить, у меня есть видос на канале «что нужно знать из js, чтобы перейти к реакту». Там можно сравнить свои знания и необходимые :)

[@armanscription1428]

@@kakieToYroki Эта карта уже в заметках

[@kakieToYroki]

@@armanscription1428 🥴

[@galaktik9714]

Объяснение очень хорошее не пойму почему так мало актива😢

[@kakieToYroki]

Видимо, что-то не так делаю )

[@satanichkozell]

Шикааарно, когда 3 часть?)

[@kakieToYroki]

Видео уже записал, осталось смонтировать. Думаю, что в среду или четверг :)

[@sha_lapai7230]

👏👍

[@igorsenichev3779]

Спасибо за видео, интересный подход к объяснению, особенно сложной темы про vitual dom. Я этот virtual dom понял так (поправь пожалуйста, если ошибаюсь). Virtual dom (для краткости обозначу VD) копирует полностью dom. Потом все изменения записывает в VD. Как только мы завершим изменения, react обращается к оригинальному dom и говорит ему, мол 3 компонента из 10 (для примера) изменились и мы меняем (перерисовываем) только их, а остальное элементы мы не переписываем, а оставляем, как они и были ранее. Таким образом, благодаря VD мы перерисовали только те части, где были изменения, а остальное (где изменений не было) не трогаем и тем самым экономим время.

[@kakieToYroki]

Да, все так 👍

[@kirillkononov5094]

Тут важно понимать отличие Frontend / Backend. В обычных сайтах, в которых есть Backend-часть, по запросу клиента формируется страница, в которой нет ничего лишнего, кроме (шапки, подвала и каких то служебных блоков) т.е. выдается ограниченная порция кода. т.е. если Вы попросили тарелку борща, то вам официант принесет только эту тарелку борща. REACT нужен для того, чтобы работать с Frontend частью, т.е не в сервере, а в окне браузера клиента. По аналогии с борщом, в случае, если это SPA, вы попросили тарелку, но поварёнок притащил вам на стол всю кастрюлю, и при вас отложил вам в тарелку. ))) Теперь если вам захочется навалить борща еще и в кофейник или соседу по столику, вам больше не нужно просить официанта. Весь борщ у вас на столе. И да, теперь виртуал дом может исполнять все хотелки, в браузере клиента. 😅

[@kakieToYroki]

Сейчас ещё больше запутаете человека 🙃

[@user-yn5xq1iu2y]

👍🏻

[@Tornado-ln7fq]

Я конечно извиняюсь но Реакт не решает эту проблему, динамический сайт создается путем внесения бизнес логики,и Реакт тут не причет. Реакт решает проблему динамики компонентов. Написали мы кнопку с функционалом,сделали ее компонентом,и уже на нашем сайте просто вставляем наш компонент где нам нужно, и также с формой, реакт позволяет писать большие формы , путем системы компонентов. Причем компонент можно вкладывать в другой компонент,это позволяет делать быстро интерфейс сайта. А вот динамический сайт, делает модель MVC. И реакт тут не причем)).

[@unknown.6914]

+1

[@kakieToYroki]

Уже до реакта дошёл? Поздравляю 🥳

[@Nebogr]

А будет практика? Например, что-нибудить создатите, чтоб новичку было понятно? На практике лучше доходит понимание.

[@kakieToYroki]

Обязательно. Но сначала нужно объяснить, что такое реакт и как он настраивается :)

[@Nebogr]

@@kakieToYroki по каким дгям теперь будут выходить уроки?

[@kakieToYroki]

@@Nebogr не могу гарантировать какие-то конкретные дни. Вообще я стараюсь раз в 5-6 дней заливать ролик. Иногда бывают проблемы и затягиваю немного. Но четкого графика точно нет :)

[@DarkByte1337]

React хуже в разы чем vue, вот прям хуже. Сам пересел на vue с React и доволен как слон.

[@kakieToYroki]

После jQuery я доволен абсолютно всем )

[@ihorzhuk4949]

егегей! Уже 3.5k а я вот на повторку записался у себя локально на курсе по full stack, хотя я знаний от туда возьму лиш дня фронта. Так уже получилось, у нас заканчиваеться подуль по js. И скоро будет уже реакт! К слову твои обьяснений очень толковые

[@kakieToYroki]

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

[@ihorzhuk4949]

@@kakieToYroki немног поправки, реакт начался у меня только сейчас, прошую неделю у нас был водный typescript.

[@kakieToYroki]

Растешь прям на глазах 💪🏻