Web Development

React Cheat Sheet (Basics to Advanced React JS Cheat Sheet)

Last Updated: 30th January, 2025

Jay Abhani

Senior Web Development Instructor at almaBetter

Master React with this ultimate React Cheat Sheet! Covering hooks, TypeScript, testing, syntax and more, it is perfect for beginners, pros, and interview prep

React is one of the most popular JavaScript libraries for building user interfaces. Whether you're just starting or preparing for an interview, this React cheat sheet covers all the essential concepts you need to know. From basic syntax to advanced hooks and TypeScript integration, this guide has got you covered.

What is React?

React is a JavaScript library for building fast, interactive user interfaces. It is component-based, declarative, and can manage complex state with ease. Here's why React is so widely adopted:

Virtual DOM: Efficient updates and rendering.
Reusable Components: Code reusability improves development speed.
Rich Ecosystem: Tools like React Router, Redux, and Next.js enhance functionality.

Setting Up a React Project

To create a React app, you can use Create React App or tools like Vite for a faster setup.

Using Create React App:

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

Using Vite:

npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev

Core Concepts

A. JSX

JSX is a syntax extension for JavaScript, allowing you to write HTML-like code inside JavaScript:

const App = () => <h1>Hello, React!</h1>;

B, Components

Components are reusable pieces of UI. They can be functional or class-based.

Functional Component:

function Greeting() {
return <h1>Hello, World!</h1>;
}

Class Component:

class Greeting extends React.Component {
render() {
return <h1>Hello, World!</h1>;
}
}

C, Props

Props allow components to receive data:

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

<Welcome name="React" />;

D. State

State is used to manage dynamic data:

function Counter() {
const [count, setCount] = React.useState(0);

return (
  <div>
  <p>Count: {count}</p>
  <button onClick={() => setCount(count + 1)}>Increment</button>
  </div>
);
}

React Hooks Cheat Sheet

React Hooks let you use state and lifecycle methods in functional components.

A. useState

Manage state in a functional component:

const [state, setState] = React.useState(initialValue);

B. useEffect

Run side effects in components:

React.useEffect(() => {
console.log('Component Mounted');
return () => console.log('Component Unmounted');
}, []);

C. useContext

Access context values:

const value = React.useContext(MyContext);

D. useReducer

Manage complex state logic:

const [state, dispatch] = React.useReducer(reducer, initialState);

E. useMemo & useCallback

Optimize performance:

const memoizedValue = React.useMemo(() => computeValue(a, b), [a, b]);
const memoizedCallback = React.useCallback(() => doSomething(a), [a]);

React Syntax Cheat Sheet

Here's a quick reference for essential React syntax:

Rendering a Component:

ReactDOM.render(<App />, document.getElementById('root'));

Conditional Rendering:

{isLoggedIn ? <LogoutButton /> : <LoginButton />}

Lists and Keys:

items.map(item => <li key={item.id}>{item.name}</li>);

Fragments:

<>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</>

React with TypeScript

TypeScript enhances React development with static typing.

Adding TypeScript to a React Project:

npx create-react-app my-app --template typescript

Common TypeScript Types in React:

type Props = {
name: string;
age?: number;
};

const Welcome: React.FC<Props> = ({ name, age }) => (
<h1>
Hello, {name}! {age && `You are ${age} years old.`}
</h1>
);

React Query Cheat Sheet

React Query simplifies data fetching, caching, and updating.

Installation:

npm install react-query

Example:

import { useQuery } from 'react-query';

const { data, error, isLoading } = useQuery('todos', fetchTodos);

if (isLoading) return 'Loading...';
if (error) return 'Error!';

return <div>{data.map(todo => <p key={todo.id}>{todo.text}</p>)}</div>;

React Testing Library Cheat Sheet

React Testing Library helps test components effectively.

Installation:

npm install @testing-library/react

Example Test:

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders Hello, React!', () => {
render(<App />);
expect(screen.getByText(/Hello, React!/i)).toBeInTheDocument();
});

React Native Cheat Sheet

React Native enables building mobile apps using React.

Installation:

npx react-native init MyApp

Core Components:

View: Container for layout.
Text: Displays text.
Button: Interactive button.

Example:

import { View, Text, Button } from 'react-native';

export default function App() {
return (
  <View>
  <Text>Hello, React Native!</Text>
  <Button title="Click Me" onPress={() => alert('Hello!')} />
  </View>
);
}

React Cheat Sheet for Interviews

Key topics to prepare for React interviews:

React Lifecycle Methods: Understand methods like componentDidMount, shouldComponentUpdate, and hooks like useEffect.
State Management: Be familiar with context API, Redux, or React Query.
Performance Optimization: Know about memoization (React.memo, useMemo, useCallback).
React Router: Basics of routing using react-router-dom.

Example Interview Question:

What are the differences between useEffect and componentDidMount?

Conclusion

This React cheat sheet provides a comprehensive guide for mastering React, from basic syntax to advanced topics like hooks, testing, and TypeScript. Use it as a quick reference while coding or preparing for an interview. Whether you're a beginner or a seasoned developer, React's ecosystem has tools to make your life easier.

More Cheat Sheets and Top Picks