---
title: 'JSX and React: Learn How to Write Maintainable Code – CheatSheet'
description: A concise 2025 JSX & React cheat sheet covering components, props, state, hooks, events, conditional rendering, and maintainable coding practices.
url: https://nerdleveltech.com/react-jsx-cheatsheet-2025
language: en
date: '2025-09-16'
updated: '2025-09-16'
category: frontend
tags:
  - React
  - JSX
  - Frontend
  - JavaScript
  - Cheatsheet
markdown_url: https://nerdleveltech.com/react-jsx-cheatsheet-2025.md
attribution: 'Source: NerdLevelTech — https://nerdleveltech.com/react-jsx-cheatsheet-2025'
terms: https://nerdleveltech.com/llms.txt
---

# JSX and React: Learn How to Write Maintainable Code – CheatSheet

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**.

![React CheatSheet Cover](https://nerdleveltech.com/images/react-jsx-vdom.png)

---

## 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 Virtual DOM Illustration](https://nerdleveltech.com/images/react-vdom-flow.png)

- 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[^react-docs].

### 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

![React Hooks Cheatsheet](https://nerdleveltech.com/images/react-hooks-cheatsheet.png)

### 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**.

---


---

## Related reads

- [Understanding Conditional Rendering in React (2025 Guide)](https://nerdleveltech.com/react-conditional-rendering-2025)
- [Understanding React: A Comprehensive Guide to Building Modern Web Apps](https://nerdleveltech.com/understanding-react-a-comprehensive-guide-to-building-modern-web-apps)
- [How to Cancel a Fetch Request in JavaScript (2026)](https://nerdleveltech.com/cancel-fetch-request-abortcontroller-react)

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