JSX and React: Learn How to Write Maintainable Code

Welcome to our comprehensive React JSX tutorial! This React cheat sheet covers the essentials of React development in 2025, from JSX syntax to React hooks and component patterns. Bookmark this guide for quick reference when building your next React application.

1. Why Learn React in 2025?

React remains one of the most popular JavaScript libraries for building user interfaces. Here's why learning React is still essential:

Flexibility — React is a library, not a full framework, giving you architectural freedom
Massive ecosystem — Redux Toolkit, Zustand, React Router, TanStack Query, and more
Modern features — React Hooks, concurrent rendering, Suspense, and React Server Components (stable in React 19, released December 2024)
Strong job market — React skills are in high demand across all company sizes

👉 Whether you're building a Next.js application, a React SPA, or a React Native mobile app, these fundamentals apply everywhere.

2. React Nuts and Bolts

2.1 Components

The building blocks of React apps.

Functional components (preferred)
Class components (legacy, rarely needed)

jsx

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

2.2 Virtual DOM & Reconciliation

React maintains a virtual DOM to optimize updates.
Changes are compared (“diffed”) and only minimal updates are applied to the real DOM.

2.3 State & Props

Props → inputs from parent to child.
State → local, changeable data inside a component.

jsx

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

2.4 Event Handling

jsx

function ButtonClick() {
  function handleClick() {
    console.log("Button clicked!");
  }
  return <button onClick={handleClick}>Click me</button>;
}

3. Decoding JSX

JSX is a syntax extension for JavaScript used with React that lets you describe UI structure with HTML-like markup directly in your JavaScript code¹.

3.1 Basic Syntax

jsx

const element = <h1>Hello, world!</h1>;

3.2 Embedding Expressions

jsx

const name = "John";
const element = <h1>Hello, {name}!</h1>;

3.3 Attributes & Props

jsx

const image = <img src="scenery.jpg" alt="A beautiful scenery" />;

⚡ Note: Use camelCase for attributes (className, onClick).

3.4 Children & Self-Closing Tags

jsx

const element = (
  <div>
    <h1>Welcome</h1>
    <p>This is JSX</p>
  </div>
);

const img = <img src="pic.jpg" alt="scenery" />;

3.5 Components & JSX

jsx

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

4. React Essentials CheatSheet

4.1 Rendering in React 18 and 19

jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

The createRoot API replaced the legacy ReactDOM.render starting in React 18; React 19 removed ReactDOM.render entirely, making createRoot the only supported way to mount a root-level app.

4.2 Props

jsx

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}
<Welcome name="Jane" />;

4.3 State

jsx

import { useState } from "react";

function Clock() {
  const [date, setDate] = useState(new Date());
  return <div>{date.toLocaleTimeString()}</div>;
}

4.4 Lifecycle with Hooks

jsx

import { useEffect, useState } from "react";

function Clock() {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => setDate(new Date()), 1000);
    return () => clearInterval(timer); // cleanup
  }, []);

  return <div>{date.toLocaleTimeString()}</div>;
}

4.5 Conditional Rendering

jsx

function Greeting({ isLoggedIn }) {
  return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>;
}

5. Conclusion

JSX blends JavaScript logic with UI markup into a single, maintainable syntax that powers modern React applications. With features introduced across React 18 and React 19 — Hooks, concurrent rendering, Suspense, and Server Components — writing clean, scalable React code is more approachable than ever.

Key takeaways from this React JSX cheat sheet:

Functional components with hooks are the modern standard
JSX syntax closely mirrors HTML but uses camelCase for attributes
State and props are fundamental to React's data flow model
useEffect handles side effects and component lifecycle

Bookmark this React quick reference for your next project. Whether you're a React beginner or an experienced developer, these patterns form the foundation of professional React development.

React Documentation. JSX is a syntax extension for JavaScript used with React. https://react.dev/learn/writing-markup-with-jsx ↩

Stay on the Nerd Track