Introduction to React

React is a JavaScript library for building user interfaces. Created by Facebook (now Meta) in 2013, it has become the most widely used front-end library in the world. React powers the interfaces of Facebook, Instagram, Netflix, Airbnb, and thousands of other applications.

React is focused on one thing: rendering UI based on data. When your data changes, React efficiently updates only the parts of the page that need to change, rather than rebuilding the entire page from scratch.

Key ideas behind React:

• Declarative: You describe what the UI should look like for a given state, and React figures out how to update the DOM. This is the opposite of imperative DOM manipulation where you manually call createElement, appendChild, and textContent for every change.
• Component-based: You build your UI from small, reusable pieces called components. A button, a navigation bar, a user card — each is a component that manages its own rendering logic.
• Learn once, write anywhere: React's concepts transfer to React Native (mobile apps), React Three Fiber (3D), and more.

Instead of writing this imperative code:

const h1 = document.createElement('h1');
h1.textContent = 'Hello';
document.body.appendChild(h1);

In React you write:

function App() {
  return <h1>Hello</h1>;
}

React takes your description and handles all the DOM operations for you.

Directly manipulating the DOM is slow. Every time you change an element, the browser may need to recalculate styles, reflow the layout, and repaint the screen. When you have many changes happening quickly (like in a complex interactive app), this becomes a performance bottleneck.

React solves this with the Virtual DOM — a lightweight JavaScript representation of the real DOM. Here is how it works:

1. You describe the UI by returning JSX from your components.
2. React creates a virtual DOM tree — a plain JavaScript object that mirrors the structure of your UI.
3. When data changes, React creates a new virtual DOM tree.
4. React compares ("diffs") the new tree with the previous one.
5. React calculates the minimal set of changes needed and applies only those changes to the real DOM.

This process is called reconciliation, and it makes React fast even for complex UIs with frequent updates.

Another major benefit of React is its unidirectional data flow. Data flows in one direction — from parent components down to child components. This makes your application easier to understand and debug because you can always trace where a piece of data came from.

React also has a massive ecosystem:

• Next.js — Full-stack React framework with server rendering
• React Router — Client-side routing
• Redux / Zustand — State management
• React Query — Data fetching and caching

Learning React opens the door to this entire ecosystem.

React uses a syntax extension called JSX (JavaScript XML) that lets you write HTML-like code directly inside JavaScript. JSX is not valid JavaScript — it needs to be transformed by a compiler (like Babel) into regular function calls.

This JSX:

const element = <h1 className="title">Hello World</h1>;

Gets compiled to:

const element = React.createElement('h1', { className: 'title' }, 'Hello World');

JSX rules you need to know:

1. Expressions in curly braces: You can embed any JavaScript expression inside JSX using {}:

const name = 'Alice';
const element = <h1>Hello, {name}!</h1>;
const math = <p>2 + 2 = {2 + 2}</p>;

2. HTML attributes use camelCase: Since JSX is JavaScript, attributes that conflict with reserved words are renamed:

• class becomes className
• for becomes htmlFor
• tabindex becomes tabIndex

<div className="container">
  <label htmlFor="email">Email</label>
</div>

3. Self-closing tags are required: Every element without children must be self-closed:

<img src="photo.jpg" alt="A photo" />
<br />
<input type="text" />

4. One root element: A component must return a single root element. If you need multiple elements, wrap them in a <div> or use a Fragment (<>...</>):

// Using a Fragment — no extra DOM node
function App() {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph</p>
    </>
  );
}

A React component is a JavaScript function that returns JSX. Components are the building blocks of every React application. By convention, component names start with an uppercase letter — this is how React distinguishes components from regular HTML elements.

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

To display a component on the page, you need to render it into a DOM element. React 18+ uses createRoot:

// Select the DOM element where React will render
const root = ReactDOM.createRoot(document.getElementById('root'));

// Render a component into it
root.render(<Welcome />);

The <Welcome /> syntax is how you use a component in JSX — it looks like a self-closing HTML tag. React calls your Welcome function, takes the JSX it returns, and renders it into the #root element.

You can compose components together. A common pattern is to have an App component that serves as the root of your component tree:

function Header() {
  return <header><h1>My Site</h1></header>;
}

function Content() {
  return <main><p>Welcome to my site.</p></main>;
}

function App() {
  return (
    <>
      <Header />
      <Content />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

Each component is independent and reusable. You can use <Header /> in multiple places throughout your application.