Why React

Component Model

React uses a component-based architecture where UIs are built from small, reusable pieces called components.

What is a Component?

A component is a self-contained piece of UI that can:

• Accept inputs (props)
• Manage internal state
• Render UI
• Be composed with other components

Component Example

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

// Usage
<Welcome name="Alice" />
<Welcome name="Bob" />

Benefits

• Reusability: Use components across your app
• Separation of concerns: Each component handles one thing
• Testability: Components can be tested in isolation
• Maintainability: Changes are localized to components

Declarative UI

React is declarative—you describe what the UI should look like, not how to update it.

Imperative vs Declarative

// Imperative (vanilla JS)
const element = document.createElement("div");
element.textContent = "Hello";
element.className = "greeting";
document.body.appendChild(element);

// When state changes
if (isVisible) {
  element.style.display = "block";
} else {
  element.style.display = "none";
}

// Declarative (React)
function Greeting({ name, isVisible }) {
  if (!isVisible) return null;
  return <div className="greeting">Hello, {name}!</div>;
}

// Just call it again when state changes
<Greeting name="Alice" isVisible={true} />

Benefits

• Easier to understand: Code reads like a description of UI
• Less bugs: No manual DOM manipulation
• Better state management: UI automatically reflects state

Virtual DOM

React uses a Virtual DOM to efficiently update the real DOM.

How It Works

1. State changes trigger a re-render
2. React creates a Virtual DOM tree (lightweight copy)
3. React diffs the new tree against the previous one
4. React reconciles only the changed parts to the real DOM

Benefits

• Performance: Minimizes expensive DOM operations
• Batching: Multiple state changes are batched into one update
• Cross-platform: Virtual DOM enables React Native

Simple Example

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

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

When count changes:

1. React creates new Virtual DOM with updated count
2. React compares with previous Virtual DOM
3. Only the <p> tag's text content is updated
4. The button and div are not touched