React Introduction

React is a JavaScript library that helps you build user interfaces from small, reusable pieces.

What is React?

• React is a JavaScript library for building the part of a website that users see and click
• It was made by Facebook (now Meta) and released as open source in 2013
• You build a page from components: a navbar, a product card, a login form
• When your data changes, React updates the screen automatically

React only handles the user interface (the "view"). For things like routing or talking to a server, you add other tools or write plain JavaScript.

Why Use React?

Think of an online shop in Karachi. The page has a header, a search box, many product cards and a cart. Without React you would write a lot of code to find elements and change them every time the cart changes.

With React you describe what the page should look like for the current data. React works out what changed and updates only those parts.

Components

A component is a JavaScript function that returns what should appear on the screen.

function ProductCard() {
  return (
    <div>
      <h2>Cotton Kurta</h2>
      <p>Price: Rs 2,500</p>
    </div>
  );
}

You can then use it like an HTML tag, as many times as you want:

function Shop() {
  return (
    <main>
      <ProductCard />
      <ProductCard />
    </main>
  );
}

Cotton Kurta
Price: Rs 2,500
Cotton Kurta
Price: Rs 2,500

Later you will learn how to give each card different data using props.

How React Updates the Page

Changing the real page (the DOM) is slow if you do it too often. React keeps a light copy of the page in memory, sometimes called the virtual DOM. When data changes:

1. React runs your components again to get the new result
2. It compares the new result with the old one
3. It changes only the parts of the real page that are different

You never have to do these steps yourself.

What You Should Know First

Before learning React you should be comfortable with:

• HTML and CSS basics
• JavaScript variables, functions and arrow functions
• Arrays and the map() and filter() methods
• Objects, destructuring and import / export

If any of these feel new, review the JavaScript tutorial first.

Exercise