React Js Cheatsheet

React.js — Beginner Cheat Sheet

1. What Is React?

React is a JavaScript library for building user interfaces, mainly used for single-page applications (SPA).

React works by updating only the parts of the UI that change, making apps fast and efficient.

2. Why React?

React is popular because:

  • Component-based architecture

  • Fast rendering using Virtual DOM

  • Huge ecosystem

  • Easy to reuse UI pieces

Used by startups and enterprises.

3. Creating a React App

npx create-react-app myApp
cd myApp
npm start

This creates a ready React project with build tools configured.

4. Project Structure

src/
  App.js
  index.js
  components/
public/

  • index.js → entry point

  • App.js → root component

  • components → reusable UI parts

5. JSX

JSX lets you write HTML inside JavaScript.

const el = <h1>Hello</h1>;

JSX makes UI code readable.

6. Components

Components are reusable UI blocks.

Functional Component

function App(){
 return <h1>Hello</h1>
}

Most modern React uses functional components.

7. Rendering Component

root.render(<App />);

This mounts your component to the browser.

8. Props

Props pass data from parent to child.

function User({name}){}

Props are read-only.

9. State

State stores component data that can change.

const [count,setCount] = useState(0);

Changing state re-renders UI.

10. useState Hook

import {useState} from "react";

Used to manage local component data.

11. Event Handling

<button onClick={handleClick}>

Used to respond to user actions.

12. Conditional Rendering

{loggedIn && <Dashboard />}

Shows UI based on condition.

13. Lists Rendering

items.map(i => <p>{i}</p>)

Used to display arrays.

Always add key.

14. Key Attribute

<li key={id}>

Helps React track elements efficiently.

15. Inline Styling

style={{color:"red"}}

Styles applied directly to elements.

16. CSS in React

  • Normal CSS

  • CSS Modules

  • Inline styles

Used for design.

17. Fragments

Avoid extra divs.

<>
 <h1/>
</>

Keeps DOM clean.

18. useEffect Hook

useEffect(()=>{},[])

Runs side effects like API calls.

19. Dependency Array

Controls when useEffect runs.

Empty array = run once.

20. Forms

<input value={name} onChange={e=>setName(e.target.value)} />

Used for controlled inputs.

21. Controlled Components

React controls input values using state.

Preferred approach.

22. Lifting State Up

Move state to parent so children can share data.

Used for coordination.

23. Props Drilling

Passing props through many components.

Avoid with Context.

24. useContext

const data = useContext(MyContext);

Shares data globally.

25. Context API

Avoids prop drilling.

Used for themes, auth, user info.

26. useRef

Access DOM directly.

const ref = useRef();

Used for focus and mutable values.

27. useMemo

Optimizes expensive calculations.

useMemo(()=>{},[])

28. useCallback

Prevents unnecessary re-renders.

useCallback(()=>{},[])

29. Custom Hooks

Create reusable logic.

function useFetch(){}

30. Component Lifecycle (Hooks)

mount → update → unmount

Handled via useEffect.

API Integration

31. Fetch API

fetch(url)

Used to call backend APIs.

32. Axios

axios.get()

Popular HTTP client.

33. Loading & Error State

Always handle:

  • loading

  • success

  • error

Important for UX.

Routing

34. React Router

Used for navigation.

<Route path="/home" />

Creates SPA routes.

35. useParams

Reads URL parameters.

36. useNavigate

Programmatic navigation.

Component Design

37. Presentational vs Container

UI vs Logic separation.

Improves maintainability.

38. Folder Structure (Real Projects)

components/
pages/
services/
hooks/
utils/

Keeps code organized.

Error Handling

39. Error Boundary

Catches UI crashes.

Used in production apps.

State Management

40. Redux

Global state management.

Used for large apps.

41. Redux Toolkit

Modern Redux approach.

Simpler API.

42. Zustand / Context

Lightweight alternatives.

Testing

43. Jest

Unit testing.

44. React Testing Library

Component testing.

Performance

45. Lazy Loading

React.lazy()

Loads components on demand.

46. Code Splitting

Reduces bundle size.

Improves speed.

47. Memo

Prevents unnecessary renders.

Authentication

48. JWT Auth

Token-based login.

Common in MERN apps.

49. Protected Routes

Restrict access.

Build & Deployment

50. Production Build

npm run build

Creates optimized bundle.

51. Deployment

Vercel  
Netlify  
Docker  
Nginx  
Cloud

Moves app to live server.

Advanced React

52. Server Components

Used in Next.js.

53. SSR / SSG

Server Side Rendering / Static Generation.

Improves SEO.

54. Next.js

Full React framework.

Routing + SSR built in.

Scroll to Top