6 подходов к выборке данных в React
Получение данных является ключевым аспектом любого React-приложения. Для разработчиков React очень важно понимать различные подходы к получению данных и понимать, какой из них наиболее подходит для их конкретного случая.
https://dev.to/char_carr_dev/6-approaches-for-data-fetching-in-react-1ec3
✍️ @React_lib
Получение данных является ключевым аспектом любого React-приложения. Для разработчиков React очень важно понимать различные подходы к получению данных и понимать, какой из них наиболее подходит для их конкретного случая.
https://dev.to/char_carr_dev/6-approaches-for-data-fetching-in-react-1ec3
✍️ @React_lib
👍2
Лучшие практики React-разработки собраны на бесплатном вебинаре Optimizing React: Web & Beyond!
13 марта команда разработчиков Social Discovery Group на примере реальных кейсов расскажут про:
Как оптимизировать React-приложения и снизить нагрузку на устройства;
Как основные «фичи» React нашли себе применение в монтаже видео, 3D графике и написании ботов;
Как не сломать мемоизацию в React.
📅 Дата: 13 марта, 19:00 (GMT+4)
🔉 Язык: русский
Регистрируйтесь на вебинар 👉🏻 здесь 👈🏻
13 марта команда разработчиков Social Discovery Group на примере реальных кейсов расскажут про:
Как оптимизировать React-приложения и снизить нагрузку на устройства;
Как основные «фичи» React нашли себе применение в монтаже видео, 3D графике и написании ботов;
Как не сломать мемоизацию в React.
📅 Дата: 13 марта, 19:00 (GMT+4)
🔉 Язык: русский
Регистрируйтесь на вебинар 👉🏻 здесь 👈🏻
🔥2❤1👍1💯1
This media is not supported in your browser
VIEW IN TELEGRAM
⚛️ Совет по React💡
Ввод возвращаемых значений пользовательских хуков с помощью TypeScript
✍️ @React_lib
Ввод возвращаемых значений пользовательских хуков с помощью TypeScript
✍️ @React_lib
👍4
🔥Новый React core hook ➡️ useActionState
Исправление путаницы/ограничений в
- Переименовывает
- Возвращает состояние ожидания
- Перемещает хук в пакет react вместо
Теперь React Native разработчики тоже могут использовать его!
✍️ @React_lib
Исправление путаницы/ограничений в
useFormState - Переименовывает
useFormState в useActionState - Возвращает состояние ожидания
- Перемещает хук в пакет react вместо
react-dom Теперь React Native разработчики тоже могут использовать его!
✍️ @React_lib
👍2
React useTransition: изменение производительности или...?
Разбираемся, что такое
https://www.developerway.com/posts/use-transition
✍️ @React_lib
Разбираемся, что такое
React Concurrent Rendering, что делают такие хуки, как useTransition и useDeferredValue, каковы преимущества и недостатки их использования.https://www.developerway.com/posts/use-transition
✍️ @React_lib
👍4
Building Micro Frontends with React 18: Develop and deploy scalable applications using micro frontend strategies
Автор: Vinci J Rufus (2023)
В книге рассматриваются два паттерна построения микрофронтендов - паттерн multi-SPA и паттерн micro apps.Вы узнаете, какие паттерны и когда следует использовать, а также рассмотрите нюансы развертывания этих микрофронтендов с использованием облачных нативных технологий, таких как Kubernetes и Firebase. С помощью этой книги вы получите глубокое понимание управления состояниями, решения проблем с маршрутизацией и стратегий развертывания между различными микрофронтендами.
К концу книги вы научитесь проектировать и создавать микрофронтенд-приложение на основе React с использованием федерации модулей и эффективно развертывать его в облаке.
✍️ @React_lib
Автор: Vinci J Rufus (2023)
В книге рассматриваются два паттерна построения микрофронтендов - паттерн multi-SPA и паттерн micro apps.Вы узнаете, какие паттерны и когда следует использовать, а также рассмотрите нюансы развертывания этих микрофронтендов с использованием облачных нативных технологий, таких как Kubernetes и Firebase. С помощью этой книги вы получите глубокое понимание управления состояниями, решения проблем с маршрутизацией и стратегий развертывания между различными микрофронтендами.
К концу книги вы научитесь проектировать и создавать микрофронтенд-приложение на основе React с использованием федерации модулей и эффективно развертывать его в облаке.
✍️ @React_lib
👍8
Раскрытие возможностей Storybook
Выходя за рамки системы проектирования: как использовать Storybook для разработки, тестирования и проверки всех частей фронтенд-приложения.
Storybook - популярный инструмент для фронтальной веб-разработки, наиболее известный как витрина для дизайнерских систем и библиотек пользовательского интерфейса. Однако Storybook обладает гораздо более широкими возможностями, чем просто демонстрация компонентов пользовательского интерфейса!
https://commerce.nearform.com/blog/2023/unlocking-the-power-of-storybook/
✍️ @React_lib
Выходя за рамки системы проектирования: как использовать Storybook для разработки, тестирования и проверки всех частей фронтенд-приложения.
Storybook - популярный инструмент для фронтальной веб-разработки, наиболее известный как витрина для дизайнерских систем и библиотек пользовательского интерфейса. Однако Storybook обладает гораздо более широкими возможностями, чем просто демонстрация компонентов пользовательского интерфейса!
https://commerce.nearform.com/blog/2023/unlocking-the-power-of-storybook/
✍️ @React_lib
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
⚛️ Совместимость + разделение задач - ключевой момент в React
Узнайте, как создавать различные уровни абстракции, чтобы сделать ваши компоненты более устойчивыми к изменениям.
✍️ @React_lib
Узнайте, как создавать различные уровни абстракции, чтобы сделать ваши компоненты более устойчивыми к изменениям.
✍️ @React_lib
👍3
Не используйте React.lazy() при рендеринге.
Он будет возвращать каждый раз новый экземпляр компонента (как HOC) и потеряет свое состояние при повторном рендеринге.
Небольшая ошибка, найденная пользователем Docusaurus: лучше перенести lazy call за пределы компонента.
✍️ @React_lib
Он будет возвращать каждый раз новый экземпляр компонента (как HOC) и потеряет свое состояние при повторном рендеринге.
Небольшая ошибка, найденная пользователем Docusaurus: лучше перенести lazy call за пределы компонента.
✍️ @React_lib
👍3🫡1
👀 Похоже, что React 19 пересматривает обработку ошибок
Включая 2 новых публичных API:
-
-
Callbacks, срабатывающие на React Root (createRoot/hydrateRoot)
✍️ @React_lib
Включая 2 новых публичных API:
-
onCaughtError-
onUncaughtErrorCallbacks, срабатывающие на React Root (createRoot/hydrateRoot)
startTransition/flushSync теперь будет подавлять ошибки вместо их повторного выбрасывания на местах вызова.✍️ @React_lib
👍7
Перед вами — книга-метод, книга-наставник, способная перевернуть мышление и помочь выработать осознанный подход к работе и жизни в целом путём высокоуровневого планирования.
В своей второй книге IT-архитектор, методолог, педагог Александр Бындю раскрывает наиболее эффективный на сегодняшний день метод стратегического планирования, получивший название «Карта гипотез». Карта учит, как достигать намеченной цели через гипотезы, и служит навигатором на этом пути. В основу книги легли годы практики, и с уверенностью можно сказать, что Карта гипотез позволяет создать стратегию достижения для самых амбициозных целей.
У Карты гипотез нет ограничений по области применения или роли пользователя — она будет полезна в самых разных ситуациях, от личного планирования до планирования работы огромной компании. Автор надеется, что его метод, которому посвящена эта книга, послужит вашему благополучию во всех сферах жизни.
Ознакомиться с книгой
В своей второй книге IT-архитектор, методолог, педагог Александр Бындю раскрывает наиболее эффективный на сегодняшний день метод стратегического планирования, получивший название «Карта гипотез». Карта учит, как достигать намеченной цели через гипотезы, и служит навигатором на этом пути. В основу книги легли годы практики, и с уверенностью можно сказать, что Карта гипотез позволяет создать стратегию достижения для самых амбициозных целей.
У Карты гипотез нет ограничений по области применения или роли пользователя — она будет полезна в самых разных ситуациях, от личного планирования до планирования работы огромной компании. Автор надеется, что его метод, которому посвящена эта книга, послужит вашему благополучию во всех сферах жизни.
Ознакомиться с книгой
🤔2👍1
ReaPer : Инструмент с открытым исходным кодом для анализа производительности React-приложений
https://medium.com/@annako/reaper-an-open-source-dev-tool-to-analyze-react-application-performance-786f1d40f6de
✍️ @React_lib
https://medium.com/@annako/reaper-an-open-source-dev-tool-to-analyze-react-application-performance-786f1d40f6de
✍️ @React_lib
👍3
Многопоточное приложение React с использованием useWorker
Если мы выполняем какую-либо требующую больших затрат задачу, она будет блокировать взаимодействие с пользовательским интерфейсом. И пользователю придется ждать, пока она завершится, чтобы выполнить любое другое действие, что создает плохое впечатление от UX.
https://dev.to/nilanth/multi-threaded-react-app-using-useworker-gf8
✍️ @React_lib
Если мы выполняем какую-либо требующую больших затрат задачу, она будет блокировать взаимодействие с пользовательским интерфейсом. И пользователю придется ждать, пока она завершится, чтобы выполнить любое другое действие, что создает плохое впечатление от UX.
https://dev.to/nilanth/multi-threaded-react-app-using-useworker-gf8
✍️ @React_lib
❤5
Headless Component: паттерн для создания пользовательских интерфейсов React
По мере того как элементы управления React UI становятся все более сложными, сложная логика может переплетаться с визуальным представлением. Это затрудняет рассуждения о поведении компонента, затрудняет его тестирование и приводит к необходимости создавать похожие компоненты, которым нужен другой внешний вид. Headless Component извлекает всю невизуальную логику и управление состоянием, отделяя мозг компонента от его внешнего вида.
https://martinfowler.com/articles/headless-component.html
✍️ @React_lib
По мере того как элементы управления React UI становятся все более сложными, сложная логика может переплетаться с визуальным представлением. Это затрудняет рассуждения о поведении компонента, затрудняет его тестирование и приводит к необходимости создавать похожие компоненты, которым нужен другой внешний вид. Headless Component извлекает всю невизуальную логику и управление состоянием, отделяя мозг компонента от его внешнего вида.
https://martinfowler.com/articles/headless-component.html
✍️ @React_lib
👍3
Как создавать собственные пользовательские React Hooks
React Hooks открывают совершенно новый способ написания функциональных компонентов, позволяя нам добавлять возможности, доступные для компонентов класса, например, логику с состоянием.
https://blog.logrocket.com/create-your-own-custom-react-hooks/
✍️ @React_lib
React Hooks открывают совершенно новый способ написания функциональных компонентов, позволяя нам добавлять возможности, доступные для компонентов класса, например, логику с состоянием.
https://blog.logrocket.com/create-your-own-custom-react-hooks/
✍️ @React_lib
👍4
Деструктуризация в React. Очевидно, но важно
Деструктуризация, которая появилась в стандарте ES6, уже не вызывает вопросов у многих из нас, есть большое количество статей, раскрывающих ее возможности. В основном, мы все тесно с ней дружим и пользуемся.
Казалось бы, что можно рассказать о том, о чем все и так знают? Но практика и чтение статей на Хабре, показали, что есть некоторые нюансы использования деструктуризации в React, о которых не все из нас знают или просто не задумываются, хотя они и являются очевидными.
Как часто Вам приходилось сталкиваться с подобным кодом?
https://habr.com/ru/articles/804187/
✍️ @React_lib
Деструктуризация, которая появилась в стандарте ES6, уже не вызывает вопросов у многих из нас, есть большое количество статей, раскрывающих ее возможности. В основном, мы все тесно с ней дружим и пользуемся.
Казалось бы, что можно рассказать о том, о чем все и так знают? Но практика и чтение статей на Хабре, показали, что есть некоторые нюансы использования деструктуризации в React, о которых не все из нас знают или просто не задумываются, хотя они и являются очевидными.
Как часто Вам приходилось сталкиваться с подобным кодом?
export default function ParentComponent ({ post }) {
const { images, title } = post
return (
<ChildComponent images={images} title={title} />
)
}https://habr.com/ru/articles/804187/
✍️ @React_lib
👍3