A feature with a public API (one file pretending to be several)
The cart "module" returns only its public API, like features/cart/index.js. ProductCard in another feature can add items but can't reach formatLine or the context object. Click Add a few times.
Group files by feature (everything about the cart in features/cart/) instead of by file type, keep each thing next to the code that uses it, put truly generic UI in a shared folder, give each feature one public entry point, and let a lint rule enforce who may import what.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Here is a type-based structure: components/{TodoList,TodoItem,LoginForm,Avatar}.jsx, hooks/{useTodos,useAuth}.js, utils/{formatDate,validateEmail}.js. Reorganise it into features and shared code.
Write the no-restricted-imports rule that stops any file from importing @/features/<name>/<anything>, and say what @/features/todos should export.
Explain it without notes
Compare a type-based folder structure with a feature-based one. When does each make sense?
What is a barrel file, and what are its trade-offs?
What is an import boundary and how would you enforce one in a React codebase?
Where should a component go if two features need it?
Preview
Console
Nothing logged yet.Expected console output
cart exports: [ 'CartProvider', 'CartSummary', 'useCart' ]
formatLine is private: true