React

⚛️ При изучении React мне больше всего пришлось столкнуться с проблемой разделения задач. Вот пример того, как можно отделить бизнес-логику от пользовательского интерфейса в React ✍️ @React_lib

❓Хотите прокачаться в фронтенд-разработке на JS? Ждем вас на открытом практическом уроке «Хуки и оптимизация в React» от OTUS, где мы: - рассмотрим работу с состоянием в компонентах react; - напишем большой список инпутов; - проведем анализ производительности; - оптимизируем код. Спикер Игорь Звягин — опытный JS-разработчик. Встречаемся 27 мая в 20:00 мск в рамках курса «React.js Developer». Все участники вебинара получат специальную цену на обучение и персональную консультацию от менеджеров OTUS! 👉 Оставьте заявку прямо сейчас, чтобы посетить бесплатный урок: https://vk.cc/cx5vlr Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Как я уменьшил размер образа Docker с 1,43 ГБ до 22,4 МБ Если вы занимаетесь веб-разработкой, то, вероятно, уже знаете об идее контейнеризации и о том, как это здорово и все такое. Но при работе с Docker размер образа вызывает серьезные опасения. Зачастую он превышает 1,43 ГБ только для шаблонного проекта, который мы получаем из create-react-app. Сегодня мы будем контейнеризовать ReactJS-приложение и узнаем несколько приемов, позволяющих уменьшить размер образа и при этом повысить производительность. Трюки будут показаны для ReactJS, но они применимы к любому NodeJS-приложению. https://dev.to/mohammadfaisal/how-i-reduced-docker-image-size-from-143-gb-to-224-mb-53nc ✍️ @React_lib

⚛️ React 19 будет поставляться с хуком useOptimistic(): сделайте вид, что все пойдет как надо... если не пойдет. ✍️ @React_lib

⚛️ Как типизировать общие компоненты в React с помощью TypeScript ✍️ @React_lib

Frontend meetup 1. Хоп, хлоп, и MVP готов — Дмитрий Карловский, HyOO Нарисуем полноценный фронтенд без чат-ботов. Поднимем базу данных без сервера. Задеплоим всё на статический сервер без боли. И будем наслаждаться результатом без тормозов. 2. Причины деградации перформанса фронтенда — Денис Басковский, МТС Диджитал Почему скорость железа не успевает за веб-приложениями. Причины большого количества JS-кода на сайте. SPA по 20мб уже действительность. Инструменты куда мы смотрим чтобы найти про лесы большого размера сайта. Графики скорости и восприятие клиентов. Почему скорость браузерной страницы лагает на 4090ti, а Cyberpunk идет на максималках. 3. Serverless - уже можно? — Андрей Лаврентьев, NDA Опыт запуска проекта на cloudflare pages и трудности, с которыми пришлось столкнуться на каждом шаге. Модератор Григорий Петров, Devrel, Evrone Эксперт Глеб Михеев, Руководитель ПК, FrontendConf ➖➖➖ 🗓 22 мая, начало в 19:00 мск, Среда 🌐 ОНЛАЙН ✅ Регистрация на мероприятие

Создание и отправка электронных писем с помощью React Коллекция высококачественных нестилевых компонентов для создания красивых электронных писем с использованием React и TypeScript. Благодаря поддержке темного режима он снижает сложность создания отзывчивых писем. Кроме того, он позаботится о несоответствиях между Gmail, Outlook и другими почтовыми клиентами. https://github.com/resendlabs/react-email ✍️ @React_lib

Переход на React В Daily Dev рассказали, как мигрировали с Preact на React, стремясь решить проблемы разработки и повысить производительность. Переход, осуществленный в ходе командного хакатона, потребовал значительного планирования, тестирования и корректировки кодовой базы. Этот переход обеспечил лучшую совместимость с Next.js, улучшил опыт разработки и подготовил платформу к будущим технологическим достижениям. https://daily.dev/blog/moving-back-to-react ✍️ @React_lib

Как использовать пользовательский хук для обработки состояний массива в компонентах 💡 ✍️ @React_lib

Frontend meetup 1. Хоп, хлоп, и MVP готов — Дмитрий Карловский, HyOO Нарисуем полноценный фронтенд без чат-ботов. Поднимем базу данных без сервера. Задеплоим всё на статический сервер без боли. И будем наслаждаться результатом без тормозов. 2. Причины деградации перформанса фронтенда — Денис Басковский, МТС Диджитал Почему скорость железа не успевает за веб-приложениями. Причины большого количества JS-кода на сайте. SPA по 20мб уже действительность. Инструменты куда мы смотрим чтобы найти про лесы большого размера сайта. Графики скорости и восприятие клиентов. Почему скорость браузерной страницы лагает на 4090ti, а Cyberpunk идет на максималках. 3. Serverless - уже можно? — Андрей Лаврентьев, NDA Опыт запуска проекта на cloudflare pages и трудности, с которыми пришлось столкнуться на каждом шаге. Модератор Григорий Петров, Devrel, Evrone Эксперт Глеб Михеев, Руководитель ПК, FrontendConf ➖➖➖ 🗓 22 мая, начало в 19:00 мск, Среда 🌐 ОНЛАЙН ✅ Регистрация на мероприятие

Совет по React💡 Отложите создание non-primitive values, если вы используете их в массиве зависимостей. ✍️ @React_lib

⚛️ useEffect против useLayoutEffect useEffect: асинхронный и не задерживает отрисовку DOM в браузере. useLayoutEffect: синхронный, и он задерживает отрисовку DOM для браузера. Он выполняет свой код непосредственно перед отрисовкой в браузере. ✍️ @React_lib

❓Как строится современная веб-разработка на JS и при чем тут React? Узнайте на открытом практическом уроке от OTUS, где опытный эксперт разберет: - какие подходы используются в разработке сегодня; - основные технологии для разработки фронтенда: react, vue, angular; - их преимущества и недостатки. Спикер Игорь Звягин — опытный JS-разработчик. Встречаемся 13 мая в 20:00 мск в рамках курса «React.js Developer». Все участники вебинара получат специальную цену на обучение и персональную консультацию от менеджеров OTUS! 👉 Оставьте заявку прямо сейчас, чтобы посетить бесплатный урок: https://otus.pw/awig/?erid=2Vtzqxds1rZ Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

⚛️ Вместо того чтобы смешивать бизнес-логику в компонентах React, мне нравится создавать небольшие и предсказуемые абстракции reducer с помощью useReducer ✍️ @React_lib

⚛️ Как использовать композицию в React для создания расширяемых компонентов? ✍️ @React_lib

Авторизация в React - базовые сведения Вэтой статье я хочу рассказать об архитектуре приложения, реализующего функцию аутентификации и авторизации. Статья построена на минималистичном примере. Тут главное понять концепцию. Сделав это, приложение можно дополнить новым функционалом и включить в любое своё приложение. https://danshin.ms/simple-login-react-app/ ✍️ @React_lib

React 19: forwardRef → ref ✍️ @React_lib

🖥 React 19: useFormState → useActionState ✍️ @React_lib

React 19 больше не будет поддерживать fetch() 🌶🌶🌶 Вам придется использовать React.cache(), чтобы избежать дублирования запросов fetch(). https://github.com/facebook/react/pull/28896 ✍️ @React_lib

Разделение логики и представления в React-приложении Самыми популярными подходами в декомпозиции React-компонентов являются hoc и hook. Т.е. компоненты высшего порядка и кастомные хуки. С их помощью можно сделать приложение более гибким и легче тестируемым, однако сами подходы немного разнятся. 00:00 Постановка задачи 02:13 HOC - компоненты высшего порядка 16:34 Hooks - кастомные хуки 26:39 Подведение итогов источник ✍️ @React_lib