React Components — Reusable UI Building Blocks
REACT is a JavaScript library for building user interfaces. Its core idea: break the UI into COMPONENTS — small, reusable pieces. Each component is a function that returns JSX (HTML-like syntax inside JavaScript). Combine components to build entire applications. Most modern web apps — Facebook, Instagram, Netflix — use React.
A simple component: function Greeting() { return <h1>Hello, world!</h1>; }. To use it: <Greeting />. Components can take PROPS (like function arguments): function Greeting(props) { return <h1>Hello, {props.name}!</h1>; }. Used as: <Greeting name="Maya" />. They can also have STATE — internal data that changes (managed via React hooks like useState).
Why use components instead of writing all your HTML in one giant file?
React renders components efficiently using a "virtual DOM." When data changes, React calculates the minimum updates needed and applies them. This is why React apps feel fast even with lots of dynamic content. Frameworks like Next.js add server-side rendering, routing, and other production features on top of React.
Try React Online
Visit react.dev and try the interactive tutorial. Or open codesandbox.io, choose React, and play with the example. Don't worry about understanding everything — just notice how components compose.
Component-based UI is one of the biggest paradigm shifts in front-end development. React is the most popular implementation, and the patterns it teaches transfer to Vue, Svelte, Angular, and beyond.
Want to keep learning?
Sign up for free to access the full curriculum — all subjects, all ages.
Start Learning Free