What Is React? Why Use It and How It Works

React is a JavaScript library for building user interfaces. A user interface, or UI, is everything a person sees and touches on a screen: buttons, menus, lists, forms and pictures. React was made at Facebook and is now used by thousands of companies, from small shops to very large sites. If you want to build modern websites or apps, learning React is one of the most useful steps you can take.

This first lesson has no hard code. It explains the big ideas in easy words, so every later lesson makes sense. Take your time, because these ideas come back in every lesson.

The problem React solves

Think about a shopping cart on a website. When you add a book, many things must change at the same time: the number on the cart icon, the list of items, the total price and maybe a message that says “Added!”. If you write this with plain JavaScript, you must find each part of the page and change it by hand. Miss one part, and the page shows wrong numbers. As the page grows, this gets messy and slow to fix.

React gives you a different way to think. You do not change the page by hand. Instead, you describe what the page should look like for the data you have right now. When the data changes, React works out what must change on the screen and updates only those parts. You say what you want, and React takes care of how.

Big idea 1: components

A component is a small, reusable piece of the screen. A button can be a component. A product card can be a component. A whole page can be a component made of smaller ones. You build a page the way you build with building blocks: small pieces joined into bigger pieces.

Here is why this is powerful. Imagine a shop page that shows twenty products. You write one ProductCard component, and use it twenty times with different data. If you later want to change how a card looks, you change it in one place, and all twenty cards change.

In React a component is just a JavaScript function that returns what should be shown. Here is the smallest example:

function Welcome() {
  return <h1>Hello, welcome to my site!</h1>;
}

The strange part that looks like HTML inside JavaScript is called JSX. You will learn it in lesson 3. For now, just see that a component is a function, and its name starts with a capital letter.

Big idea 2: data flows down

Components get information from their parent through props. Props are like the settings you give to a function. A parent component can say to a ProductCard: “show this name and this price”. The card shows it. The card cannot change the props it receives. Data goes in one direction, from parent to child, which makes the app easy to follow. When something goes wrong, you can trace where the data came from.

function ProductCard(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Price: {props.price}</p>
    </div>
  );
}

// Using it:
// <ProductCard name="Notebook" price={3} />

Big idea 3: state

Some data changes while the person uses the page: the text in a search box, the items in a cart, or whether a menu is open. In React this changing data is called state. State belongs to a component. When the state changes, React draws the component again with the new data. This is called a re-render.

You do not tell the page “change this text to 5”. You change the state to 5, and the page shows 5 because the component describes the page from its state. This is the main idea of React, and the most common way to get stuck at first. If you remember one thing, remember this: the screen is a result of the data.

What is the virtual DOM?

The browser keeps the page as a tree of objects called the DOM (Document Object Model). Changing the real DOM can be slow if you do it too much. React keeps a light copy of the page in memory, called the virtual DOM. When your state changes, React makes a new virtual copy, compares it with the old one, and finds the small differences. Then it changes only those differences in the real page. This comparing step is called reconciliation.

You do not need to manage this. It is helpful to know it exists, because it explains why React is fast enough for large pages, and why you should never change the page by hand when React owns it.

React is a library, not a full framework

React only handles the screen. It does not decide how you send data to a server, how you move between pages, or how you style your app. For those jobs you choose other tools, such as React Router for pages. This gives you freedom, but it also means you must learn a few extra tools. This course covers the most important ones.

You may also hear about Next.js. It is a framework built on top of React that adds pages, server rendering and more. Learning React first is the right order, because Next.js is React with extra features.

Where is React used?

• Websites such as online shops, news sites and dashboards.
• Mobile apps, using a sister tool called React Native, which uses the same ideas.
• Admin tools and dashboards, where data changes often and screens are full of forms and tables.
• Job markets: React is one of the most requested skills in front end job adverts. Check adverts in your own country to see how common it is near you.

What you need to know before you start

You should know basic HTML and CSS, and the basics of JavaScript: variables, functions, arrays, objects and the if statement. If you know a little about arrow functions and array methods like map, that helps a lot, and we will explain them again when they come up. You do not need to be an expert. Many people learn JavaScript and React together.

If some JavaScript words are new, do not worry. Each lesson explains its own small steps, and each lesson has a short task to try. Practice is the best teacher, so type the code yourself instead of only reading it.

How this course is organised

• Start Here (lessons 1 to 10): the basics: setup, JSX, components, props, state, events, lists, forms and styling.
• Hooks and Data (lessons 11 to 20): useEffect, fetching data, refs, reducers, context, custom hooks, routing and forms.
• Advanced React (lessons 21 to 30): speed, code splitting, error handling, state libraries, data libraries, testing, accessibility, new React 19 features, TypeScript and a final guide to real projects.

Each lesson uses short sentences and plain words, has code you can copy, a task and a small check list, and ends with a summary and common questions. Every lesson also has an animation at the top that shows the main idea step by step.

Tips for learning faster

• Type the code. Copying and pasting teaches your fingers nothing. Typing makes you notice details.
• Break things on purpose. Remove a bracket and read the error. Errors are the best teachers and you will meet them often.
• Build small things. A counter, a to-do list, a notes app. Small finished projects beat big unfinished ones.
• Read errors slowly. React usually tells you the file and line. Read the first line first.
• Come back. If a lesson feels hard, finish it, move on, and return later. Ideas settle with time.

Your task

1. Write in one sentence what a component is, in your own words.
2. Think of a website you use daily. List three parts of it that could be components.
3. Think of one piece of data on that site that changes while you use it. That is state.

How to check it worked

• You can explain components, props and state to a friend without using code.
• You know why React says “describe the screen, do not change it by hand”.

Summary

• React is a JavaScript library for building user interfaces from small reusable components.
• Props send data down from parent to child. State is data that changes, and a change makes the component draw again.
• React keeps a virtual copy of the page and updates only what changed in the real page.
• React handles the screen only. You add other tools for pages, data and more.