Component structure and folders

Last reviewed May 28, 2026 Content v20260528

Track mode

client_react

Means

In-browser React TSX

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Component structure and folders: the concepts, APIs, and habits you need before advancing in React.

Without Component structure and folders, you will struggle to read or extend React codebases and playground exercises.

You will apply Component structure and folders in contexts like: SPAs, dashboards, design-system-driven products, and React Native mobile apps.

Write TypeScript/TSX, click Run in browser—React 18 loads from CDN, JSX compiles in the tab, UI renders in the preview root, and printOutput feeds the terminal.

When you can explain the previous lesson's ideas without copying starter code.

As features grow, file structure matters as much as syntax. Teams organize by route, by feature, or by type (components/, hooks/). React does not mandate one layout—consistency within a repo beats any universal template.

Common patterns

Feature folders — checkout/Cart.tsx, checkout/useCart.ts colocated
Atomic tiers — atoms/molecules/organisms (design-system teams)
Route-based — Next.js App Router maps folders to URLs automatically

Component size heuristics

Split when a file mixes unrelated state, repeats markup twice, or hides business rules inside JSX. Keep leaf components dumb (props in, UI out); push data fetching and reducers upward or into custom hooks.

Barrel exports

index.ts re-exporting a folder simplifies imports but can harm tree-shaking if it re-exports everything—export only what other features need.

Self-check

When would you extract a child component vs a custom hook?
What is one sign a component file should be split?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

Folder vs colocation?
Smart vs dumb split?

No discussion yet. Be the first to ask a question.