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

Welcome to our React exploration! In this article, we’ll cover the value of React in 2025 and break down the essentials in a cheat sheet format. Expect well-documented code snippets, explanations, and quick references to help you write clean, maintainable React code. 🚀

---

1. The Value of React in 2025

React is still one of the most dominant frontend libraries thanks to:

• Flexibility (library, not a full framework).
• Huge ecosystem (Redux Toolkit, Zustand, React Router, TanStack Query).
• Modern features: Hooks, concurrent rendering, Suspense, and Server Components.
• Long-term adoption and job demand.

👉 If you’re a web developer, learning React is still worth it.

---

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 + UI markup into a single, maintainable syntax. With modern React features like Hooks, Suspense, and Server Components, writing clean and maintainable code has never been easier.

✅ Keep this cheat sheet handy when building your next React project!

---