React

Переосмысление лучших практик React Мы начнем с ознакомления с основными ограничениями React и прошлыми подходами к управлению ими, исследуя основные паттерны и принципы, которые объединяют счастливые приложения React. К концу мы поймем, как меняются ментальные модели в таких фреймворках React, как Remix и каталог приложений в Next 13. Давайте начнем с изучения основных проблем, которые мы пытались решить до сих пор. Это поможет нам контекстуализировать рекомендацию основной команды React использовать с React фреймворки более высокого уровня, которые имеют тесную интеграцию между сервером, клиентом и бандлером. https://frontendmastery.com/posts/rethinking-react-best-practices/ ✍️ @React_lib

Переходите на новый уровень в JS-разработке и разнообразьте свою работу! Пройди тест по JS и проверь как хорошо ты знаешь язык. Ответишь — пройдешь на продвинутый курс «JavaScript Developer. Professional» от OTUS по специальной цене + получишь видео-курс по Git в подарок 👉 ПРОЙТИ ТЕСТИРОВАНИЕ https://otus.pw/yopR/ Нативная интеграция. Информация о продукте www.otus.ru

Что такое Vite и почему вы должны использовать его вместо создания React-приложения? Очень просто, Create React App (далее CRA) и Vite (произносится veet, в переводе с французского означает "быстрый") - это инструменты, которые помогают создавать новые React-приложения. https://luketheweb.dev/blog/what-is-vite-and-why-should-you-use-it-instead-of-create-react-app ✍️ @React_lib

Техники структурирования папок для начинающих и продвинутых проектов React Благодаря полному отсутствию определенных понятий относительно структуры и написания кода, React является невероятно гибкой библиотекой. Однако, поскольку React не установила никаких стандартов, эта гибкость делает сложным структурирование проекта с использованием React. В этой статье мы рассмотрим три различные структуры папок, которые могут быть применены к проектам любого размера. Сложность этих структур указана от самой простой к самой сложной, но в зависимости от размера вашего проекта более простой подход может оказаться предпочтительным. https://dev.to/fpaghar/folder-structuring-techniques-for-beginner-to-advanced-react-projects-30d7 ✍️ @React_lib

​React-query Хуки для получения, кэширования и обновления асинхронных данных в React • Transport/Protocol/Backend независимая выборка данных (REST, GraphQL, promises, что угодно!) • Автоматическое кэширование + выборка (stale-while-revalidate, Window Refocus, Polling/Realtime) • Параллельные + зависимые запросы • Мутации + Reactive выборка запросов • Многослойный кэш + автоматический сборщик «мусора» (garbage collector) • Load-More + Infinite Scroll Queries w/ Scroll Recovery • Отмена запросов и многое друго https://github.com/TanStack/query 👉 @Githublib

React Batching от создания (v0.4.0) до React 18 React Batching - это инструмент, который неявно присутствует в ежедневной разработке, но все же его понимание, может помочь ускорить вашу страницу, а так же объяснить иногда казалось бы странное поведение рендера 00:00 Анонс темы 01:25 Знакомство со спикером 02:44 Задачки по батчингу 07:35 От теории к практике 09:55 Что есть батчинг 11:08 unstable_batchedUpdates 14:15 Пример из реальной жизни 17:14 flushSync 21:31 Redux не решает проблему 24:12 История батчинга 28:38 Вспоминаем React версии 0.4.0 30:00 Благодарность 30:45 Вопросы и Ответы https://www.youtube.com/watch?v=lj0JjbVJPz0 ✍️ @React_lib

5 паттернов проектирования React, которые вы должны знать Вы устали писать один и тот же код снова и снова? Хотите поднять свои навыки работы с React на новый уровень? Откройте для себя силу HOCs, Render Props, Hooks и Context API; эти пять умопомрачительных паттернов проектирования React изменят ваше представление о кодинге! https://javascript.plainenglish.io/5-react-design-patterns-you-should-know-629030e2e2c7 ✍️ @React_lib

5 советов по оптимизации производительности вашего приложения React Одна из самых неприятных вещей для разработчика React - вкладывать время и усилия в создание приложения, а потом обнаружить, что оно работает медленно и не реагирует на запросы. https://dzone.com/articles/5-tips-for-optimizing-your-react-apps-performance ✍️ @React_lib

Что такое состояние В данной статье хотелось бы описать и раскрыть формальную сторону вопроса «что такое состояние» для лучшего понимания фундаментальных основ надёжности любого клиентского приложения. Хочется уже поставить точки в некоторых вопросах терминологии, чтобы чётче отвечать на вопросы «что, когда и зачем брать» при выборе библиотек и технологий для клиентского веб-приложения. https://habr.com/ru/companies/ruvds/articles/706086/ ✍️ @React_lib

React + TypeScript: необходимый минимум Многие React-разработчики спрашивают себя: надо ли мне учить TypeScript? Еще как надо! Преимущества изучения TS могут быть сведены к следующему: ваши шансы получить более высокооплачиваемую работу сильно увеличатся; в вашем коде будет намного меньше багов, его будет легче читать и поддерживать; рефакторить код и обновлять зависимости станет гораздо проще. Эта статья представляет собой минимальное введение по использованию TS в React. Rus https://habr.com/ru/companies/timeweb/articles/707744/ Eng https://profy.dev/article/react-typescript ✍️ @React_lib

Красивые и поражающие воображение эффекты с WebGL Render Targets Поскольку я постоянно работаю над оттачиванием навыков создания красивых и интерактивных 3D-проектов в Интернете, я постоянно знакомлюсь с новыми инструментами и техниками, от разнообразных сцен React Three Fiber до великолепных шейдерных материалов. Однако есть один инструмент Three.js, который часто является общим знаменателем для всех этих увлекательных проектов, с которым я постоянно сталкиваюсь: Render Targets. https://blog.maximeheckel.com/posts/beautiful-and-mind-bending-effects-with-webgl-render-targets/ ✍️ @React_lib

Создавайте свои CRUD-приложения на основе React без ограничений refine - это фреймворк на основе React для быстрой ✨ разработки веб-приложений. Он устраняет повторяющиеся задачи, требуемые операциями CRUD, и предоставляет стандартные решения для критически важных частей, таких как аутентификация, контроль доступа, маршрутизация, сеть, управление состоянием и i18n. https://github.com/refinedev/refine ✍️ @React_lib

Как использовать инструменты React Dev - с примерами кода и видео Когда вы работаете над проектом React, одним из самых простых способов отладки кода является использование React Dev Tools. React Dev Tools - это расширение, созданное командой React. Оно позволяет разработчикам отлаживать свой код внутри своих инструментов разработчика. После добавления расширения вы получите 2 новые вкладки в DevTools под названием Components и Profiler соответственно. https://www.freecodecamp.org/news/how-to-use-react-dev-tools/ ✍️ @React_lib

🟡Тест по React JS от OTUS — Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой! 👉🏻ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS Курс доступен в рассрочку. 🎁 Пройдете успешно тест, получите доступ к открытым урокам курса. Нативная интеграция. Информация о продукте www.otus.ru

React: разработка реального приложения с помощью React Query Если вам когда-либо приходилось разрабатывать React-приложение, в котором используются асинхронные данные (а это практически любое приложение), вы наверняка знаете, насколько утомительным может быть обработка различных состояний (загрузка, ошибка и т.д.), распределение состояния между компонентами, обращающимися к одной и той же конечной точке API и обеспечение согласованности состояния в компонентах. Rus https://habr.com/ru/companies/timeweb/articles/702876/ Eng https://www.smashingmagazine.com/2022/01/building-real-app-react-query/ ✍️ @React_lib

Я слишком остро реагирую? Или React слишком остро реагирует? Когда я только начинал заниматься веб-разработкой, это было в основном с Python/Django. Все рендерилось на стороне сервера, и я ни разу не задумывался о "производительности рендеринга". Спустя 10 лет, когда компьютеры стали по крайней мере в два раза быстрее, производительность рендеринга стала более важной проблемой, чем когда-либо. Одностраничные приложения (SPA) и фронтенд-библиотеки, такие как React, поощряют и позволяют создавать высокодинамичные веб-страницы. К сожалению, по моему опыту, рекомендуемый по умолчанию способ написания кода React на самом деле не очень хорошо поддерживает высокодинамичные страницы. В этой заметке я рассмотрю проблемы, возникающие со стандартным кодом React, рекомендуемые варианты улучшения производительности React и, наконец, приведу примеры на ванильном JS. https://devtails.xyz/@adam/am-i-overreacting-or-is-react-over-reacting ✍️ @React_lib

Микросервисы — популярный способ создания и поддержки современных веб-сервисов. Развиваетесь в веб-разработке? Узнайте, как создавать микросервисы при помощи NodeJS и GRPC 18 мая в 20:00 состоится вебинар «NodeJS + Microservices». За 1,5 часа вы узнаете, как создавать микросервисы с использованием протокола gRPC. На занятии мы разберем: — Плюсы и минусы микросервисного подхода — Как мигрировать монолит на микросервисы — Решение на базе NodeJS + протокола GRPC. В результате у вас будет база для создания своего микросервиса на NodeJS. Открытый урок бесплатный и состоится в рамках онлайн-курса «Node.js Developer» в OTUS. Продолжить обучение вы сможете уже на курсе, на него действуют разные способы оплаты. Для участия пройдите вступительный тест https://otus.pw/v3rQ/ Нативная интеграция. Информация о продукте www.otus.ru

Добавьте движение в свои приложения с помощью одной строки кода AutoAnimate - это анимационная утилита с нулевой конфигурацией, которая добавляет плавные переходы в ваше веб-приложение. Вы можете использовать ее с React, Solid, Vue, Svelte или любым другим приложением JavaScript. https://auto-animate.formkit.com/ ✍️ @React_lib