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
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
✍️ @React_lib
Хуки для получения, кэширования и обновления асинхронных данных в 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
✍️ @React_lib
👍4
Понимаем полностью useMemo и useCallback
Экскурсия по двум самым известным хукам в React
Если вы изо всех сил пытались разобраться в useMemo и useCallback, вы не одиноки! Я разговаривал со многими разработчиками React, которые cломали голову над этими двумя хуками.
Моя цель в этом здесь — прояснить всю эту путаницу. Мы узнаем, что они делают, почему они полезны и как получить от них максимальную пользу.
https://habr.com/ru/articles/807139/
✍️ @React_lib
Экскурсия по двум самым известным хукам в React
Если вы изо всех сил пытались разобраться в useMemo и useCallback, вы не одиноки! Я разговаривал со многими разработчиками React, которые cломали голову над этими двумя хуками.
Моя цель в этом здесь — прояснить всю эту путаницу. Мы узнаем, что они делают, почему они полезны и как получить от них максимальную пользу.
https://habr.com/ru/articles/807139/
✍️ @React_lib
👍3
Media is too big
VIEW IN TELEGRAM
React-magic-motion
Это библиотека react.js, которая ✨ волшебным образом анимирует ваши компоненты.
https://www.react-magic-motion.com/
✍️ @React_lib
Это библиотека react.js, которая ✨ волшебным образом анимирует ваши компоненты.
https://www.react-magic-motion.com/
✍️ @React_lib
👍7🔥2
Media is too big
VIEW IN TELEGRAM
Разделение логики и представления в React-приложении
Самыми популярными подходами в декомпозиции React-компонентов являются hoc и hook. Т.е. компоненты высшего порядка и кастомные хуки. С их помощью можно сделать приложение более гибким и легче тестируемым, однако сами подходы немного разнятся.
00:00 Постановка задачи
02:13 HOC - компоненты высшего порядка
16:34 Hooks - кастомные хуки
26:39 Подведение итогов
источник
✍️ @React_lib
Самыми популярными подходами в декомпозиции React-компонентов являются hoc и hook. Т.е. компоненты высшего порядка и кастомные хуки. С их помощью можно сделать приложение более гибким и легче тестируемым, однако сами подходы немного разнятся.
00:00 Постановка задачи
02:13 HOC - компоненты высшего порядка
16:34 Hooks - кастомные хуки
26:39 Подведение итогов
источник
✍️ @React_lib
👍2
React 19 больше не будет поддерживать
Вам придется использовать
https://github.com/facebook/react/pull/28896
✍️ @React_lib
fetch() 🌶🌶🌶Вам придется использовать
React.cache(), чтобы избежать дублирования запросов fetch().https://github.com/facebook/react/pull/28896
✍️ @React_lib
👍7
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5👍3