React is a JavaScript library for building user interfaces, created by Meta and maintained by a large open-source community.

Why React?

  • Component-based — UI split into reusable, independent pieces
  • Declarative — describe what the UI should look like; React handles updates
  • Virtual DOM — efficient updates by comparing virtual and real DOM
  • Huge ecosystem — routing, state management, UI libraries, tooling
  • React Native — same concepts for mobile apps

Core Concepts 

  UI = f(state)

When state changes → React re-renders affected components → DOM updates efficiently
Concept Description
Components Reusable UI building blocks
JSX HTML-like syntax in JavaScript
Props Data passed from parent to child
State Data managed within a component
Hooks Functions to use state and lifecycle in function components

React vs Vanilla JavaScript

Vanilla JS:

  const button = document.querySelector('#btn');
button.addEventListener('click', () => {
    document.querySelector('#count').textContent = count++;
});

React:

  function Counter() {
    const [count, setCount] = useState(0);
    return (
        <button onClick={() => setCount(count + 1)}>
            Count: {count}
        </button>
    );
}

React automatically updates the DOM when count changes.

When to Use React

Good fit:

  • Single-page applications (SPAs)
  • Dynamic, data-driven UIs
  • Dashboards, social apps, e-commerce
  • Cross-platform (web + mobile with React Native)

Consider alternatives when:

  • Simple static sites — use HTML or a static site generator
  • SEO-critical content pages — consider Next.js (React framework) or SSR

React Ecosystem

  • Next.js — Full-stack React framework with SSR/SSG
  • React Router — Client-side routing
  • Redux / Zustand — State management
  • TanStack Query — Server state management
  • Tailwind CSS / MUI — Styling

Prerequisites

Complete these before starting:

Next: set up your first React project with Vite.