Learn what React is and how it works

What is React?

React is a JavaScript library. JavaScript is the language that makes web pages interactive. A library is a box of ready-made code that you reuse. React helps you build the parts of a page that change, like a shopping cart or a chat window.

The main ideas

Components

A component is one small piece of a page, such as a button, a menu or a card. Think of building with Lego bricks. You make small bricks, then join them to build a whole page. You can reuse the same brick many times.

JSX

JSX looks like HTML written inside JavaScript. It lets you describe what a piece should look like in a way that is easy to read.

function Hello() {
  return <h1>Hello, world!</h1>;
}

This small component shows a heading.

Props

Props are the settings you hand to a component. A button component may get the text "Buy" as a prop. They flow from a parent to a child, like instructions passed down.

State

State is the memory of a component. A counter remembers its number. When the state changes, React updates the screen for you.

The virtual DOM

The DOM is the page structure your browser keeps. React keeps a light copy and compares it with the real one. Then it changes only the parts that differ. This makes updates quick.

A path to learn it

1. Learn basic HTML, CSS and JavaScript first. React builds on them.
2. Install Node.js on your computer. It runs the build tools.
3. Create a small project. A common tool is Vite:

npm create vite@latest my-app -- --template react

This makes a starter React project in a folder named my-app.

4. Go into the folder, install and start it:

cd my-app
npm install
npm run dev

The last command opens a local test version in your browser.

5. Change the text in src/App.jsx and watch the page update.
6. Build small things: a counter, a to-do list, a weather card.
7. When ready, run npm run build. Upload the output files to your hosting.

Quick recap

• React builds pages from small reusable components.
• Props pass data in. State remembers data that changes.
• Learn HTML, CSS and JavaScript first.
• Build small projects, then upload the built files to your hosting.