React Fundamentals / Mental Model 🧠

React becomes easy once you picture it as a system where ⚛️ components describe UI and 🔄 React reconciles changes automatically.

1) What React Is ⚛️

React is a JavaScript UI library focused on component-based, declarative rendering.

• ✅ Components are small reusable functions returning JSX.
• ✅ Data flows down via props; UI updates as data changes.
• 🧠 Mental model: UI = f(state, props).

function Welcome({ name }) {
  return (
    <header>
      <p>Hello, {name}! 👋</p>
    </header>
  );
}

2) Declarative vs Imperative 🔄

• ❌ Imperative DOM: “create this node, append it, update innerText…” — lots of micromanagement.
• ✅ Declarative React: describe the final UI; React diffing figures out DOM operations.

// Imperative DOM (mentally exhausting)
const title = document.createElement("h1");
title.textContent = "Hello";
document.body.appendChild(title);

// Declarative React (mental relief)
<h1>Hello</h1>;

3) Component Tree 🌳

• Components form a nested tree (App → Page → Section → Button).
• Each re-render rebuilds this virtual tree.
• 🧠 Think of it like LEGO layers: parent blocks hold child blocks.

🧩 Data typically flows top → down; events bubble up.

4) Re-rendering Basics 🔁

React re-renders a component when:

1. Its own useState setter runs.
2. Its parent re-renders and passes new props.
3. Context or external store changes.

Re-render 👉 React calls the component function again to produce a fresh UI description.

5) Reconciliation 🧠

React uses a diffing algorithm to compare the previous and next virtual trees.

• ✅ Updates only changed DOM nodes.
• ✅ Preserves state for components with the same key.
• 🧠 Treat it like “spot the difference” for UI.

6) JSX Basics ✨

• JSX is JavaScript that looks like HTML.
• Use {} for expressions, e.g., {user.name.toUpperCase()}.
• Attribute names follow JS casing: className, htmlFor.
• Render lists with .map() and provide a stable key per item.

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.done ? "✅" : "⬜"} {todo.label}
        </li>
      ))}
    </ul>
  );
}

7) Rendering Entry Points 🖥️

createRoot is the modern mount API; wrap your app in StrictMode for helpful development warnings.

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
 
createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

• ⚛️ createRoot replaces legacy ReactDOM.render.
• 🧪 StrictMode double-invokes some lifecycles in dev to surface side-effect bugs.

Key Takeaways ✅

• React = declarative component-based UI library.
• Re-rendering re-executes components; reconciliation updates minimal DOM.
• JSX is the syntax bridge between JavaScript and UI descriptions.
• createRoot + StrictMode is the default entry point for modern React apps.

Recap 🔄

React treats UI as a function of data, rendering a component tree declaratively. When state or props change, components re-run, and reconciliation applies the minimal DOM updates. JSX provides the syntax, while createRoot mounts the app with StrictMode guarding for side-effect mistakes.