Chapter 1: Introduction to ReactJS

1. The Genesis of React: Why Was It Created?

Around 2010, the engineering team at Facebook faced an escalating complexity crisis with their web interface. As features like Facebook Chat, Real-Time Notifications, and the News Feed grew increasingly interconnected, maintaining state consistency across disparate parts of the page became nearly impossible.

A notorious manifestation of this bug was the "Zombie Notification" problem: a user would open a chat message, clearing the notification in the chat bar, yet the top notification globe would still show unread messages because the two independent DOM widgets failed to synchronize their state.

Jordan Walke, a software engineer at Facebook, proposed an unconventional solution heavily inspired by functional programming concepts from XHP (a PHP extension that allowed writing XML-like syntax directly in PHP) and functional languages like Standard ML. His prototype, initially dubbed FaxJS in 2011, evolved into React and was deployed to Facebook's News Feed in 2011, then Instagram in 2012, before being released as open-source software at JSConf US in May 2013.

2. Imperative vs. Declarative: The Core Mental Model

To truly understand React, one must grasp the fundamental distinction between imperative programming and declarative programming in UI engineering.

Code Comparison: Updating a Button Counter

Consider the classic counter button. Notice how much boilerplate and manual synchronization is needed in Vanilla JS compared to React:

// 1. Manually find the DOM nodes
const btn = document.getElementById('countBtn');
const text = document.getElementById('countDisplay');

let count = 0;

// 2. Attach manual listener
btn.addEventListener('click', () => {
  count++;
  // 3. Manually mutate the DOM node
  text.innerText = `Count is ${count}`;
});

import { useState } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Count is {count}
    </button>
  );
}

3. The Three Pillars of React Architecture

React's engineering power rests upon three central architectural concepts:

4. Anatomy of a Modern React Application

Let's examine a standard modern React application entry point created with React 18+ and understand what every line executes:

// src/main.jsx (Entry Point)
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// 1. Locate root DOM container
const rootElement = document.getElementById('root');

// 2. Create the React 18 Concurrent Root
const root = ReactDOM.createRoot(rootElement);

// 3. Render the Component Hierarchy
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Step-by-Step Execution Breakdown:

• document.getElementById('root'): Finds the single physical <div id="root"></div>in the host index.html file where the entire React application will be mounted.
• ReactDOM.createRoot(): Replaces the legacy React 17 ReactDOM.render() API. It initializes React 18's concurrent rendering engine, enabling features like interruptible rendering, Suspense, and automatic state batching.
• <React.StrictMode>: A development-only diagnostic wrapper that activates additional checks and warnings. In development mode, it intentionally re-invokes functional component renders and effects twice to help you identify side-effect bugs and deprecated lifecycle patterns before they reach production.

// What you write:
const element = <h1 className="title">Hello World</h1>;

// What the compiler outputs:
const element = React.createElement('h1', { className: 'title' }, 'Hello World');

Frequently Asked Questions (FAQ)