React CheatSheet – A Quick Guide for Beginners & Developers

This is an Ultimate All-in-One React Master Cheatsheet — literally covering everything a React developer would need from beginner to advance: CRA, Vite, components, hooks, routing, forms, state management, context, TypeScript, Redux, performance optimization, lazy loading, error boundaries, portals, testing, animations, SSR concepts, advanced patterns, and more.

Content Table

• 1. Project Setup
  • Create React App (CRA)
  • Vite
• 2. File Structure
• 3. Components
• 4. JSX Basics
• 5. Lifecycle & useEffect
• 6. Event Handling
• 7. Forms
• 8. Conditional Rendering & Lists
• 9. Context API
• 10. React Router v6
• 11. Data Fetching
• 12. Hooks Overview
• 13. Custom Hooks
• 14. Performance Optimization
• 15. Error Boundaries
• 16. Portals
• 17. TypeScript
• 18. Redux
• 19. Advanced Patterns
• 20. Animations
• 21. Testing
• 22. SSR & Next.js Concepts
• 23. Quick Tips
  • Setup & Project
  • Components
  • JSX
  • Lifecycle & Side Effects
  • Event Handling
  • Routing
  • State Management
  • Hooks
  • Data Fetching
  • Performance
  • Advanced Features
  • Quick Tips

1. Project Setup

Create React App (CRA)

npx create-react-app my-app
cd my-app
npm start

This one (CRA) has deprecated now so I would recommend you to go with Vite.

Vite

npm create vite@latest my-app
# Choose: React + JS or React + TS
cd my-app
npm install
npm run dev

Vite Advantages: fast HMR, lightweight, modern bundler.

2. File Structure

CRA

src/
 ├── App.js
 ├── index.js
 ├── components/
 └── assets/

Vite

src/
 ├── main.jsx
 ├── App.jsx
 ├── components/
 └── assets/
index.html
vite.config.js

3. Components

Functional Component

const Hello = ({ name }) => <h1>Hello, {name}!</h1>;

Class Component

class Hello extends React.Component {
  render() { return <h1>Hello, {this.props.name}</h1>; }
}

Arrow Function

const Hello = ({ name }) => <h1>Hello, {name}</h1>;

Props & State

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

4. JSX Basics

<div>
  <h1>Hello React!</h1>
  {isLoggedIn ? <Dashboard /> : <Login />}
  {items.map(item => <li key={item.id}>{item.name}</li>)}
</div>

Rules

• Use {} for JS expressions
• Use className instead of class
• Single root element or fragment <>...</>

5. Lifecycle & useEffect

useEffect(() => { console.log("Mounted"); return () => console.log("Unmounted"); }, []);
useEffect(() => { console.log("Dep changed"); }, [dep]);
useEffect(() => { console.log("Runs every render"); });

6. Event Handling

<button onClick={handleClick}>Click</button>
<input onChange={e => setValue(e.target.value)} />
<form onSubmit={handleSubmit}></form>

7. Forms

const [name, setName] = useState("");
<input value={name} onChange={e => setName(e.target.value)} />
<form onSubmit={e => { e.preventDefault(); alert(name); }}></form>

• Controlled Components: value linked to state
• Uncontrolled Components: use ref

8. Conditional Rendering & Lists

{isLoggedIn ? <Dashboard /> : <Login />}
<ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>

• Always use unique keys for lists.

9. Context API

import { createContext, useContext } from 'react';
const ThemeContext = createContext('light');

const App = () => <ThemeContext.Provider value="dark"><Toolbar/></ThemeContext.Provider>;
const Toolbar = () => <Button />;
const Button = () => {
  const theme = useContext(ThemeContext);
  return <button>{theme}</button>;
};

10. React Router v6

npm install react-router-dom

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

<BrowserRouter>
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
  </nav>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

11. Data Fetching

import { useEffect, useState } from 'react';
import axios from 'axios';

const DataFetcher = () => {
  const [data, setData] = useState([]);
  useEffect(() => { axios.get('/api').then(res => setData(res.data)); }, []);
  return <ul>{data.map(d => <li key={d.id}>{d.title}</li>)}</ul>;
}

12. Hooks Overview

13. Custom Hooks

function useFetch(url) {
  const [data, setData] = useState([]);
  useEffect(() => { fetch(url).then(res => res.json()).then(setData); }, [url]);
  return data;
}

14. Performance Optimization

• React.memo(Component)
• useMemo(() => value, [deps])
• useCallback(() => func, [deps])
• Lazy loading:

import { lazy, Suspense } from 'react';
const About = lazy(() => import('./About'));
<Suspense fallback={<div>Loading...</div>}><About /></Suspense>

15. Error Boundaries

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  componentDidCatch(error, info) { console.log(error, info); }
  render() { return this.state.hasError ? <h1>Error!</h1> : this.props.children; }
}

16. Portals

import { createPortal } from 'react-dom';
const Modal = ({ children }) => createPortal(<div>{children}</div>, document.getElementById('modal-root'));

17. TypeScript

type ButtonProps = { text: string; onClick: () => void };
const Button: React.FC<ButtonProps> = ({ text, onClick }) => <button onClick={onClick}>{text}</button>;

18. Redux

import { createStore } from 'redux';
const store = createStore((state={count:0}, action) => {
  switch(action.type){ case 'INC': return {count: state.count+1}; default: return state; }
});

import { Provider, useSelector, useDispatch } from 'react-redux';
<Provider store={store}><App /></Provider>

const count = useSelector(state => state.count);
const dispatch = useDispatch();
dispatch({type:'INC'});

19. Advanced Patterns

• Render Props

<DataProvider render={data => <Child data={data}/>} />

• Higher-Order Components (HOC)

const withAuth = Component => props => isLoggedIn ? <Component {...props}/> : <Login />;

• Compound Components

<Tabs><Tabs.List>...</Tabs.List><Tabs.Panel>...</Tabs.Panel></Tabs>

20. Animations

• Framer Motion

npm install framer-motion

import { motion } from 'framer-motion';
<motion.div animate={{ x: 100 }} transition={{ duration: 1 }}>Move</motion.div>

21. Testing

• Jest + React Testing Library

npm install --save-dev jest @testing-library/react

import { render, screen } from '@testing-library/react';
render(<Button text="Click"/>);
expect(screen.getByText("Click")).toBeInTheDocument();

22. SSR & Next.js Concepts

• React can be server-rendered using Next.js
• Supports getServerSideProps, getStaticProps
• Routing is file-based
• Supports API routes

23. Quick Tips

• Components start with uppercase
• Always cleanup effects
• Use unique keys for lists
• Prefer functional components + hooks
• Memoize expensive computations
• Keep state minimal

Here’s what it includes:

Setup & Project

• Create React App (CRA)
• Vite setup
• Dev server commands
• File structures (CRA & Vite)

Components

• Functional, class, arrow functions
• Props & state
• Controlled & uncontrolled forms

JSX

• Expressions, fragments, conditional rendering
• Lists with keys

Lifecycle & Side Effects

• useEffect (mount, update, cleanup)

Event Handling

• onClick, onChange, onSubmit

Routing

• React Router v6 (BrowserRouter, Routes, Route, Link)

State Management

• useState, useReducer
• Context API (useContext)
• Redux basics (store, actions, useSelector, useDispatch)

Hooks

• useState, useEffect, useContext, useReducer
• useRef, useMemo, useCallback, useLayoutEffect, useImperativeHandle, useDebugValue
• Custom hooks

Data Fetching

• fetch, axios

Performance

• Memoization (React.memo, useMemo, useCallback)
• Lazy loading + Suspense

Advanced Features

• Error boundaries
• Portals
• Advanced patterns (Render props, HOC, Compound components)
• Animations (Framer Motion)
• Testing (Jest + React Testing Library)
• TypeScript basics (props typing, functional components)
• SSR concepts (Next.js)

Quick Tips

• Use uppercase for components
• Always clean up effects
• Unique keys for lists
• Prefer functional components + hooks
• Keep state minimal
• Memoize expensive computations

What it doesn’t include in detail:

• Full Next.js tutorials or advanced SSR patterns
• Enterprise-scale architecture patterns
• Some niche animation libraries outside Framer Motion
• Full integration with other state management libraries (Zustand, Recoil, MobX)

But for practical React development, full-stack apps, and advanced features, this cheatsheet is comprehensive and complete.

My Suggestions:

1. For a beginner → start with Vite + functional components + hooks.
2. Gradually learn Context & Redux for state management.
3. Optimize performance using memoization when needed, not everywhere.
4. Explore Next.js once comfortable with React for SSR.
5. Use this cheatsheet as a reference while building real projects, because hands-on practice solidifies everything.

Checkout My YouTube Channel

Checkout All CheatSheets

1. CSS Cheat Sheet

Personal Recommendation:

1. CSS CheatSheet
2. JavaScript CheatSheet
3. React CheatSheet
4. Python CheatSheet

Read my other Blogs

1. Top 5 Mistakes Beginners Make While Learning to Code (And How to Avoid Them)
2. Best Programming Languages to Learn in 2025 (and Why)
3. Before You Learn Web Development: The Advice No One Gave Me
4. How to Start Coding in 2025: Beginner’s Roadmap
5. Why Coding is Important: The Language of the Future
6. Are Coding and Programming the Same? – The Complete Truth You Need to Know
7. Will Coding Be Replaced by AI?
8. C++ Programming: Everything You Need to Know