Как использовать инструменты 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

Practical Enterprise React: Become an Effective React Developer in Your Team
Автор: Devlin Basilan Duldulao (2021)

Научитесь писать реальные корпоративные приложения, используя основы React и самые популярные библиотеки React.
Книга включает такие популярные библиотеки, как React Router v6 для навигации по маршрутам, Redux с Saga и Thunk для управления состояниями и Formik с Yup для валидации форм и ввода. Вы также будете работать с Material UI 5 (следующая основная версия самой популярной библиотеки компонентов пользовательского интерфейса в React), Axios в качестве клиентской библиотеки HTTP, JWT auth для аутентификации клиентских приложений и TypeScript. Наконец, вы научитесь развертывать приложение на Netlify и контейнеризировать приложение React, чтобы отправить его в виде отдельного экземпляра контейнера или в кластере Kubernetes.

✍️ @React_lib

Создавайте свои CRUD-приложения на основе React без ограничений

refine - это фреймворк на основе React для быстрой ✨ разработки веб-приложений. Он устраняет повторяющиеся задачи, требуемые операциями CRUD, и предоставляет стандартные решения для критически важных частей, таких как аутентификация, контроль доступа, маршрутизация, сеть, управление состоянием и i18n.

https://github.com/refinedev/refine

✍️ @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

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

Что такое состояние

В данной статье хотелось бы описать и раскрыть формальную сторону вопроса «что такое состояние» для лучшего понимания фундаментальных основ надёжности любого клиентского приложения. Хочется уже поставить точки в некоторых вопросах терминологии, чтобы чётче отвечать на вопросы «что, когда и зачем брать» при выборе библиотек и технологий для клиентского веб-приложения.

https://habr.com/ru/companies/ruvds/articles/706086/

✍️ @React_lib

5 советов по оптимизации производительности вашего приложения React

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

https://dzone.com/articles/5-tips-for-optimizing-your-react-apps-performance

✍️ @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

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

​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

Благодаря полному отсутствию определенных понятий относительно структуры и написания кода, React является невероятно гибкой библиотекой. Однако, поскольку React не установила никаких стандартов, эта гибкость делает сложным структурирование проекта с использованием React. В этой статье мы рассмотрим три различные структуры папок, которые могут быть применены к проектам любого размера. Сложность этих структур указана от самой простой к самой сложной, но в зависимости от размера вашего проекта более простой подход может оказаться предпочтительным.

https://dev.to/fpaghar/folder-structuring-techniques-for-beginner-to-advanced-react-projects-30d7

✍️ @React_lib

Что такое 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, как Remix и каталог приложений в Next 13.

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

https://frontendmastery.com/posts/rethinking-react-best-practices/

✍️ @React_lib

4 совета по React для мгновенного улучшения вашего кода

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

https://javascript.plainenglish.io/4-react-tips-to-instantly-improve-your-code-7456e028cfa3

✍️ @React_lib

Prop drilling and component composition in React

https://alexsidorenko.com/blog/react-prop-drilling-composition/

✍️ @React_lib

Многопоточное приложение React с использованием useWorker

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

https://dev.to/nilanth/multi-threaded-react-app-using-useworker-gf8

✍️ @React_lib