Структура проекта React (Архитектура приложения React)

#React #ReactJS

О структуре React приложения, о разных подходах к разделению компонентов в React.

Мы в соцсетях:
💻 Telegram: https://t.me/devmagazinechannel
💻 Twitter: https://twitter.com/_devmagazine
💻 GitHub: https://github.com/vadimkorr
☕️ Поддержать: https://www.donationalerts.com/r/devmagazine

Плейлисты и курсы:
💡 Все о ReactJS: https://www.youtube.com/playlist?list=PLmfIBo6rTVR4OGBHkgPUst49WliEAkZDc
💡 Как пройти ReactJS собеседование: https://www.youtube.com/playlist?list=PLmfIBo6rTVR6jNZoTnNggWliFC7Cmco7p
💡 ReactJS хуки: https://www.youtube.com/playlist?list=PLmfIBo6rTVR50EVDaRz0HuImZ6iLDs40N
💡 Redux: https://www.youtube.com/playlist?list=PLmfIBo6rTVR70B7skhP5BtczReJMZQ0Vd
💡 Redux Saga: https://www.youtube.com/playlist?list=PLmfIBo6rTVR6jKRgpblTdzto9v-yWgqk-
💡 Как создать слайдер на ReactJS: https://www.youtube.com/playlist?list=PLmfIBo6rTVR4JBtaOfWLMNgjIeVC3_dl7
💡 Svelte: https://www.youtube.com/playlist?list=PLmfIBo6rTVR5XNcJxu8TwzEvIDUCAhGc6
💡 Sass: https://www.youtube.com/playlist?list=PLmfIBo6rTVR7YkcR_26vgH37l3GS2pYBa
💡 GraphQL: https://www.youtube.com/playlist?list=PLmfIBo6rTVR7qfgmVHBsgOoiBAx5Guwfp
💡 JavaScript: https://www.youtube.com/playlist?list=PLmfIBo6rTVR6ncz0yM8Bhpff8yI7F1oKp

0:00 - Введение
0:28 - О структурах React в целом
1:39 - Два основных подхода структурирования
1:50 - Группировка по функциональности (по маршруту)
2:13 - Группировка по типам файлов
3:13 - Пример структуры с которой можно начать
4:11 - Фрактальная архитектура (Рекурсивная архитектура)
4:51 - Атомарный дизайн
7:52 - index.js в структуре проекта
9:31 - Папка shared components
10:22 - Лэйауты (Layouts)
11:07 - Куда класть тесты?
13:04 - Рефакторинг структуры
14:03 - Куда класть файлы store в React
14:50 - Store c разделением кода
15:11 - Разделение кода (ленивая загрузка)
16:12 - Принципы для хорошей архитектуры

#devmagazine #devmagazinechannel

Видео Структура проекта React (Архитектура приложения React) канала Веб-разработка - DevMagazine