Modern React favors function components: plain functions that accept props and return JSX. They replace the older class component style for most new code.
Naming and structure
- Component names use PascalCase:
UserCard, notuserCard. - Keep components focused—one clear responsibility per file in real projects.
- Extract repeated JSX into smaller components instead of copy-pasting markup.
Composition over inheritance
React rarely uses class inheritance for UI. You compose behavior by nesting components and passing props—similar to building UI from Bootstrap cards and buttons, but in TypeScript functions.
Important interview questions and answers
- Q: Function vs class components?
A: Functions with hooks are standard; classes remain in legacy codebases but are not the default for new features. - Q: Where does side-effect code go in function components?
A: InuseEffector event handlers—not directly in the render body.
Self-check
- Why must component names start with a capital letter?
- What should a function component return?
Challenge
Card component
- Extract a
Cardcomponent withtitleandbodyprops. - Render two
Cardinstances fromApp.
Done when: two cards appear with different titles in the preview.