Использование шаблонов проектирования группы GoF в React
В этой статье поговорим о том, как написать в React многократно используемый код, используя три шаблона проектирования группы Gang-of-Four.
https://blog.bitsrc.io/using-gof-design-patterns-with-react-c334f3ea3147
✍️ @React_lib
В этой статье поговорим о том, как написать в React многократно используемый код, используя три шаблона проектирования группы Gang-of-Four.
https://blog.bitsrc.io/using-gof-design-patterns-with-react-c334f3ea3147
✍️ @React_lib
👍3
Рекомендуем к прочтению книгу Александра Бындю "Антихрупкость в IT"
Эта книга — результат многолетнего опыта построения IT-продуктов. И прежде всего она о том, как выстроить процессы разработки IT-систем таким образом, чтобы успевать вовремя подстроиться под любые изменения.
В её основе — описание работающих практик, примеры из реальных проектов, анализ ошибок и выводы. В книге собраны рекомендации для владельцев бизнеса и разработчиков. Первые приобретут систематизированные знания о том, как правильно взаимодействовать с IT, а вторые — как делать хорошо и не делать плохо.
Сайт издания
Ознакомиться с книгой
Эта книга — результат многолетнего опыта построения IT-продуктов. И прежде всего она о том, как выстроить процессы разработки IT-систем таким образом, чтобы успевать вовремя подстроиться под любые изменения.
В её основе — описание работающих практик, примеры из реальных проектов, анализ ошибок и выводы. В книге собраны рекомендации для владельцев бизнеса и разработчиков. Первые приобретут систематизированные знания о том, как правильно взаимодействовать с IT, а вторые — как делать хорошо и не делать плохо.
Сайт издания
Ознакомиться с книгой
✨React-bits
Коллекция паттернов, антипаттернов, советов и полезных ресурсов для React-разработчиков.
https://github.com/vasanthk/react-bits
✍️ @React_lib
Коллекция паттернов, антипаттернов, советов и полезных ресурсов для React-разработчиков.
https://github.com/vasanthk/react-bits
✍️ @React_lib
GitHub
GitHub - vasanthk/react-bits: ✨ React patterns, techniques, tips and tricks ✨
✨ React patterns, techniques, tips and tricks ✨. Contribute to vasanthk/react-bits development by creating an account on GitHub.
👍2
Работа с ошибками как профессионал в TypeScript
Обработка ошибок в Type/JavaScript - это тема, которой не уделяется должного внимания. Для долговечности любого проекта очень важно отлавливать и регистрировать ошибки.
С годами, когда я начал больше работать с TypeScript, я начал понимать, что не совсем понимаю обработку ошибок. Я часто сталкивался с этой проблемой:
https://engineering.udacity.com/handling-errors-like-a-pro-in-typescript-d7a314ad4991
✍️ @React_lib
Обработка ошибок в Type/JavaScript - это тема, которой не уделяется должного внимания. Для долговечности любого проекта очень важно отлавливать и регистрировать ошибки.
С годами, когда я начал больше работать с TypeScript, я начал понимать, что не совсем понимаю обработку ошибок. Я часто сталкивался с этой проблемой:
https://engineering.udacity.com/handling-errors-like-a-pro-in-typescript-d7a314ad4991
✍️ @React_lib
👍1
Media is too big
VIEW IN TELEGRAM
The Easiest React Hook
00:00 - Introduction
00:30 - Why this hook is needed
02:25 - How to use the useId hook
04:03 - querySelector gotcha
05:08 - How to use the useId hook with multiple ids
✍️ @React_lib
00:00 - Introduction
00:30 - Why this hook is needed
02:25 - How to use the useId hook
04:03 - querySelector gotcha
05:08 - How to use the useId hook with multiple ids
✍️ @React_lib
👍3
The Best React Design Patterns You Should Know About
https://www.uxpin.com/studio/blog/react-design-patterns
✍️ @React_lib
https://www.uxpin.com/studio/blog/react-design-patterns
✍️ @React_lib
React re-renders guide: everything, all at once
https://www.developerway.com/posts/react-re-renders-guide
✍️ @React_lib
https://www.developerway.com/posts/react-re-renders-guide
✍️ @React_lib
Developerway
React re-renders guide: everything, all at once
React re-renders "cheatsheet". Short descriptions with visual aid and code examples of: what re-renders are, what triggers them, most important re-renders related patterns and antipatterns to remember.
👍2
Использование шаблонов проектирования группы GoF в React
В этой статье поговорим о том, как написать в React многократно используемый код, используя три шаблона проектирования группы Gang-of-Four.
Rus https://habr.com/ru/company/rshb/blog/680770/
Eng https://blog.bitsrc.io/using-gof-design-patterns-with-react-c334f3ea3147
✍️ @React_lib
В этой статье поговорим о том, как написать в React многократно используемый код, используя три шаблона проектирования группы Gang-of-Four.
Rus https://habr.com/ru/company/rshb/blog/680770/
Eng https://blog.bitsrc.io/using-gof-design-patterns-with-react-c334f3ea3147
✍️ @React_lib
👍2
8 Mistakes every junior React developer makes
https://kusham1998.medium.com/8-mistakes-every-junior-react-developer-makes-7ceace725d36
✍️ @React_lib
https://kusham1998.medium.com/8-mistakes-every-junior-react-developer-makes-7ceace725d36
✍️ @React_lib
👍4
React: полное руководство по повторному рендерингу
https://www.developerway.com/posts/react-re-renders-guide
✍️ @React_lib
https://www.developerway.com/posts/react-re-renders-guide
✍️ @React_lib
👍3
Avoiding useEffect with callback refs
https://tkdodo.eu/blog/avoiding-use-effect-with-callback-refs
✍️ @React_lib
https://tkdodo.eu/blog/avoiding-use-effect-with-callback-refs
✍️ @React_lib
Media is too big
VIEW IN TELEGRAM
Learn React Router v6 In 45 Minutes
00:00 - Introduction
00:45 - Basics
06:18 - Router Types
10:22 - Dynamic Routes
13:40 - Route Specificity
16:46 - Nested Routes
28:54 - useRoutes Hooks
30:32 - Link Component
32:50 - NavLink Component
35:57 - Navigate Component
36:39 - useNavigate Hook
39:07 - Search Parameters
43:16 - Navigation State
✍️ @React_lib
00:00 - Introduction
00:45 - Basics
06:18 - Router Types
10:22 - Dynamic Routes
13:40 - Route Specificity
16:46 - Nested Routes
28:54 - useRoutes Hooks
30:32 - Link Component
32:50 - NavLink Component
35:57 - Navigate Component
36:39 - useNavigate Hook
39:07 - Search Parameters
43:16 - Navigation State
✍️ @React_lib
👍3
Understanding useMemo and useCallback
https://www.joshwcomeau.com/react/usememo-and-usecallback/
✍️ @React_lib
https://www.joshwcomeau.com/react/usememo-and-usecallback/
✍️ @React_lib
The Ultimate Form Abstraction
https://www.brendonovich.dev/blog/the-ultimate-form-abstraction
✍️ @React_lib
https://www.brendonovich.dev/blog/the-ultimate-form-abstraction
✍️ @React_lib
👍1
Data Fetching With Suspense In React
https://blog.openreplay.com/data-fetching-with-suspense-in-react/
✍️ @React_lib
https://blog.openreplay.com/data-fetching-with-suspense-in-react/
✍️ @React_lib
Все, что вам необходимо знать о конкурентном рендеринге
В React конкурентный рендеринг позволяет разделить быстрые и медленные части приложения, что позволяет рендерить медленные компоненты в фоновом режиме, не блокируя быстрые компоненты, таким образом каждый компонент может реагировать на взаимодействия пользователя в своем собственном темпе.
Чтобы использовать конкурентный рендеринг, необходимо использовать API, такие как переходы -
Энрике Юджи подробно изучил API конкурентного рендеринга и описал экстремальные случаи использования. Например, важно понимать, что React рендерит в однопоточной среде. Если он начал рендерить компонент, то он будет рендерить его до конца без прерываний. Только по окончании рендеринга компонента React проверит, есть ли какая-либо задача с высоким приоритетом в пуле задач. В результате, следует избегать задач, которые интенсивно используют процессор и выполняются в рамках одного компонента, а не распределены по нескольким компонентам.
https://blog.codeminer42.com/everything-you-need-to-know-about-concurrent-react-with-a-little-bit-of-suspense/
✍️ @React_lib
В React конкурентный рендеринг позволяет разделить быстрые и медленные части приложения, что позволяет рендерить медленные компоненты в фоновом режиме, не блокируя быстрые компоненты, таким образом каждый компонент может реагировать на взаимодействия пользователя в своем собственном темпе.
Чтобы использовать конкурентный рендеринг, необходимо использовать API, такие как переходы -
useTransition или startTransition, а также отложенные значения - useDeferredValue. Эти API помогают пометить обновления стейта с низким приоритетом. Обновления стейта, которые объявляются вне функциональностей конкурентного рендеринга, помечаются как обновления с высоким приоритетом.Энрике Юджи подробно изучил API конкурентного рендеринга и описал экстремальные случаи использования. Например, важно понимать, что React рендерит в однопоточной среде. Если он начал рендерить компонент, то он будет рендерить его до конца без прерываний. Только по окончании рендеринга компонента React проверит, есть ли какая-либо задача с высоким приоритетом в пуле задач. В результате, следует избегать задач, которые интенсивно используют процессор и выполняются в рамках одного компонента, а не распределены по нескольким компонентам.
https://blog.codeminer42.com/everything-you-need-to-know-about-concurrent-react-with-a-little-bit-of-suspense/
✍️ @React_lib
👍2