React
A component-based library for building interactive user interfaces.
CurrentintermediateFull course available
Overview
React structures UIs as a tree of reusable components, each describing what the UI should look like for a given state, and re-rendering automatically when that state changes. It's the most widely adopted UI library in the industry and the foundation for frameworks like Next.js.
- What it is
- A JavaScript library for building UIs out of composable, stateful components.
- Why it's used
- It scales well from a small widget to a large application, has a huge ecosystem, and its component model matches how designers already think about interfaces.
- Where it fits
- After solid JavaScript fundamentals (especially functions, arrays/objects, and the DOM) -- React is JavaScript, not a replacement for it. The React Application Development course covers this in depth: JSX, state, effects, data fetching, custom hooks, accessibility, and testing, with guided local labs for the real component work this platform's browser sandbox can't execute.
Core concepts
- Components and JSX
- Props
- State (useState)
- Effects (useEffect)
- The virtual DOM and re-rendering
Example
State (useState) holds a value across re-renders; calling setCount schedules a re-render with the new value -- the core loop of every React component.
function Counter() {
const [count, setCount] = React.useState(0);
return React.createElement(
"button",
{ onClick: () => setCount(count + 1) },
"Clicked " + count + " times"
);
}Common use cases
- Single-page applications
- Interactive dashboards
- Any UI with significant client-side state
Project ideas
- A todo list with add/remove/complete, using only useState
- A component that fetches and displays data from an API