What is React and Why It Matters

The library that changed front-end development

React is the most popular tool in the world for building user interfaces, and the single most in-demand skill in front-end development. Created at Facebook, it powers Facebook, Instagram, Netflix, Airbnb, WhatsApp Web, and a huge proportion of modern websites and apps. If you want a front-end job, React is very likely what they'll ask for. This course takes you from zero to building real React apps.

React is a JavaScript library for building user interfaces out of reusable pieces. So before anything else: this course assumes you know JavaScript reasonably well — variables, functions (especially arrow functions), arrays and the map method, objects, and destructuring. React is "just JavaScript" in many ways, so those skills are essential. If you've done our JavaScript course, you're perfectly prepared.

The big idea: components

React's central concept is the component — a reusable, self-contained piece of UI. Think of a web page as built from Lego blocks: a Navbar component, a Button component, a Card component, a Footer component. You build each block once, then assemble and reuse them to construct entire pages and apps:

// A page is composed of components:
// <App>
//   <Navbar />
//   <Hero />
//   <ProductList />     <- itself made of many <ProductCard /> components
//   <Footer />
// </App>

This component model is transformative. Instead of one giant tangled HTML file, you build small, focused, reusable pieces and compose them. A ProductCard built once can display a thousand products. This reusability and organisation is a big part of why React scales so well to large applications.

The other big idea: declarative UI

React's second core idea is being declarative. In plain JavaScript (as you saw in our web development course), you manually update the page: find an element, change its text, toggle a class. That's imperative — you specify every step. React flips this: you declare what the UI should look like for a given state, and React automatically updates the page to match when the state changes:

// Imperative (plain JS): YOU manually update the DOM
// document.querySelector("#count").textContent = count;

// Declarative (React): you describe the UI, React syncs it for you
// "When count is 5, show '5'." Change count, React updates the screen.

This is the mental shift that makes React powerful. You stop micromanaging the DOM and instead describe what the UI should be. React figures out the minimal changes needed and applies them efficiently (using something called the "virtual DOM"). You focus on what, not how — which makes complex, interactive UIs far easier to build and reason about.

Getting set up

Modern React projects are created with a build tool. The most popular and fastest today is Vite. Creating a new React app is a couple of commands:

# Create a new React project with Vite
npm create vite@latest my-app -- --template react

cd my-app
npm install      # install dependencies
npm run dev      # start the development server

This sets up a complete React project with live reloading — change your code, and the browser updates instantly. (You may also hear of "Create React App", an older tool; Vite is the modern, faster choice.) The playground in this lesson lets you experiment with React right away, so you can follow along immediately and set up a full local project when you're ready to build something bigger.

What you'll build toward

By the end of this course you'll understand components and JSX, manage interactive state with hooks, handle user input, render dynamic lists, fetch data from APIs, and compose it all into a complete working app. These are exactly the skills front-end jobs require. React has a learning curve at first — the declarative, component-based way of thinking takes a little adjustment — but once it clicks, building rich interfaces becomes genuinely enjoyable. Let's start with the foundation: components and JSX.