Новый React.js!

[@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]

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

[@Mobofilka]

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

[@dalysdeveloper907]

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

[@TheSky5028]

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

[@veleglas_ch]

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

[@Илья-с1л6э]

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

[@frontend_course]

@@Илья-с1л6ээто очень глобально. Оно не работает. Не стабильно еще и swr сырой

[@romanmed9035]

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

[@kostyafrompiter]

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

[@user2884xu4]

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

[@NeverGTI]

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

[@MrHohotyn]

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

[@darktau2114]

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

[@railbatyrshin7349]

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

[@max_mgtow]

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

[@sergeydev8273]

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

[@max_mgtow]

@@sergeydev8273 🤝

[@gnidkoav]

Бизнес Дривен Девелопмент во всей красе ))

[@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, и сам я, кстати, года три назад писал очень похожий фреймворк. Да, возможностей меньше, но и осваивать проще, и шанс наделать ошибок в коде - на порядок ниже.

[@glushk1na]

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

[@vasisafronov]

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

[@popov654]

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

[@popov654]

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

[@sakkarem]

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

[@VitalikLomakin-bt9oe]

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

[@nk_77777]

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

[@Владислав-е6щ9ъ]

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

[@romansamon9215]

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

[@Pax_Roma]

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

[@Илья-с1л6э]

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

[@romansamon9215]

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

[@alenache1]

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

[@Владимир-н4ы2б]

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

[@alenache1]

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

[@romanwednesday4401]

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

[@mit7871]

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

[@Илья-с1л6э]

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

[@tnsaturday]

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

[@veleglas_ch]

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

[@sakkarem]

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

[@postoronny]

Vanilla JS

[@TheSky5028]

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

[@sakkarem]

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

[@sakkarem]

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

[@sakkarem]

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

[@technozavrr]

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

[@grenadier4702]

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

[@cutetkingplush]

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

[@ingvarr6235]

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

[@msdryagin]

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

[@DreamingDolphing]

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

[@tnsaturday]

Не работают

[@neizvestniydrug]

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

[@tnsaturday]

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

[@xeleos]

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

[@fevra1]

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

[@gerda-morozova]

Это правда

[@rgaliev04]

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

[@gerda-morozova]

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

[@vladislavkomkov5178]

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

[@gomuncool1004]

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

[@DenisSokolov-pk3gz]

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

[@Teardrop-u4z]

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

[@vladm3174]

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

[@jake_timabay]

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

[@WERWOLION]

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

[@KarhlBoldarer]

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

[@gnidkoav]

Я наконец понял что не так с большинством фронтёров - они тащатся от постоянных изменений... 😒

[@olegkat4841]

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

[@nikman5541]

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

[@ВалентинХвалько]

Не понятно как react-strict-dom заменит react-native, если все равно приходится пилить два отдельных приложения, где в одном используются html css, а в другом другие методы для мобилок. Кажется все еще проще использовать отдельно React (NextJS) и отдельно React Native

[@Кямран-и3в]

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

[@bakurikokhodze8250]

tak i sdelaiut )))

[@Илья-с1л6э]

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

[@skeelo3157]

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

[@gerda-morozova]

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

[@germanmartirosyan6230]

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

[@DrKaufmann71]

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

[@NoName-mn5zu]

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

[@mikaelgevorgyan4521]

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

[@zxcqwe-c9u]

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

[@germanmartirosyan6230]

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

[@mikaelgevorgyan4521]

@@germanmartirosyan6230 это да))

[@mikaelgevorgyan4521]

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

[@popov654]

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

[@rbars96]

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

[@gooseob]

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

[@frontend_course]

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

[@frontend_course]

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

[@gooseob]

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

[@danilka6295]

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

[@llwebstylell242]

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

[@maksimvashkevich1429]

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

[@nmephchik]

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

[@romanmed9035]

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

[@limpchh]

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

[@igorzubkov3877]

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

[@romanmed9035]

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

[@MrCortc]

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

[@tnsaturday]

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

[@Alequez97]

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

[@artsiom5942]

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

[@kirk7by]

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

[@theoty-js]

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

[@frontend_course]

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

[@frontend_course]

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

[@frontend_course]

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

[@frontend_course]

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

[@mikaelgevorgyan4521]

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

[@deemon63]

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

[@mikaelgevorgyan4521]

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

[@sakkarem]

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

[@mikaelgevorgyan4521]

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

[@sakkarem]

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

[@mastnova2676]

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

[@tnsaturday]

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

[@pavel_gonzales]

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

[@ВиталикМисла]

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

[@zxcqwe-c9u]

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

[@skbmw530]

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

[@Владислав-е6щ9ъ]

Поставь SponsorBlock)

[@it2138]

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

[@skbmw530]

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

[@tnsaturday]

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

[@S-craY]

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

[@tnsaturday]

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

[@S-craY]

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

[@itstart2144]

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

[@popov654]

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

[@itstart2144]

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

[@structureandconquer]

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

[@Alequez97]

Если ты про реакт, то это не фрейморк

[@structureandconquer]

​@@Alequez97ну и крен с ним

[@jenyaspace]

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

[@drak0an]

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

[@popov654]

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

[@tnsaturday]

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

[@Clod.X]

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

[@sergeyaleksandrov6289]

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

[@it2138]

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

[@ПавелМеняйлов-й6у]

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

[@vid253]

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

[@popov654]

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

[@vid253]

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

[@dmitriy4415]

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

[@АртемЛамзов]

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

[@SoniqueChannel]

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

[@Александр-ф9в4ю]

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

[@dimitriywhite7728]

vue умер(

[@gapragapr]

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

[@vkdevrel]

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

[@gapragapr]

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

[@vkdevrel]

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

[@Илья-с1л6э]

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