# 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**. 🚀 ![React CheatSheet Cover](/images/react-jsx-vdom.png) --- ## 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) ```jsx function Welcome({ name }) { return

Hello, {name}!

; } ``` ### 2.2 Virtual DOM & Reconciliation ![React Virtual DOM Illustration](/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 ; } ``` ### 2.4 Event Handling ```jsx function ButtonClick() { function handleClick() { console.log("Button clicked!"); } return ; } ``` --- ## 3. Decoding JSX ### 3.1 Basic Syntax ```jsx const element =

Hello, world!

; ``` ### 3.2 Embedding Expressions ```jsx const name = "John"; const element =

Hello, {name}!

; ``` ### 3.3 Attributes & Props ```jsx const image = A beautiful scenery

; ``` ⚡ Note: Use **camelCase** for attributes (`className`, `onClick`). ### 3.4 Children & Self-Closing Tags ```jsx const element = (

Welcome

This is JSX

); const img = scenery

; ``` ### 3.5 Components & JSX ```jsx function Welcome({ name }) { return

Hello, {name}!

; } ``` --- ## 4. React Essentials CheatSheet ![React Hooks Cheatsheet](/images/react-hooks-cheatsheet.png) ### 4.1 Rendering in React 18+ ```jsx import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` ### 4.2 Props ```jsx function Welcome({ name }) { return

Hello, {name}!

; } ; ``` ### 4.3 State ```jsx import { useState } from "react"; function Clock() { const [date, setDate] = useState(new Date()); return

{date.toLocaleTimeString()}

; } ``` ### 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

{date.toLocaleTimeString()}

; } ``` ### 4.5 Conditional Rendering ```jsx function Greeting({ isLoggedIn }) { return isLoggedIn ?

Welcome back!

Please sign up.

; } ``` --- ## 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! ---

#cheatsheet

JSX و React: تعلم كيفية كتابة كود قابل للصيانة – دليل مختصر