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.

---

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
• 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)

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.

import { useState } from "react";

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

2.4 Event Handling

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

---

3. Decoding JSX

3.1 Basic Syntax

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

3.2 Embedding Expressions

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

3.3 Attributes & Props

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

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

3.4 Children & Self-Closing Tags

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

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

3.5 Components & JSX

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

---

4. React Essentials CheatSheet

4.1 Rendering in React 18+

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

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

4.2 Props

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

4.3 State

import { useState } from "react";

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

4.4 Lifecycle with Hooks

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

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 React 18+ features like Hooks, Suspense, and Server Components, writing clean, scalable React code has never been easier.

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.

---