What is React?
Discover why React was built, how its component-based and declarative approach makes building UIs feel natural, and write your very first component.
Imagine you're building a dashboard that shows live stock prices, a chat inbox, and a notification badge — all updating at the same time. With plain JavaScript you'd spend most of your energy answering the question "which part of the page needs to change right now?" It gets messy fast.
React was built to solve exactly this problem. Created by engineers at Facebook in 2013, React lets you describe what your UI should look like at any moment, and it figures out the how. The result is code that's easier to read, easier to reuse, and much easier to scale.
#The Big Idea: Declarative UI
Google Maps vs. Paper Directions
Old-school JavaScript is like paper directions: "Turn left on Elm, then right on Oak, then go 0.3 miles…" You have to describe every step.
React is like Google Maps: you just say "I want to be at Central Park" and the app figures out the route. You declare the destination — React handles the journey.
In React you write code that describes what the UI should look like for a given state, not the manual steps to update it. When the underlying data changes, React automatically re-renders only the parts that need to change. This "declarative" style keeps your code focused on the outcome, not the mechanics.
#Components: The Building Blocks
React UIs are built from components — small, self-contained pieces that know how to render themselves. Think of them like LEGO bricks: each brick has a specific shape and purpose, and you combine them to build anything.
A component is just a JavaScript function that returns some UI (written in a syntax called JSX). You can use that component as many times as you like, anywhere in your app.
// A simple functional component
function Greeting() {
return (
<div>
<h1>Hello, world!</h1>
<p>Welcome to React.</p>
</div>
);
}
export default Greeting;#What Is JSX?
JSX (JavaScript XML) is the HTML-like syntax you see inside React components. It looks like HTML, but it lives inside your JavaScript and has a few differences — for example, you use className instead of class, and every tag must be closed.
JSX gets transformed into regular JavaScript before it runs in the browser, so there is no performance magic — it is just a more readable way to describe your UI.
// JSX vs plain JavaScript — both do the same thing
// With JSX (what you write):
const element = <h1 className="title">Hi there!</h1>;
// Without JSX (what React sees after transform):
const element2 = React.createElement(
"h1",
{ className: "title" },
"Hi there!"
);A component name MUST start with a capital letter
React uses the first letter of a tag name to decide whether it is a built-in HTML element or your own component.
<greeting />— React treats this as an unknown HTML tag. Broken.<Greeting />— React finds yourGreetingfunction and renders it. Correct.
Always capitalize your component names.
#Composing Components Together
The real power shows up when you nest components inside each other. A Header component might contain a Logo and a NavBar. A Page might contain a Header, a MainContent, and a Footer. Each piece stays small and focused, but together they build a full app.
function Logo() {
return <img src="/logo.png" alt="Site logo" />;
}
function Header() {
return (
<header>
<Logo />
<h1>My App</h1>
</header>
);
}
function App() {
return (
<div>
<Header />
<p>Welcome to my React app!</p>
</div>
);
}One component per concern
A good rule of thumb: if a piece of UI has a clear, single job (show a user card, display a button, render a nav menu), it deserves its own component. Smaller components are easier to test, reuse, and reason about.
Which of the following correctly defines a React component?
#Why React Changed the Game
Before React (and frameworks like it), a typical approach was to manipulate the DOM directly with JavaScript — finding elements, updating their text, hiding and showing things. As apps grew, these manual updates became a tangled web of code that was hard to follow and easy to break.
React introduced a virtual DOM — a lightweight copy of the real DOM kept in memory. When your data changes, React compares the new virtual DOM with the previous snapshot, calculates the minimal set of real DOM changes needed, and applies only those. You get correctness without micromanaging every update.
Key takeaways
- React is a JavaScript library for building UIs from small, reusable components.
- Declarative style means you describe what the UI should look like — React handles the DOM updates.
- A component is a function that returns JSX; its name must start with a capital letter.
- Components compose: small pieces nest inside each other to build complex UIs.
- JSX looks like HTML but lives in JavaScript — it compiles to React.createElement calls under the hood.
This code has a bug — what's wrong?
function greeting() {
return <p>Hi</p>;
}
function App() {
return (
<div>
<greeting />
</div>
);
}Complete this JSX so it sets the element's CSS class correctly. Remember JSX is not quite HTML.
const element = <h1 ="title">Hi there!</h1>;
JSX is just syntactic sugar. Fill in the React method that <h1 className="title">Hi there!</h1> compiles to under the hood.
const element = React.( "h1", { className: "title" }, "Hi there!" );
Arrange these lines to define a Header component that composes the Logo component inside it, following the lesson's nesting style.
}
<h1>My App</h1>
<Logo />
function Header() {</header>
return (
<header>
);
Create two components: a Badge that displays a short label inside a <span>, and a UserCard that renders a name in an <h2> and reuses your Badge to show the user's role. Render <UserCard /> as the top-level output.
Try it live — edit the code and hit Run to see it rendered: