React — Introduction

What is React?

React is a JavaScript library for building user interfaces. Created by Facebook (now Meta) in 2013, it's the most widely used frontend library in the world.

React lets you build complex UIs from small, reusable pieces called components. Instead of manipulating the DOM directly, you describe what the UI should look like, and React figures out how to update it efficiently.

Why React Exists

Before React, developers faced two problems:

1. Direct DOM manipulation was messy — updating individual elements led to spaghetti code
2. Data and UI got out of sync — when data changed, you had to manually update every part of the page that depended on it

React solves this with a simple idea: declare your UI as a function of your data.

// When `name` changes, React automatically re-renders this
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Core Concepts

Components

Everything in React is a component. A component is a function that returns JSX:

function Button({ label, onClick }) {
  return (
    <button onClick={onClick} className="btn">
      {label}
    </button>
  );
}

JSX

JSX looks like HTML but lives in JavaScript:

const element = <h1>Hello, World!</h1>;

Under the hood, JSX compiles to React.createElement() calls — it's just syntactic sugar.

Virtual DOM

React maintains a lightweight copy of the DOM in memory. When state changes:

1. React creates a new virtual DOM tree
2. Compares it with the previous one (diffing)
3. Updates only the changed parts (reconciliation)

This is faster than updating the entire DOM.

Unidirectional Data Flow

Data flows down from parent to child via props:

function App() {
  const name = "Alice";
  return <Greeting name={name} />;  // data flows down
}

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;  // receives via props
}

React vs Other Frameworks

Feature	React	Angular	Vue
Type	Library	Framework	Library
Learning Curve	Easy	Steep	Easy
Flexibility	High (bring your own tools)	Low (opinionated)	Medium
State Management	External (Redux, Zustand)	Built-in (NgRx)	Built-in (Pinia)
Job Market	Excellent	Good	Growing
Community	Largest	Large	Growing

Prerequisites

Before learning React, you should know:

• HTML/CSS — structure and styling
• JavaScript ES6+ — arrow functions, destructuring, modules, array methods
• Node.js — for running npm and development servers

Your First React App

Create a new React project:

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

Open src/App.js:

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
      <p>Welcome to your first React app.</p>
    </div>
  );
}

export default App;

Save and visit http://localhost:3000 — you'll see your app running.

How React Renders

import ReactDOM from 'react-dom/client';

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

This mounts your <App /> component into the div#root element in public/index.html.

React Ecosystem

React is a library, not a full framework. You'll often use it with:

• Next.js — Server-side rendering, file-based routing
• React Router — Client-side navigation
• Redux / Zustand — State management
• React Query — Server data fetching
• Tailwind CSS — Utility-first styling
• Vite — Fast build tool (modern alternative to Create React App)

Mini Practice

1. Run npx create-react-app hello-react and open src/App.js
2. Change the <h1> text and save — watch it update instantly
3. Create a Greeting component and use it inside App
4. Pass a prop to Greeting and display it

Up Next

Next: Getting started with React →