Component Structure & Best Practices

Break the UI into components

Look at a design and split it into a tree of components: a Page contains a Header, a ProductList contains many ProductCards, and so on. Small, focused components are easier to build, test and reuse.

A common folder layout

src/
  components/      (reusable UI: Button, Card, Navbar)
  pages/          (one component per route: Home, About)
  hooks/          (custom hooks: useFetch)
  App.jsx
  main.jsx

A quick tour of this layout: components/ holds small reusable building blocks used all over the app (a Button, a Card, a Navbar). pages/ holds one component per route — Home for /, About for /about — which themselves are built from the reusable components. hooks/ holds your custom hooks like useFetch. App.jsx wires the pages together (often with the router), and main.jsx starts the app. Grouping files this way means you always know where to look as the project grows.

Best practices

• One component per file; name the file after the component.
• Keep components small and focused on one job.
• Lift shared state up to the closest common parent.
• Pass data down via props; send events up via callbacks.
• Never mutate state or props — always create new values.