Lesson 1 +10 XP

Introduction to React

React is an open-source JavaScript library developed by Meta (Facebook) for building fast, interactive user interfaces—especially single-page applications (SPAs).

What is React?

Traditional websites reload the entire page every time the user clicks a link or submits a form. React changes this by dynamically updating components on the client side without requiring full page refreshes.

Key Philosophy of React

Component-Based Architecture: UI is broken down into small, isolated, reusable pieces called components.
Declarative Syntax: You describe what the UI should look like for a given state, and React handles how to update the DOM.
Unidirectional Data Flow: Data flows down from parent components to child components via properties (props), making state changes predictable.

Feature	Traditional DOM Manipulation	React Approach
DOM Updates	Direct imperatively (`element.textContent = ...`)	Declarative via Virtual DOM reconciliation
Code Structure	Global HTML + JS scripts	Modular, reusable components
Performance	Triggers expensive layout recalculations	Batched DOM updates via Virtual DOM diffing
State Management	Stored in DOM attributes or global variables	Stored in component state hooks

// Simple React Component Example
function WelcomeMessage() {
  return (
    <header className="hero">
      <h1>Welcome to React!</h1>
      <p>Building UI with declarative components.</p>
    </header>
  );
}

Why Use React?

React powers major web apps like Instagram, Netflix, Airbnb, and Facebook. Its ecosystem features client-side routing, state management libraries (Redux, Zustand), server-side rendering (Next.js), and mobile application development (React Native).

Summary & TL;DR

React is a declarative, component-based library for building user interfaces.
Component architecture allows developers to break complex UIs into independent, reusable modules.
Unidirectional data flow ensures predictable updates from parent to child components.