React 19 Fundamentals & JSX

React is a JavaScript library for building user interfaces. That single sentence understates how fundamentally it changed front-end development. Before React, most UI code was imperative: you wrote step-by-step instructions telling the browser what to do. With React, you write declarative code — you describe what the UI should look like, and React figures out how to get there.

Declarative vs Imperative

Consider displaying a user's name after a button click.

Imperative (vanilla JS):

const button = document.getElementById('btn');
const display = document.getElementById('display');

button.addEventListener('click', () => {
  display.textContent = 'Hello, Rakib';
  display.style.display = 'block';
});

Declarative (React):

function Greeting() {
  const [show, setShow] = React.useState(false);

  return (
    <div>
      <button onClick={() => setShow(true)}>Show</button>
      {show && <p>Hello, Rakib</p>}
    </div>
  );
}

In the React version, you declare the relationship between state and UI. React handles the DOM manipulation. This becomes enormously valuable as UIs grow in complexity.

The Virtual DOM

Directly manipulating the real DOM is slow. React maintains a lightweight in-memory copy called the Virtual DOM. When state changes, React:

1. Creates a new Virtual DOM tree
2. Diffs it against the previous tree (reconciliation)
3. Computes the minimal set of real DOM changes needed
4. Applies only those changes (commit phase)

This is why React UIs stay fast even with frequent updates.

React 19 Key Features

React 19 (released late 2024) is the most significant update in years. The headline additions:

• React Compiler — automatically memoizes components and values, eliminating most manual useMemo/useCallback calls
• Server Components — components that render exclusively on the server, reducing client bundle size (covered in depth in the Next.js modules)
• Actions — a new pattern for handling async state mutations (form submissions, server calls) that pairs with useTransition
• use() hook — read promises and context directly inside render, replacing many useEffect data-fetching patterns
• useFormStatus and useOptimistic — built-in hooks for form state and optimistic UI updates

JSX: It Is Not HTML

JSX is a syntax extension for JavaScript. It looks like HTML but it is not. It compiles down to JavaScript function calls.

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

// What Babel/SWC compiles it to
const element = React.createElement('h1', { className: 'title' }, 'Hello');

Understanding this compilation step makes the JSX rules obvious rather than arbitrary.

JSX Rules

1. className, not class class is a reserved keyword in JavaScript.

// Wrong
<div class="container">

// Correct
<div className="container">

2. All tags must close

// Wrong
<input type="text">
<br>

// Correct
<input type="text" />
<br />

3. Single root element A component can only return one root element. Use a Fragment to avoid adding an extra DOM node:

// Wrong — two sibling elements
return (
  <h1>Title</h1>
  <p>Subtitle</p>
);

// Correct — wrapped in Fragment
return (
  <>
    <h1>Title</h1>
    <p>Subtitle</p>
  </>
);

4. JavaScript expressions in {} Curly braces let you embed any JavaScript expression — variables, function calls, ternaries, template literals. Statements (if/else, for loops) are not expressions and cannot go directly inside JSX.

const name = 'Rakib';
const score = 92;

return (
  <div>
    <p>Welcome, {name}</p>
    <p>Grade: {score >= 90 ? 'A' : 'B'}</p>
    <p>Upper: {name.toUpperCase()}</p>
  </div>
);

5. camelCase attributes HTML attributes become camelCase in JSX: onclick → onClick, onchange → onChange, tabindex → tabIndex.

Rendering with createRoot

Since React 18, rendering uses createRoot. This unlocks concurrent features:

// main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

StrictMode runs components twice in development to surface side effects and deprecated API usage. It has zero impact in production.

Component Tree Mental Model

React applications are trees of components. Each component is a function that returns JSX. Data flows down via props; events bubble up via callback props.

App
├── Header
│   └── NavBar
├── Main
│   ├── Sidebar
│   └── ProductList
│       ├── ProductCard
│       ├── ProductCard
│       └── ProductCard
└── Footer

When you understand the tree, you understand where to put state, how data flows, and why lifting state up is necessary.

React's Re-render Model

A component re-renders when:

• Its state changes (useState, useReducer)
• Its parent re-renders (unless memoized with React.memo)
• A context it consumes changes

Re-rendering does not mean re-mounting. React diffs the output and only updates what changed in the DOM. Still, unnecessary re-renders burn CPU — the React Compiler in React 19 largely automates the fix.

// React.memo prevents re-render if props haven't changed
const ProductCard = React.memo(function ProductCard({ title, price }) {
  console.log('rendered:', title);
  return <div>{title} - ${price}</div>;
});

Setting Up a React Project with Vite

Vite is the current standard for React development. It starts instantly and has native ESM hot module replacement.

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Project structure after setup:

my-app/
├── public/
├── src/
│   ├── assets/
│   ├── App.jsx          ← root component
│   ├── App.css
│   └── main.jsx         ← entry point (createRoot is here)
├── index.html
├── vite.config.js
└── package.json

To use TypeScript (recommended for professional projects):

npm create vite@latest my-app -- --template react-ts

What You've Learned

React's declarative model and Virtual DOM exist to simplify complex UIs. JSX is compiled JavaScript — understanding that makes the rules logical. React 19 introduces the compiler, Server Components, and Actions. A Vite setup gives you a production-ready development environment in under two minutes. In the next lesson, we go deep on useState — the hook that makes React components dynamic.