React
JavaScript library for building user interfaces through declarative, reusable components, with an ecosystem spanning from SPAs to full-stack applications with Server Components.
seed#react#javascript#ui#components#frontend#jsx
What it is
React is a JavaScript library for building user interfaces. Its mental model: UI is a function of state. When state changes, React efficiently updates only the DOM parts that need to change.
Key concepts
| Concept | Function |
|---|---|
| Components | Reusable UI blocks |
| JSX | Syntax combining JavaScript and HTML |
| Props | Data flowing from parent to child |
| State | Internal data that changes over time |
| Hooks | Functions for using state and effects in functional components |
| Virtual DOM | In-memory representation for efficient diffing |
Evolution
| Era | Model |
|---|---|
| 2013-2018 | Class components, lifecycle methods |
| 2019-2023 | Hooks, functional components |
| 2023+ | Server Components, streaming SSR |
Ecosystem
- Next.js: full-stack framework
- Tailwind CSS: utility-first CSS
- React Router / TanStack Router: routing
- Zustand / Jotai: state management
Why it matters
React defined the component-based UI paradigm that dominates modern web development. Its ecosystem — Next.js, React Native, Server Components — makes it relevant for both web and mobile. Understanding its rendering mental model is fundamental for any frontend developer.
References
- React Documentation — Official documentation.
- React Learn — React, 2024. Official interactive tutorial.
- React Blog — React, 2024. Announcements and updates from the React team.