Introduction to React

What Is React?

React is a JavaScript library for building user interfaces. It was created by Facebook (now Meta) to make it easier and faster to build complex web apps.

React allows developers to create reusable components — small, self-contained pieces of code that represent parts of a webpage, such as a button, header, or form.

Instead of updating the entire web page when something changes, React updates only the parts that need to change. This makes applications faster, more efficient, and easier to maintain.

Why Learn React?

React has become one of the most popular tools for front-end development — used by companies like Netflix, Airbnb, and Instagram.

Here’s why developers prefer React:

• Fast rendering using a Virtual DOM to update UI changes efficiently.

• Component-based architecture that encourages modular, reusable code.

• Declarative syntax that makes UI predictable and easy to debug.

• Strong community support with thousands of open-source libraries and learning resources.

Learning React gives you the foundation to build anything from small web widgets to full-scale web applications.

Setting Up Your First React App

To start using React, you need Node.js and npm installed.

node -v
npm -v

If version numbers appear, your environment is ready.

You can create a React project using one of these methods:

npx create-react-app my-first-app
cd my-first-app
npm start

Or using Vite:

npm create vite@latest my-first-app -- --template react
cd my-first-app
npm install
npm run dev

Once the server starts, open the local development URL shown in the terminal to see your first React app running.

Understanding Components

A component is the building block of every React app. Each component acts like a small function that returns what should appear on the screen.

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

export default Welcome;

To display this component inside your main application file:

import Welcome from "./Welcome";

function App() {
  return (
    <div>
      <Welcome />
    </div>
  );
}

export default App;

When the app runs, the message appears on the screen.

How React Works (Simplified)

React uses a Virtual DOM — a lightweight copy of the real DOM.

When something changes in your app:

• React updates the Virtual DOM.

• It compares the new version with the previous one (diffing).

• It updates only what changed in the real DOM.

This is why React applications feel smooth and fast even when handling large amounts of data.

Writing Your First Interactive Component

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default Counter;

This component uses state to keep track of how many times a button is clicked.

Common Terms to Remember

• Component – A piece of UI defined as a function or class

• JSX – Syntax that lets you write HTML-like code in JavaScript

• State – Data that changes over time inside a component

• Props – Data passed from one component to another

• Virtual DOM – React’s optimized version of the browser DOM

Summary

In this lesson, you learned what React is and why it is widely used for building modern web applications. You understood how to set up a React project, how components work, and how React updates the UI efficiently using the Virtual DOM. You also created a simple interactive component, which is your first step toward building dynamic React applications.