React Tutorial

React is a JavaScript library for building user interfaces. You build a page from small, reusable pieces called components, and React updates the screen for you when your data changes.

React was created at Facebook and is now used by Meta, Netflix, Airbnb, many Pakistani startups and thousands of freelancers. It is one of the most requested skills in web development jobs.

This tutorial teaches modern React (React 19) with function components and hooks, and uses Vite to create projects. You should already know basic HTML, CSS and JavaScript.

A First Look at React

Here is a small component. It shows a greeting and a button that counts clicks:

import { useState } from "react";

function Welcome() {
  const [clicks, setClicks] = useState(0);

  return (
    <div>
      <h1>Assalam o Alaikum, Ayesha!</h1>
      <button onClick={() => setClicks(clicks + 1)}>
        Clicked {clicks} times
      </button>
    </div>
  );
}

export default Welcome;

It looks like HTML inside JavaScript. This is called JSX, and you will learn it in the first lessons.

What You Will Learn

• What React is and how to start a project with Vite
• JSX: writing HTML-like code inside JavaScript
• Components and props, the building blocks of every React app
• Handling events, showing things conditionally and rendering lists
• State with useState, forms, and side effects with useEffect
• Other useful hooks such as useRef and useContext

Exercises and Quiz

Each lesson ends with a short exercise, and the last lesson is a quiz on the whole tutorial.

What to Learn After React

Learn Node.js to build the back end your React app talks to. You can also compare React with Vue and Angular, two other popular front-end tools.