Выжимка первого дня React Conf: Краткий обзор
Vložit
- čas přidán 1. 06. 2024
- React Compiler это взрыв мозга. Анонс React Router v7. Серверные компоненты даже на React Native и многое другое нам рассказали только в первый день конференции. Я подготовил для вас краткую выжимку по всем докладам
Конференция день 1 - • React Conf 2024 Day 1
Ссылки на доклады:
- начинается эра фреймворков - • React Conf 2024 Day 1
- metadata - • React Conf 2024 Day 1
- actions overview, ref, React 19 rc - • React Conf 2024 Day 1
- React compiler - • React Conf 2024 Day 1
- React Router v7 - • React Conf 2024 Day 1
- что нового в React 19? - • React Conf 2024 Day 1
- переписываем проект на React 19 - • React Conf 2024 Day 1
- глубже в React Compiler - • React Conf 2024 Day 1
- Дэн Аюрамов, откуда появились RSC - • React Conf 2024 Day 1
- RSC на RN - • React Conf 2024 Day 1
Short talks:
- Real-time server components - • React Conf 2024 Day 1
- React 19 Deep Dive: Coordinating HTML - • React Conf 2024 Day 1
- Let’s break React’s rules - • React Conf 2024 Day 1
- RedwoodJS, now with React Server Components! - • React Conf 2024 Day 1
ТГ канал - t.me/it_sin9k
Поддержать Айти Синяка можно здесь:
CZcams: / @it-sin9k
boosty: boosty.to/sin9k
Patreon: / itsin9k
00:00 Анонс темы
00:27 Эра фреймворков
01:08 Metadata
01:28 Actions, refs
02:24 React Compiler
03:37 React Router v7
05:25 Что нового в React 19?
06:49 Переписываем проект на React 19
07:03 Глубже в React Compiler
07:27 Дэн Аюрамов, откуда появились RSC
07:53 RSC на RN
Подписаться на канал: / @it-sin9k
Twitter: / it_sin9k
я использовал forwardRef для создания компонента с оберткой React hook form для input
Я тоже)
+ (я для эл-та dialog)
Спасибо, наш синий друг.
+ кто не смотрел трансу и надеялся на синяка ❤
Лучший!)
Спасибо! Контент как всегда супер
Спасибо большое! Ждём выжимку второго дня)
Годнота! Спасибо за контент
Благодарю за выжимку!
Ман люблю твои обзоры спасибо ❤
спасибо!) это новый формат для меня) но кажется получилось неплохо)
Рада, что подписана на тебя) Очень полезный контент. Благодарю!
вижу много комментариев от тебя) рад быть полезным и добро пожаловать!)
@@it-sin9k Спасибо! Я сейчас готовлюсь к собеседованиям и восполняю пробелы
@@it-sin9k я сейчас готовлюсь к собеседованиям, поэтому активно заполняю пробелы)
да) я сам тоже готовлюсь к собесам и вспоминаю свои видосы))
@@it-sin9k странно) Я пару раз пыталась написать здесь комментарий про подготовку к собеседованию, но при перезагрузке страницы он исчезал. Но получается, ты на него всё равно ответил)
Хороший обзор. Спасибо!
о какие люди) от вас Михаил это вдвойне приятнее слышать)
Когда 2 гуру фронтэнда встретились в комментариях🔥🔥🔥
forwardRef использовал в основном в ui-kit'ах, в связке с useImperativeHandle для того, чтоб через рефку можно было вызвать различные методы компонента (который был обернут в forwardRef)
да, это рабочий кейс :)
Огонь
Почему сейчас все видео конференций не доступны?
кажется у них ограничения по региону, пробуйте ВПН
по react router - там смысл в том, что remix сильно полагался на react router, и фичи начались перемешиваться, remix и react router двигались навстречу друг к другу и вроде как они сливаются
да, там уже сильно перемешано все)
@@it-sin9k угу, судя по всему будут фреймворки основанные на рутерах, и каждый потом сможет чет свое построить
Так там даже разработчики одни и те же
по forwardRef - постоянно юзаем, как без него UIKit вообще построить то? А compound component?
а можно кейс рабочий какой?
@@it-sin9k банально свою кнопку сделать, как тут без рефа? Даже если в данный момент реф не нужен.
@@it-sin9k да прост кнопку делаешь, я не хочу все пропсы дива описывать, так же иногда может нужно будет взять реф от него, я же не знаю, что юзеру моего кода в голову взбредет. Паттерн декоратор обязывает тебя сохранять поведение расширяя компонент. Я добавляю размер и тему, таких пропросв нет и остальное все поведение сохраняю как есть. Так в целом большинство компонентов пишется. Посмари shadcn ui, radix ui - пожалуй это самые лучшие решения для ui, что я встречал. Я работал с mui, ant design, chakra, и какими то еще, и все они просто на несколько голов хуже чем озвученные ранее :)
@@snatvb с ark ui работал? радикс залупа, селект 100кб весит)
@@mulfyx спасибо за наводку, чекнул мельком, идея такая же как и у радикса. Я говорил про сам подход, в некоторых кейсах реализация может хромать конечно. Тип того же селекта) хоть по селекту еще вопрос, есть ли решение получше. Потому что ark судя по всему придется тащить весь. У радиска там прост много че для него тянется из своих же частей
Вопрос по поводу forwardRef. Когда вы сказали что никогда не юзали его, я начал переживать что я что-то делаю не так. Такой юзкейс:
Есть кнопка-элемент, который может использоваться в разных списках. Стили в списках должны быть одинаковые, но функциональность может отличаться. К примеру в первом списке я хочу чтобы этот элемент можно было перетаскивать (DnD) и вызывать callback, а в другом списке, чтобы просто вызывался callback, без DND. Для этого соответственно я в первом компоненте просто стилизую компонент (uikit), прокидываю пропсы, а для конкретного списка уже буду его использовать и обвешивать логикой в другом компоненте. Так вот библиотека react-dnd, например, возвращает мне ref, который я должен привязать к элементу, который будет перетаскиваться. Как можно ещё помимо forwardRef прокинуть ref в мой первый компонент, который находится в uikit?
Я действительно возможно не знаю более правильного и простого способа, буду рад научиться
Ветер дует в сторону фреймворков с тех пор как CRA перестал быть стандартом. Даже SPA сегодня проще и надежнее собрать не ремиксе или нексте. А теперь мы полностью возвращаемся к полусерверным приложениям.
Спасибо большое, очень мило с твоей стороны, для нас так потрудится. 🧞♂️
спасибо!) да я сам до ночи смотрел доклады)
@@it-sin9k, верю. 🙂👍
Привет, спасибо за выжимку! оригинальное видео недоступно? Через ВПН только или другая причина?
Хмм, кажется да, нужен ВПН
Видимо пора миграировать на 6 роутер, скоро нужен SSR, вся лгика роутера на 5 версии и ее довольно таки много, а вот next тащить не хочется делал несколько проектов и это кошмарная тулза, редко удается собрать столько дурацких проблем.
да, это большой вопрос, как начинать новые проекты в 2025 году)
Интересно, где можно записи посмотреть или скачать? особенно выступление Лидии Хейли. На канале React Conf трансляции 2 дней уже скрыты((
через vpn доступны
@@sergks1846 попробовал через vpn открыть канал React Conf - все равно нет трансляций на канале
@@sergks1846 через vpn тоже скрыты трансляции
@@sergks1846 увы, нет
Вот только открыть опять стрим, у меня все работает
@it-sin9k
Вопрос по реакту. Можешь подсказать. Если в реакте мы в фазу рендера в реконсилейшн только формируем эффект лист, а в коммит фазу уже начинаем ее исполнять, то в фазу коммита пользователь никак не может прервать, так? Но как react определит стоит ему создавать новое воркИнПрогресс дерево или нет, в момент прерывания в фазе рендера
в такой глубине я тоже могу лишь предполагать как это работает. По идее теперь есть concurrent mode и все работает не так линейно. По идее работает система тасок, и главное выполнять реакту таски, а таски теоретически могут быть с разных фаз
Чёт я запутался, за эту конференцию они одновременно рекомендуют, что пора бы переходить на фреймворки и при этом продолжают продвигать тему роутеров, которые можно использовать отдельно без фреймворков. Вся эта свобода действий вызывает только одну головную боль ))
тут надо отделять, команда React и их официальный сайт рекомендуют использовать только фреймворки.
НО создатели библиотеки react-router продвигает свой продукт и хочет, чтобы он продолжал жить и адаптирует его под новую реальность. Возможно это обретет определенную популярность и React начнет это тоже рекомендовать, кто знает.
", а все самое интересное смотрите в предыдущем видео..."
ахахах) ну почти да)
🥰🥰🥰
Благодарю. Вопрос если ставишь Некст то там свой роутер, как тогда быть с Реакт роутером 7?)
так это альтернативные варианты написания проекта, их не нужно вместе использовать :)
@@it-sin9k это да) выходит что данный роутер актуален только юзая Реакт как отдельную библиотеку. Если юзать как советуют гуру-разрабы внутри фреймворка, то значит роутером 7 не пользуешься. Хотя я не знаю как там в Ремиксе и др с роутерами.
По ссылкам на видеоролики пишет, что видео не доступно
У них походу ограничения по региону, нужен ВПН
Синячелло, ну, эти рекомендации по SSR фреймворкам... если же нужен просто SPA, то это по прежнему create-react-app, верно же?
Просто vite
думаю уже create-react-app умер. Сейчас для SPA есть лишь 2 варианта:
- делать eject для CRA или самому поддерживать проект
- либо же vite, он активно набирает популярность. Даже react-router v7 по идее сильно на него завяжется
где то в проде юзают cra еще?
То, что синяк за 6 лет опыта реакта никогда не юзал рефы на реакт компонентах, это такой хитрый байт на комменты? 🧐
Ну а если серьезно, неужели не возникала необходимость из родителя управлять каким-то состоянием html в дочерних компонентах?
Ну и если пользовался библиотеками готовых компонентов, где нужно прокидывать ref в качестве пропса - считай пользовался forwardRef-ом.
Я обычно переименовывал props с ref на reference и все прекрасно работало :)
@@it-sin9k Хе. Я не один такой =) Пробовал юзать forwardref в общих UI компонентах пару раз, но это было крайне неудобно, особенно в паре с memo. Плюнул и начал передавать через обычные пропсы.
@@it-sin9k не уверен что useImperativeHandle будет в этом случае работать когда необходимо ограничить доступ к dom элементу
У меня одного видео из описания недоступны?
Кажется нет, нужен походу ВПН
Аналогично, даже с системным впн нет доступа
есть ошибка: usecallback бзать все еще нужно будет, даже с компилятором
почему?
Единственный нормальный синяк
звучит как тост!)
О боже, они опять полностью переделали реакт-роутер.
Если они ускорили Facebook на 12 процентов просто с компайлером, то именно на столько он бил не оптимизирован самими дорогими инженерами современности))))
да) они показывали кодовую базу, и они пытались оптимизации все настроить, но на 12% им не удалось))
спасибо! но ззачем ты взял погонялово "синяк" (алкаш, для тех кто в танке)?
Потому что синий и легко запомнить)
Ни одна ссылка под видео не работает
Они блокируют по региону, нужен ВПН
без forwardRef не обойтись если пилишь свои кастомные ui компоненты с намеком на универсальность)
я обычно через props прокидывал, например называл reference, так многие пакеты делают
Пока к компилчтору много вопросов. Какие у него ограничения? В каких случаях он отработает, а в каких нет? Не будет ли он амешиваться в работу state менеджеров?
Стейт менеджеры основанные на работе через proxy работать не будут. Например MobX
А насчет того как работает у Jack Harrington-а есть хорошее видео на эту тему
начинал изучать react 17, а уже 19 😂😂
надо поторапливаться!)
Как же круто что теперь реакт приложения грузятся не за 2,5 секунды, а за 2,4. У меня просто на работе three.js грузится секунд 15-50. Мне эти 0000.1 секунды от оптимизации реакта ваще ничего не дают.
Ну если ваш проект улучшится на 12%, то по идее он будет запускаться за 13-44 секунды :)
@@it-sin9k Топ, спасибо за совет
Never use React again! )))
не надо богохульствовать))
рад, что есть все таки здравомыслящие
Аишная озвучка иногда сильно режет слух)
Это не AI, живой голос не много подкрученный софтом
@@rvoskanyan не соглашусь. Иногда очевидные ударения и интонации звучат не так, как нормальный человек говорит в жизни. Ждем коммент синяка)
@@ell1ar Автор сам рассказывал как-то в однои из интераью😁
@@ell1ar czcams.com/video/UkzKFFK2d5E/video.html