Вещи, которые полезно знать о React.js

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

https://habr.com/ru/post/679452/

✍️ @React_lib

Learning React
Авторы: Alex Banks, Eve Porcello (2020)

Если вы хотите научиться создавать эффективные веб-приложения на React, данная книга для вас. Эта обновленная версия также идеально подходит для веб-разработчиков и инженеров-программистов, которые знают основы JavaScript, CSS и HTML. В ней представлены передовые практики и шаблоны для написания современного кода на React. Никаких предварительных знаний о React или функциональном JavaScript не требуется.

✍️ @React_lib

Как создать Star Rating виджет на React.js и оптимизировать его

В этой статье я хочу затронуть еще одну задачу, с которой вы можете столкнуться на собеседовании на позицию Front-End — создание Star Rating виджета.

За последние пять месяцев у меня было 15 онсайт собеседований, а также офферы от Google, Roku, Microsoft и других компаний.

Вы должны уточнить требования и реализовать этот виджет в течение ~ 45–50 минут.

Rus https://habr.com/ru/post/678478/

Eng https://betterprogramming.pub/how-to-implement-star-rating-widget-with-react-js-and-optimize-it-e3625f3104f

✍️ @React_lib

Simple React Component That Makes Titles More Readable

https://github.com/shuding/react-wrap-balancer

✍️ @React_lib

Использование шаблонов проектирования группы GoF в React

В этой статье поговорим о том, как написать в React многократно используемый код, используя три шаблона проектирования группы Gang-of-Four.

https://blog.bitsrc.io/using-gof-design-patterns-with-react-c334f3ea3147

✍️ @React_lib

✨React-bits

Коллекция паттернов, антипаттернов, советов и полезных ресурсов для React-разработчиков.

https://github.com/vasanthk/react-bits

✍️ @React_lib

Работа с ошибками как профессионал в TypeScript

Обработка ошибок в Type/JavaScript - это тема, которой не уделяется должного внимания. Для долговечности любого проекта очень важно отлавливать и регистрировать ошибки.

С годами, когда я начал больше работать с TypeScript, я начал понимать, что не совсем понимаю обработку ошибок. Я часто сталкивался с этой проблемой:

https://engineering.udacity.com/handling-errors-like-a-pro-in-typescript-d7a314ad4991

✍️ @React_lib

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

The Best React Design Patterns You Should Know About

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

Использование шаблонов проектирования группы 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

8 Mistakes every junior React developer makes

https://kusham1998.medium.com/8-mistakes-every-junior-react-developer-makes-7ceace725d36

✍️ @React_lib

React: полное руководство по повторному рендерингу

https://www.developerway.com/posts/react-re-renders-guide

✍️ @React_lib

Avoiding useEffect with callback refs

https://tkdodo.eu/blog/avoiding-use-effect-with-callback-refs

✍️ @React_lib

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

Understanding useMemo and useCallback

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