What is React for full-stack?
React is the library you build the client with: components, props, state, and hooks composing into an interface that reacts to data. For full-stack work you need enough React to build a solid UI that talks to your own API, even if a frontend specialist would go further.
Why it matters
React is the dominant way to build web UIs and the client half of the TypeScript full-stack stack. It is also the foundation for the SSR and Next.js nodes later in this track. Without a real grasp of components and state, the seam between client and server never clicks.
What to learn
- Components, JSX, and props
- State and the core hooks:
useState,useEffect - Lifting state and passing data down
- Rendering lists and conditional UI
- Composing components
- Typing props and state with TypeScript
- Thinking in components
Common pitfall
Overusing useEffect to sync state that should be derived or fetched with a
proper data library. Effects for everything leads to tangled, buggy components
with race conditions. Reserve effects for genuine side effects, derive what you
can during render, and use a query library for server data (next node).
Resources
Primary (free):
- React — Learn · docs
- React — Thinking in React · docs
- React — You might not need an effect · docs
Practice
Build an interactive UI: a component tree with shared state lifted to a parent, a list rendered from data, and conditional rendering — all typed with TypeScript. Avoid using an effect where derived state would do. Done when state lives at the right level and effects are only for real side effects.
Outcomes
- Build component trees with props and state.
- Lift and share state appropriately.
- Type props and state with TypeScript.
- Avoid unnecessary effects.