evolution
community
КартаПродолжить учитьсяПроекты
58 React паттернов

58 React паттернов

Рассмотрим самые эффективные решения для создания React приложений. Простым языком и на примерах кода.


🤔 О чём курс?

Код большинства проектов на React — это 💩. Но проблема не в React.
Просто, чтобы код был 🔥, нужно
знать правила.

В этом курсе я даю 58 практических советов по написанию поддерживаемого и эффективного кода на React

Будет минимум абстрактных размышлений. Максимум советов "бери и делай"

👇 Что будет в курсе


1️⃣ Antipatterns (Уроки 1-7)

Чтобы понять, как правильно, надо понять, как не правильно)
В первой части мы посмотрим на ошибки, которые допускают
даже синьоры

2️⃣ Decomposition patterns (Уроки 8-14)

Разделил компоненты на несколько и стало только хуже?
Здесь мы рассмотрим паттерны эффективной декомпозиции кода, которые позволяют достигать Low coupling/High cochesion

3️⃣ Architectural patterns (Уроки 15-30)

Использовать папочку components? или лучше ui и model?
В этому модуле ответим на все вопросы по типу: "Куда положить это?"

4️⃣ State patterns (Уроки 31-37)

Надоели десятки useEffect и огромные Redux сторы?
Здесь мы научимся правильно организовывать состояние в React приложениях.

5️⃣ Infrastructure patterns (Уроки 38 - 46)

Умение писать инфраструктуру - крайне важный навык на пути к синьорности.
Этот модуль научит вас создавать элегантные переиспользуемые компоненты и хуки на React.

6️⃣ Optimisation patterns (Уроки 46 - 58)

Почему оптимизация рендеров — это последнее дело?
Здесь мы поговорим о самых эффективных паттернах оптимизации React кода.


Важно! Здесь не всё.

Здесь собраны именно те паттерны, которые будут полезны любому приложению.
И которые не зависят от используемых библиотек и специфических задач.

Но существует ещё очень много специфических паттернов, которые вы можете найти в курсах к технологиям и в воркшопах сообщества.

📀 Формат курса

1. Каждый паттерн будет представлен в виде небольшого практического урока.
✔️К каждому паттерну: какую задачу решает и когда лучше использовать.

2. В течение всего курса вы делаете проект для закрепления материала.
✔️ Сразу применяете информацию на практике.

3. Раз в неделю проходят QA сессии, где я проверяю домашки тех, кто успел их сделать до дедлайна
✔️Записи QA сессий будут доступны тут.

Начать

Уроки (58)

1. god component
2. props drilling
3. premature optimization
4. global state coupling
5. components folder
6. useEffect driven development
7. low level code
8. slot
9. renderProps
10. hooks flow
11. "local" global state
12. mediator
13. polymorphism
14. contextual DI
15. module
16. group
17. architecture boundaries
18. app group
19. infrasturcture group
20. view group
21. business group
22. generic business group
23. shared kernel group
24. single file module
25. sub modules, sub groups
26. ui, model groups
27. pure model group
28. composition group
29. view-model group
30. lib group
31. one way data flow
32. normalization
33. cache, source of truth segregation
34. hidden cache
35. user interaction state
36. finite state machine
37. siblings communication
38. generic component
39. props getter
40. compound components
41. context control
42. user action callback
43. hook return jsx
44. hoc
45. magic props
46. real slots
47. zero code optimization
48. code splitting
49. render as you fetch
50. server side rendering
51. server streaming
52. server side generation
53. server components
54. memoization
55. lift state down, lift content up
56. transitions
57. virtualization
58. relayout avoiding

Что дальше? (2)