Chapter 5: ReactJS Core Features & JSX Deep Dive

1. JSX (JavaScript XML): More Than Just Syntax

JSX is a syntax extension for JavaScript that looks remarkably like HTML. However, unlike traditional templating engines (such as Handlebars, Mustache, or Angular templates), JSX does not separate markup from programming logic. Instead, it harnesses the full expressive power of JavaScript.

// What you write in your editor:
const card = (
  <div className="profile-card" id="user-99">
    <h2>Sarah Connor</h2>
    <p>Status: Active</p>
  </div>
);

// What the compiler produces behind the scenes:
import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';

const card = _jsxs('div', {
  className: 'profile-card',
  id: 'user-99',
  children: [
    _jsx('h2', { children: 'Sarah Connor' }),
    _jsx('p', { children: 'Status: Active' })
  ]
});

Strict Rules of JSX:

• Single Parent / Fragment: Components must return a single top-level element. Use React Fragments (<> ... </>) to group siblings without generating superfluous wrapper <div> tags.
• All Tags Must Close: Self-closing tags like <img />, <input />, and <br /> must explicitly include a closing slash.
• camelCase Attribute Naming: Since JSX translates to JavaScript, HTML attributes that collide with reserved JS keywords are rewritten in camelCase (e.g., class becomes className, for becomes htmlFor,tabindex becomes tabIndex).

2. The Virtual DOM & Reconciliation Heuristics

The browser DOM was originally conceived for static hypertext documents. When complex modern web apps attempt to mutate hundreds of nodes sequentially, the browser is forced to compute CSS layouts, calculate element geometries (reflow), and re-rasterize pixels (repaint)—creating noticeable UI stutter and battery drain on mobile devices.

React resolves this via a two-step process:

The Two Heuristic Assumptions of Diffing:

A standard tree comparison algorithm takes O(n³) time (where n is the number of elements in the tree). For a page with 1,000 nodes, O(n³) would require 1,000,000,000 operations! React reduces this to O(n) (linear time) through two clever heuristics:

• Elements of Different Types Produce Different Subtrees: If an element changes from <div> to<section>, React does not bother diffing their children. It unmounts the old tree completely and mounts the new one from scratch.
• Keys Hint at Stable Identity Across Renders: When rendering dynamic lists, the key prop informs React which list items remained unchanged, moved position, or were deleted, avoiding destructive re-renders of the entire list.

3. Unidirectional Data Flow & Predictability

In frameworks featuring two-way data binding (such as AngularJS 1.x), changes in a child view could silently mutate model state in the parent, leading to cyclic cascades where pinpointing what caused a bug became notoriously painful.

React enforces unidirectional (one-way) data binding:

4. The SyntheticEvent System

Different browsers (Safari, Chrome, Firefox) have historical discrepancies in how they implement W3C DOM events. React solves this by wrapping all native browser events in an instance of SyntheticEvent.

• Cross-Browser Parity: Provides identical properties and methods across every browser and device.
• Event Delegation at Root: Rather than attaching thousands of individual click listeners to every list item (which wastes memory), React delegates all listeners to the root DOM container (#root), intercepting events as they bubble up.

5. Advanced UI Primitives: Fragments, Portals & Error Boundaries

function TableCells() {
  return (
    <>
      <td>Title</td>
      <td>Price</td>
    </>
  );
}

import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">{children}</div>,
    document.getElementById('modal-root')
  );
}

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h2>Something went wrong.</h2>;
    }
    return this.props.children;
  }
}

Frequently Asked Questions (FAQ)