React is a declarative, component-based JavaScript library designed by Meta for building interactive user interfaces. Unlike vanilla JavaScript, where you manually select and mutate DOM elements step by step, React lets you describe what the UI should look like for a given state and handles the actual DOM updates itself.

This shift removes huge amounts of imperative boilerplate — no more manually tracking which elements need to change — making applications significantly easier to reason about, maintain, and scale as they grow.

In an imperative approach, you write exact step-by-step instructions for mutating the UI — selecting elements, attaching listeners, updating text content by hand — which quickly turns into an unmaintainable web of DOM operations. A declarative approach flips this: you simply declare the final desired UI based on your data.

React's engine then figures out the most efficient way to update the actual DOM to match that declaration, so you stop thinking about the individual steps and start thinking about the end result.

At the core of a React app is the Component — a self-contained JavaScript function that returns a piece of UI. To make writing components intuitive, React uses JSX, a syntax extension that lets you write HTML-like markup directly inside your JavaScript. Behind the scenes, JSX compiles down to plain React.createElement() calls.

Because it's still just JavaScript underneath, JSX merges rendering logic with UI structure, letting you use loops, conditionals, and variables directly within your markup.

Direct manipulation of the browser's real DOM is slow and computationally expensive, so React maintains a lightweight, in-memory representation of it called the Virtual DOM. When state changes, React builds a new Virtual DOM tree and compares it against the previous one in a process called reconciliation.

From that comparison, React calculates the minimum number of real DOM mutations needed and applies only those, instead of re-rendering the entire page on every change.

For React to take control of a webpage, it must be attached, or 'mounted', to a standard HTML element — typically a <div id="root">. Using createRoot from react-dom/client, you tell React exactly where in the page to inject your component tree.

Once mounted with root.render(<App />), React takes over management of the DOM inside that container, and every subsequent update flows through its own rendering process rather than manual DOM edits.

Because components are just JavaScript functions, you can nest them inside one another the same way you nest HTML tags. This is composition: instead of one giant monolithic component, you assemble complex UIs out of small, focused pieces.

A Dashboard component, for example, might contain a Sidebar, a Header, and a DataGrid, each handling its own specific responsibility while the parent simply arranges them together.

Reusability is what lets a React app scale without duplicating code. Instead of hardcoding text or styles inside a component, components accept inputs called 'props' — short for properties — much like function arguments.

Passing different props to the same component, such as <Button label="Save" /> and <Button label="Cancel" />, lets you render the same structural layout with entirely different data, cutting down on maintenance and keeping the app visually consistent.

Wrapping your component tree in <React.StrictMode> renders no visible UI of its own — it's a development-only tool that activates extra checks and warnings for everything inside it. During development, Strict Mode intentionally double-invokes certain functions, like component bodies and some lifecycle logic.

That deliberate double-invocation helps surface impure logic, legacy API usage, and unintended side effects before they ever make it to production, where they'd only run once and might go unnoticed.

Welcome to React. Welcome to the world of React, a declarative and component-based JavaScript library designed by Meta for building highly interactive user interfaces. Unlike vanilla JavaScript where you must manually manipulate DOM elements, React allows you to describe exactly what the UI should look like for a given state. This paradigm shift fundamentally eliminates massive amounts of imperative boilerplate, making your codebase significantly easier to maintain and scale.

Imperative vs Declarative. The core philosophy that makes React so powerful is its declarative nature. In an imperative approach, you write exact step-by-step instructions on how to mutate the UI, which quickly becomes an unmaintainable web of DOM selections and event listeners. In a declarative approach, you simply declare the final desired state of the UI based on your data. React's engine then calculates the most efficient way to update the actual DOM to match your declaration.

Components Concept. At the absolute core of React's architecture is the concept of a Component. A component is essentially a self-contained, independent JavaScript function that returns a piece of the user interface. By breaking down complex interfaces into small, reusable components, you can encapsulate logic, styles, and markup together. This makes testing, debugging, and team collaboration exponentially more efficient compared to monolithic HTML files.

JSX Syntax. To make writing components intuitive, React uses JSX (JavaScript XML), a syntax extension that allows you to write HTML-like markup directly inside your JavaScript files. Behind the scenes, JSX is compiled down to standard JavaScript function calls using React.createElement(). This syntax seamlessly merges the rendering logic with UI structure, allowing you to use the full programmatic power of JavaScript directly within your markup.

Understanding the foundational building blocks of React is critical before moving forward. When you write code in React, what is the specific syntax extension that allows you to seamlessly mix HTML-like tags directly inside your JavaScript functions?

• →JSX
• →HTML

The Virtual DOM. One of React's most famous performance optimizations is the Virtual DOM. Direct manipulation of the browser's real DOM is incredibly slow and computationally expensive. To solve this, React maintains a lightweight, in-memory representation of the DOM. When the state of your application changes, React generates a new Virtual DOM tree, compares it with the previous one (a process called reconciliation), and calculates the absolute minimum number of real DOM mutations needed.

Mounting the Application. For React to take control of your webpage, it needs to be attached or 'mounted' to a standard HTML element, typically a simple div with the id 'root'. Using the createRoot method from the react-dom/client package, you tell React exactly where to inject your entire component tree. Once mounted, React completely takes over the management of the DOM inside that specific container, ensuring all subsequent updates are lightning fast.

Composition. React's true power unlocks when you embrace composition. Because components are just JavaScript functions, you can nest them inside one another just like standard HTML tags. You can build complex, enterprise-grade applications by assembling small, simple components together. A Dashboard component might contain a Sidebar, a Header, and a DataGrid, each managing its own specific responsibilities and rendering logic.

Reusability and Props. Component reusability is the cornerstone of scaling a React application without duplicating code. Instead of hardcoding text or styles, components can accept inputs called 'props' (short for properties), just like HTML attributes or function arguments. By passing different props to the same component, you can render identical structural layouts with entirely different data, drastically reducing maintenance overhead and ensuring consistency across your app.

Understanding how React optimizes browser performance is a mandatory concept for technical interviews. What is the name of the lightweight, in-memory representation of the DOM that React uses to calculate the absolute minimum number of actual DOM updates required?

• →Virtual
• →Shadow

React Strict Mode. When developing React applications, you will often wrap your entire component tree in <React.StrictMode>. This is a special tool that does not render any visible UI. Instead, it activates additional checks and warnings for its descendants. In development mode, Strict Mode intentionally double-invokes certain lifecycle functions and render methods to help you detect impure logic, legacy API usage, and unintended side effects before they reach production.

React Developer Tools. Debugging a React application using the standard browser Elements panel can be frustrating because the compiled DOM doesn't show your Component names or internal state. The React Developer Tools browser extension solves this by providing a dedicated 'Components' tab in your developer tools. It allows you to inspect the React component tree exactly as you wrote it, view real-time prop and state values, and even trace performance bottlenecks.

Live Lab: Component Tree. Observe the interactive nature of React. Even a simple application is composed of multiple nested components working together. In modern development, you will build vast libraries of these reusable UI elements. Think of React as a system of Lego blocks; each block is isolated, but together they form a complex, highly functional architecture.

Mastery Achieved. Introduction mastered! You've learned the difference between declarative and imperative programming, the concept of components, JSX syntax, and how the Virtual DOM optimizes performance. You are now ready to dive deeper into the specific syntax rules of JSX in the next module.