# Architecture & Design Patterns (React / Next.js) > Cấu trúc feature-based, atomic design, clean architecture, nguyên tắc SOLID, dependency injection - 22 câu hỏi phỏng vấn - Senior - [Câu hỏi phỏng vấn: React / Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van.md) ## 1. Atomic Design trong React là gì? **Câu trả lời** Atomic Design tổ chức các component React thành 5 cấp độ phân cấp: atoms (nút, input), molecules (form đơn giản), organisms (header, footer), templates (bố cục trang) và pages (các phiên bản cụ thể). Phương pháp này cung cấp cấu trúc nhất quán và có thể mở rộng cho design system. Nó tạo điều kiện tái sử dụng component và cộng tác giữa nhà thiết kế và nhà phát triển bằng cách chia sẻ từ vựng chung. ## 2. Đặc điểm chính của kiến trúc feature-based là gì? **Câu trả lời** Kiến trúc feature-based nhóm tất cả các file liên quan đến một chức năng vào cùng một thư mục (component, hooks, style, test, type). Cách tiếp cận này thúc đẩy co-location và tính tự chủ của feature. Mỗi feature trở thành một module độc lập với các trách nhiệm riêng, tạo điều kiện cho việc bảo trì và cho phép các nhóm làm việc song song mà không có xung đột. ## 3. Nguyên tắc cơ bản của Clean Architecture là gì? **Câu trả lời** Clean Architecture dựa trên Dependency Rule: các dependency phải luôn trỏ vào trong, từ các lớp ngoài (UI, cơ sở hạ tầng) đến các lớp trong (domain, business logic). Domain nghiệp vụ không nên bao giờ phụ thuộc vào UI hoặc framework. Sự phân tách này cho phép kiểm thử logic nghiệp vụ độc lập, thay đổi framework mà không cần viết lại code nghiệp vụ, và duy trì kiến trúc tách rời và có khả năng mở rộng. ## Còn 19 câu hỏi nữa - Nguyên tắc SOLID 'Single Responsibility' có nghĩa gì khi áp dụng cho component React? - Dependency injection trong React là gì? Đăng ký miễn phí: https://sharpskill.dev/vi/login ## Các chủ đề phỏng vấn React / Next.js khác - [Nền tảng JavaScript](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/javascript-essentials.md): 25 câu hỏi, Junior - [Nền tảng React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-fundamentals.md): 20 câu hỏi, Junior - [React Hooks](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-hooks.md): 22 câu hỏi, Junior - [Vòng đời component](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/component-lifecycle.md): 18 câu hỏi, Junior - [React Router](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-router.md): 20 câu hỏi, Junior - [Quản lý state với Context](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/state-management-context.md): 18 câu hỏi, Junior - [Biểu mẫu và Controlled Components](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/forms-controlled-components.md): 20 câu hỏi, Mid-Level - [Lấy dữ liệu & API](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/fetching-data-api.md): 20 câu hỏi, Mid-Level - [React Query (TanStack Query)](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-query-tanstack.md): 20 câu hỏi, Mid-Level - [Styling & CSS-in-JS](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/styling-css-in-js.md): 18 câu hỏi, Mid-Level - [Nền tảng Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-fundamentals.md): 25 câu hỏi, Mid-Level - [TypeScript với React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/typescript-react.md): 20 câu hỏi, Mid-Level - [Data Fetching trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-data-fetching.md): 24 câu hỏi, Mid-Level - [Server Actions trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-server-actions.md): 20 câu hỏi, Mid-Level - [Định tuyến & Điều hướng trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-routing-navigation.md): 22 câu hỏi, Mid-Level - [API Routes trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-api-routes.md): 20 câu hỏi, Mid-Level - [Metadata & SEO trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-metadata-seo.md): 18 câu hỏi, Mid-Level - [Middleware & Auth trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-middleware-auth.md): 22 câu hỏi, Mid-Level - [Kiểm thử React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-testing.md): 20 câu hỏi, Mid-Level - [Zustand State Management](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/zustand-state-management.md): 18 câu hỏi, Mid-Level - [Tối ưu hiệu năng React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-performance-optimization.md): 22 câu hỏi, Senior - [Error Boundaries & Error Handling](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-error-boundaries.md): 18 câu hỏi, Senior - [Advanced React Patterns](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/advanced-react-patterns.md): 20 câu hỏi, Senior - [Tính năng nâng cao của Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-advanced-features.md): 24 câu hỏi, Senior - [Triển khai & Môi trường Production với Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-deployment-production.md): 20 câu hỏi, Senior - [React Server Components](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-server-components.md): 26 câu hỏi, Senior - [Quốc tế hóa Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-internationalization.md): 20 câu hỏi, Senior - [React Bảo mật & Thực hành tốt nhất](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-security-best-practices.md): 22 câu hỏi, Senior --- Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack. HTML version of this page: https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-architecture-patterns