Архитектура React-приложения. Как структурировать проект. Методология Featured-Sliced Design

✏️ Разберём, почему хаотичная структура проекта мешает развитию, и что даёт методология Feature-Sliced Design. Пошагово перенесём код в слои app, pages, widgets, features, entities и shared. Покажу, что именно должно лежать в каждом слое, и как не нарушать правило зависимостей сверху вниз. Перенесём роутер и глобальные стили в app, вынесем страницы в отдельные папки, соберём виджет Todo из фич и сущностей, а бизнес-логику и контекст задач перенесём в entities. Отдельные возможности — добавление, поиск и статистику — оформим в features, а кнопки, поля, ссылки и API сложим в shared. Настроим алиас @, чтобы избавиться от длинных относительных путей. В итоге проект станет структурированным, удобным для поддержки и готовым к расширению. 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:35 | Что такое Feature-Sliced Design и зачем он нам ▶ 02:03 | Важное правило зависимостей FSD ▶ 03:18 | Текущее состояние структуры проекта ▶ 05:10 | Слой app ▶ 07:35 | Слой pages ▶ 08:56 | Слой widgets ▶ 09:57 | Слой features ▶ 11:59 | Слой entities ▶ 16:43 | Слой shared ▶ 19:29 | Настройка и применение алиаса ▶ 25:21 | Заключение 📚 Ссылки из видео: 🧑💻 Основной телеграм-канал: 💬 Коммьюнити-чат в телеграме (помощь новичкам): 🗂️ Бесплатные курсы на канале: 📌 Автор: #reactjs