Новый React.js!

Забрать бесплатные ресурсы и 4000 бонусов от Cloud․ru можно на сайте: sc.link/MwkZc
Erid 2VfnxyTRuzg
Телеграм:
t.me/howToLearnIT
0:00 Революция под номером X
0:25 Виртуалка в подарок
1:51 Что нового?
2:39 Компилятор
3:12 Серверные компоненты
3:21 Экшены
4:13 useFormState
5:12 useOptimistic
6:43 Мета-теги
6:54 Suspence компоненты
7:09 Веб-компоненты
7:29 Ref
8:39 Проблема 3 в 1
9:20 React Native for Web
10:04 Проблема React Dom
10:58 React Strict Dom
12:53 Новая архитектура React Native
13:09 Резюме
Про React 19:
• Exploring React 19 Fea...
#reactjs #react #javascript #frontend

[@it2138]

Забрать бесплатные ресурсы и 4000 бонусов от Cloud․ru можно на сайте: sc.link/MwkZc Erid 2VfnxyTRuzg Телеграм: t.me/howToLearnIT 0:00 Революция под номером X 0:25 Виртуалка в подарок 1:51 Что нового? 2:39 Компилятор 3:12 Серверные компоненты 3:21 Экшены 4:13 useFormState 5:12 useOptimistic 6:43 Мета-теги 6:54 Suspence компоненты 7:09 Веб-компоненты 7:29 Ref 8:39 Проблема 3 в 1 9:20 React Native for Web 10:04 Проблема React Dom 10:58 React Strict Dom 12:53 Новая архитектура React Native 13:09 Резюме Про React 19: kzbin.info/www/bejne/e4HEfZpqisR-Z9E #reactjs #react #javascript #frontend

[@_randomletters]

адгуард блокирует ссылку fyi

[@boycovclub]

Capasitor глянь)))и поймешь про мобилку многое)

[@henu3detb]

Я думал, революция, это когда определили границы фреймворка и сделали его проще и чище, а тут уже не клиентский фреймворк, а летающий макаронный монстр.

[@anastasiia_idle]

Спасибо, очень нравятся твои ролики! Давай еще!

[@nk_77777]

Крутой ролик, спасибо за инфу)

[@ingvarr6235]

Полезное видео, спасибо!

[@VitalikLomakin-bt9oe]

Крутой видос. За шато-эркен замок в кбр отдельный респект )

[@romanmed9035]

так а революционное то что, очередные добавки и переделки в надежде на универсальность и с уничтожением обратной совместимости?

[@kostyafrompiter]

Библиотеке же нельзя стоять на месте..

[@user-qs5jr2jl2q]

А где уничтожение обратной совместимости то?

[@msdryagin]

хороший ролик, информативно

[@dalysdeveloper907]

React превращается в ту самую шутку о фронтендерах, что фреймворки меняются каждый день Не успели похоронить классовые компоненты, как хоронят React Native Видимо NextJS в будущем просто будет стабильной версией реакта

[@TheSky5028]

некст меняется быстрее чего либо

[@veleglas_ch]

Ха. NextJS быстрее реакта меняется. И глобальнее. Тот же переход с pages на app чего стоит.

[@user-yw9wx4lv2w]

@@veleglas_ch ну поменяли роутер и что?) Это не глобальные изменения

[@frontend_course]

@@user-yw9wx4lv2wэто очень глобально. Оно не работает. Не стабильно еще и swr сырой

[@railbatyrshin7349]

useOptimistic - что то похожее есть в rtk query (optimistic update). Так же можно обработать результат не дожидаясь ответа от АПИ. При этом пишется вручную внутри эндпойнта сторы. Довольно удобная штука, но не нужно делать это с фанатизмом, если что то пойдет не так в ответе от АПИ, то конечно сработает .undo(). Но как это скажется в UX пока не понятно) Спасибо за видео

[@veleglas_ch]

html.div .... а что делать тем кто MUI использует или другие фрэймворки

[@max_mgtow]

Привет, Друг 🤝 Лайк за Добкина вначале😅 Привет из Харькова 🤝

[@sergeydev8273]

Интернет все таки тоже большая деревня:) Привет землякам!)

[@max_mgtow]

@@sergeydev8273 🤝

[@MrHohotyn]

4:48 Для отправки значения, которого нет в форме вместо скрытого инпута можно использовать .bind (это из документации NextJS) Из твоего примера: const [message, formAction] = useFormState(addToCart.bind(null, productId), null); В этом случае фукнция-экшн addToCart будет выглядеть так: function addToCart (productId, prevState, formData) {}

[@darktau2114]

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

[@Boortwint]

5:43 Может, на мне сказывается недосып и полночь за окном, но я в упор не понимаю установку состояния setProducts(products => [...products, { product: newProduct, sending "ОтправляетсяЭ } и последующее обращение к элементам массива в цикле вида optimisticProducts.map(product => product.name) У объекта в массиве состояния есть только два свойства: product и sending. Попытка обратиться к name вернёт undefined. Разве нет? Таки может нужно обращаться к product.product. name?

[@limpchh]

Там был просто пример нового оптимистик хука, не воспринимай остальной код как то, на что нужно ссылаться. Там не удачный пример, видно что на скорую руку собрал. Но главную мысль работы хука вроде донес

[@popov654]

Всё-таки в который раз пытаюсь ковырять документацию React, и в который раз убеждаюсь, что изначально фреймворк крайне бредовый. Вот взять хотя бы все эти хуки, те же useMemo и useEffect... Ну дичь же, без поллитры, как говорят, вообще не разберёшься в здравом уме, зачем это и для чего, и когда это юзать. Мне больше нравится подход Alpine, и сам я, кстати, года три назад писал очень похожий фреймворк. Да, возможностей меньше, но и осваивать проще, и шанс наделать ошибок в коде - на порядок ниже.

[@NeverGTI]

Пойду порадуюсь, что основным рабочим инструментом сейчас является 3 вуй )

[@Mobofilka]

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

[@alenache1]

я понял - они пилят 1С

[@user-rb6uk5yo7v]

Я тоже так подумал когда увидел use client, use server😂

[@alenache1]

@@user-rb6uk5yo7v да и архитектура на вызове RPC от V-слоя под капотом, как в 1С и аннотации похожие, это 100% она 🤣надо Нуралиеву маякнуть, пусть их засудит

[@user-in3jd6cm2t]

Я ангулярщик, думал попробовать реакт освоить. После просмотра больше не хочу, спасибо.

[@sakkarem]

Лайку автору за шутку про деревню и красных

[@grenadier4702]

Не понял, зачем вообще нужны экшены? Чем обычный onSubmit не достаточен? И зачем нужен useOptimistic, если можно сразу setState делать?

[@tryToChaseMe]

как я понял, при неудаче useOptimistic автоматически откатывает state

[@TechBusinessDev]

Какую херню эти фронтендеры устроили, конечно 😂

[@romanwednesday4401]

С useOptimistic не совсем удачный пример привел. Суть паттерна поведения optimistic update в том, что мы используем только лишь "оптимистичное" хранилище для отображения ui. Если запрос не прошел - удаляем элемент из оптимистичного хранилища. То есть второе хранилище products здесь не нужно и оно нигде не используется. Спасибо за внимание!

[@DenisSokolov-pk3gz]

Все круто, но btw react-strict dom api будет закрывать маленькое число потребностей бизнеса. Сейчас под RN существует очень много опен сурс библиотек который все используют в своих проектах, и маловероятно что в ближайшие пару лет оно все переедет на RSD.

[@xeleos]

Флаттер хорош, а дарт прекрасный язык

[@maksimvashkevich1429]

0:17 это же замок Шато Эркен в КБР. втф, что он тут делает?)

[@DreamingDolphing]

Тут надо сказать, что многие фишки самой новой версии React уже работают в Next сейчас.

[@tnsaturday]

Не работают

[@mit7871]

Каждый год новый реакт, так задолбало, что решил в сторону бека двигаться)

[@user-yw9wx4lv2w]

а что нового?) по сути ничего. Весь предыдущий опыт остается релеватным. И да 18 версия вышла два года назад. Когда релизнут 19 - пока вообще не понятно

[@tnsaturday]

Конечно, ума перейти на вью же не хватило. Странно, что только в бэк, а не сантехники или официанты

[@mikaelgevorgyan4521]

Вот если хотят они что типо такого я хотел это сделать на PHP с JS), чтоб они были единым цельным куском.А вот еще более интересный момент) вызывать функции PHP в js и так же с PHP вызывать функцию JS.Но это пока еще может и способен) только один из всех языков Python eel+js*)

[@user-gk3wc4ei3w]

ты рассказываешь какие то сказки, Livewire для лары уже лет 5 есть, раньше был пакет для симфы которому лет 10+

[@germanmartirosyan6230]

Livewire - первый шаг к этому, Inertia - второй и очень даже неплохой, учитывая что ты еще можешь выбирать какой фрейм на фронте использовать.

[@mikaelgevorgyan4521]

@@germanmartirosyan6230 это да))

[@mikaelgevorgyan4521]

@@germanmartirosyan6230 мне нравился реакт версии 5-8 потом о)о ужос

[@popov654]

@@user-gk3wc4ei3w я смотрел по нему вводное видео, но так и не понял, как он работает под капотом :(

[@fevra1]

Реакт все ближе подходит к vue, того гляди и догонит

[@user-ue8bh7tj5k]

Это правда

[@rgaliev04]

а чего во вью есть, чего нет у реакта?

[@user-ue8bh7tj5k]

@@rgaliev04 отсутствие пердолинга и декларативность

[@vladislavkomkov5178]

@@rgaliev04 стабильность

[@gomuncool1004]

​@@rgaliev04 если начать перечислять, можно состариться

[@nikman5541]

Про новое апи для реакт нейтив круто. Есть шансы попасть на работу имея в портфолио и веб и мобильные аппки

[@rbars96]

Svelte, имеющий компиляцию (и при том лучшую) до того, как ее завозят другие...

[@gooseob]

а vue как работал по твоему?

[@frontend_course]

@@gooseobчерез жопу

[@frontend_course]

Просто в свелт полторы либы. В реакт их тысячи. Вот и вся суть. А перфоманс не заметен вообще на типичных приложениях

[@gooseob]

@@frontend_course если реакт код плохо написан, то плохой перформанс заметен конечно) не в сравнении со свелтом, просто

[@artsiom5942]

А почему-то ты про ionic забыл

[@danilka6295]

3:00 8 лет делали

[@romansamon9215]

Пишем новый проект с нуля, встал вопрос (и не только) проблемы 3 в 1, команда есть, все супер, что фронты, что нативщики, но дилемма - ребята нативщики постоянно заняты импрувментами и поддержкой уже написанных приложек, а нанимать еще команду нативщиков на один проект - бизнес не в восторге По итогу было принято волевое решение делать монорепу с FSD под капотом и пилить веб + реакт натив, переиспользуя при помощи монорепы бизнес логику, НО! Раз уж тут такая тема с реакт стрикт дом (мало-мальски слышал про эту штуку, но не придавал значения) + еще событийный цикл перкручивают - пожалуй думает стоит рискнуть и подождать этот наш 19 реакт и уже юзая стрикт дом обкатывать все это дело. Автору в очередной раз спасибо, в порывах рабочей суеты не всегда есть время за всем следить, а ты по полочкам все раскладываешь, благодарю

[@Pax_Roma]

Кого ты называешь нативщиком, а кого фронтом?

[@user-yw9wx4lv2w]

react 19 и react-strict-dom никак не связаны. Это паралельные проекты. Никто не говорит что react-strict-dom появится вместе с react 19. Да и дата выхода новой мажорки тоже под вопросом

[@romansamon9215]

​@@user-yw9wx4lv2wпонял, спс за инфу, надо будет подробней в эти дебри вникнуть

[@sakkarem]

Слушаю про все эти "улучшения" и радуюсь, что я сижу на игле Ангуляра.

[@postoronny]

Vanilla JS

[@TheSky5028]

Пойди почитай что новая версия ангуляра с новым синтаксисом без обратной совместимости, радость закончится сразу

[@sakkarem]

@@TheSky5028 только не говорите, что вы про переход с ангулярjs на ангуляр-2, который был 8 лет назад?

[@sakkarem]

@@TheSky5028 вы про переход из angularjs в angular 2 что было 8 лет назад?

[@sakkarem]

@@TheSky5028 это вы про переход с angularjs?

[@user-ks3sj6st1s]

Я до конца не понял проблему, почему просто не вытащить const { div } = html; ?

[@bakurikokhodze8250]

tak i sdelaiut )))

[@user-yw9wx4lv2w]

зачем? это синтаксис который предлагает библиотека которая находится в условной пре альфе. Напишут потом плагин для сборщика который позволит вообще не касаться объекта html в исходниках

[@vasisafronov]

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

[@popov654]

Но ведь credentials будут только на сервере. В чём опасность, что кто угодно сможет увидеть имена и состав таблиц или поля документов, если у нас Mongo? Это прямо так серьёзно в плане взлома?

[@popov654]

Кроме того, никто не мешает зашифровать запрос к БД каким-нибудь разовым ключом, чтобы сервер сперва расшифровал его, а потом уже исполнил запрос. Можно даже применить ассиметричное шифрование - тогда у кулхацкера не получится ничего расшифровать, ведь у него нет приватного ключа. Правда, в этом случае мы теряем возможность составлять динамические запросы, то есть использовать параметры, что конечно совершенно не круто. Но в принципе, можно шифровать статичные фрагменты запроса, используя какие-нибудь спецсимволы, а динамические параметры оставлять незашифрованными - есть много вариантов.

[@skeelo3157]

html.div можно было бы назвать просто Div, как компонент, с большой буквы

[@olegkat4841]

Когда то давно использовал react. Послушал. В итоге что поменялось то? Мы как гоняли контент по экрану на нем так и гоняем, только архитектура абстракция каждый год новая. Новость то что полезли на сервер?, так я вам скажу на сервере технологий хватает и для реальных потребностей для серверной логики современных приложений реакт это просто смешно.

[@MrCortc]

Частые изменения признак незрелости.

[@tnsaturday]

Признак даунизма

[@WERWOLION]

пздц у реакта в 2024 году ещё не было компилятора, это жесть

[@S-craY]

Привет, купил доступ в бусти, в тг каналы зайти не могу, хотел в академии позаниматься, как быть ?

[@tnsaturday]

Не покупать всякое говно?

[@S-craY]

@@tnsaturday Полностью согласен

[@user-ue8bh7tj5k]

Я не сторонник концепции 3 в 1. Это будет сильно бить по перформансу мобильных приложений, делая хуже пользовательский опыт. Дискорд очень хороший пример. Я делал приложения на React Native и моё мнение, что, лучше нативной разработки пока не придумали

[@germanmartirosyan6230]

Что можешь сказать о Flutter с учетом что делаем только под мобильные платформы?

[@DrKaufmann71]

Не путайте мысли и ожидания разработчиков и задачи бизнеса. Разработка сейчас стоит неоправданно дорого и любая технология, позволяющая сэкономить без серьезного падения качества продуктов бизнесом будет восприниматься на ура. А разработчики будут подстраиваться.

[@neizvestniydrug]

Ещё лет 10 и реакт дорастёт до elm😂😂😂😂😂

[@tnsaturday]

Лет 1000 и даже близко не понюхает

[@jake_timabay]

нам нужен кросплатформенная разработка что делать новый React Native попробуем? Ionic да да пошел я нах*й

[@Pillow12442]

Звучит как мертворождённый проект. В общем удачи бизнесам

[@itstart2144]

В пізду реакт . На php spa можна делать.

[@popov654]

Ты имеешь в виду, на чистом JS? Или что

[@itstart2144]

@@popov654 Livewire бібліотека на ларавель. Пишешь бек на php, а у тебе spa )

[@llwebstylell242]

ничего путёвого из новинок, расходимся)

[@iteasy4005]

Никто не ожидал крупных изменений во фронтенде, и вот опять

[@user-yw9wx4lv2w]

ничего крупного тут и нет

[@vladm3174]

Ну для себя я понял, что надо больше писать на js, слишком много изменений.

[@romanmed9035]

виртуальную машину активируют только после оплаты 100р на счет. это уже не бесплатно.

[@limpchh]

Да, это что-то на богатом, на дорогом

[@igorzubkov3877]

а что такое 100р в нынешних реалиях?

[@romanmed9035]

@@igorzubkov3877 даже 1 копейка это уже не бесплатно.

[@mastnova2676]

что за средние зарплаты в 500к на разработчика?

[@tnsaturday]

Да чего там, 5 млн средняя зп

[@pavelgonzales_]

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

[@jenyaspace]

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

[@user-oy2so2cj3b]

как же я рад что выбрал именно vue своим фреймворком....какая же срань вашш реакт...

[@theoty-js-react]

О ДИВНЫЙ РЕАКТ

[@frontend_course]

Из клиентского приложение сделали просто пхп Серверные компоненты вы просто так не сможете использовать Так же там нету доступа к стейту на клиенте. А значит не сделать нормальные Кеши у клиента или какую-то логику по переходу назад (на пример не запрашивать стейт) Ну и так же на сервере вы не поймете. Был ли это прямой переход или переход внутри сайта (и загрузите кучу лишних данных) И тд и тп. в шляпу превращается в общем то

[@frontend_course]

Так же сервер где-то должен крутится и каждый переход - это нагрузка. Новый клиент будет ждать ответ (увеличение latency). Ну и код превратится в любимую кашу Некст жсовцев. Все в компоненте на тысячу строк. Да еще и размазано на дочерние на 2тыс строк

[@frontend_course]

Ну и оптимистичные проблемы решает не реакт. Да и не должен

[@frontend_course]

Так что реакт в целом то остановится после файбер нод

[@kirk7by]

имхо flutter лучше, производительнее, доки удобнее в разы. Да и dev-инструменты не такие глюченые как в react-native. Мне кажется разрабы Native свернули не туда..

[@NoName-mn5zu]

Это все круто, но проектов с 16 реактом тьма, никто не будет поднимать версию ради этих фич, в стартапах и небольших проектов на коленки это все здорово, но для нормального энтерпрайза этот use server нахер не нужен, а про обращение в базу на клиентской стороне, вообще молчу(бред)))

[@user-hu6pc2vt1q]

крутой контент, но пожалуйста!!! не говори веб, а говори вэб оч плохо звучит((((((((((

[@deha9210]

Как хорошо, что я перестал быть вротендером и свитчнулся в бекенд ❤

[@user-gk3wc4ei3w]

ну у РН дохерища проблем, никто не станет менять шило на мыло, куча проблем с производительностью, долгий даже прогретый старт, огромный бандл, UI баги, флаттер он потеснить сможет если только откажется от bridge подхода

[@skbmw530]

Из 14 минут реклама 2 минуты 🤦

[@user-in3jd6cm2t]

Поставь SponsorBlock)

[@it2138]

Вы как будто первый раз на ютубе) Если ты не топ блогер со своими правилами, то во всех рекламных интеграциях ТЗ на одну-полторы минуты

[@skbmw530]

@@it2138 именно по этому и не станешь топ блогером, я например через 1.5 мин выключил и не смотрел дальше.

[@tnsaturday]

После интеграции отключил видео, пошёл сразу в комменты. Горе блоггеру на заметку. По досмотрам не жди даже 10%

[@mikaelgevorgyan4521]

React когда да наконец-то тебя накроют ) уже сам реакт достал со своими развитьями. Остановись так сказать Реакт))) хватит уже. Это делают потому что просто))) достаёт им кодить что то и придумывают что то чтоб этот кусок не делать либо просто заработать на курсах деньги и новички больше захотели учится и платить деньги *)

[@deemon63]

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

[@mikaelgevorgyan4521]

@@deemon63 я и так) не на фронте, я full stack) на фреимворки я забил, обычная ванилка )мне гораздо по душе оказалось чем постоянно бегать тыкать в терминале и получать одни ошибки, которые не связаны с разработкой)

[@sakkarem]

Просто нужно использовать ангуляр

[@mikaelgevorgyan4521]

@@sakkarem зачем) ? я хочу что то гораздо интереснее,хотел бы уже была возможность использовать python eel+js так же на других) языках к примеру на php.А ты знал что можно ) в теге скрипт в атрибут src можешь загрузить php файл ) который будет возвращать какую то js функцию)) и запускать её

[@sakkarem]

@@mikaelgevorgyan4521 я уже слишком стар, мне интереснее стабильность)

[@structureandconquer]

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

[@drak0an]

реакт это какая-то легаси фигня

[@popov654]

А что не легаси?)

[@tnsaturday]

​@@popov654реакт это кусок вонючего кала, фекальная масса

[@user-ss7lw7wz9f]

Блин, много воды в видео

[@dimitriywhite7728]

vue умер(

[@dmitriy4415]

В РФ уже каждый второй проект стартует на vue. React должен уйти на свалку истории.

[@user-yg5tz3ow4z]

Сомнительное утверждение да ещё и без какой то проверенной статистики. В крупных компаниях я такой тренд не вижу, мб в стартапах что то и есть но не каждый второй...

[@SoniqueChannel]

ты уже плачешь?

[@user-qt5hy3vn5p]

Каждый второй из них закрывается через полгода 😂

[@sergeyaleksandrov6289]

Я плачу за ютуб премиум, чтоб потом 5 минут слушать эту дичь про клауд ру?

[@it2138]

Если вы не в курсе, то в РФ нет премиума, соответсвенно блогеры с него дохода не имеют. Поэтому вы платите за контент своим временем.

[@vid253]

Проснитесь, в РФ бизнес не рассматривает костыли типа реакта, в корпоративной среде проблемы 3в1 нет, потому что под все платформы можно в одно лицо писать на 1С уже лет 10 как, там даже код дорабатывать не надо почти, только скомпилить в нативные приложения в apk или iOS app

[@popov654]

А каким образом 1С позволяет писать мобильные приложения? Я что-то пропустил?)

[@vid253]

@@popov654 + kzbin.info/www/bejne/apbVc2qOh7l2qac - Обзор вышел 7 лет назад )

[@user-jk5nz9pk3o]

Какая херня ваш веб...

[@gapragapr]

Как будто бы такое себе обновление. Создаётся впечатление, что разделение ответственности жёстко и надолго послано куда глаза глядят. Из инструмента для ui получается какой-то швейцарский нож сомнительного качества

[@vkdevrel]

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

[@gapragapr]

@@vkdevrel в целом не понятна концепция серверных компонентов. Для напрягать инструмент обмена json'ами еще и генерацией компонентов? Я не могу назвать это ни удобным, ни практичным

[@vkdevrel]

@@gapragapr вот именно по этим же причинам я крайне скептически отношусь к реакт 18 и 19

[@user-yw9wx4lv2w]

@@vkdevrel так как бы next использует не свою реалзиацию серверых компонентов, а как раз реализацию реакта) Просто использует не паблик версию а канарейку