A quick reference guide of React that provides a summary of key concepts, syntax, and patterns used in React development. This cheatsheet is intended for developers who are already familiar with JavaScript and want to quickly review the essential aspects of React.
- JSX Syntax: Describes the syntax for writing JSX (JavaScript XML), which is a syntax extension for JavaScript used in React.
- Components: Explains how to create and use functional components and class components in React.
- Props: Provides information on how to pass data between components using props.
- State: Describes how to manage local component state and when to use it.
- Lifecycle Methods: Summarizes the lifecycle methods available in functional components.
- Event Handling: Covers how to handle events in React components.
- Conditional Rendering: Explains how to conditionally render elements based on certain conditions.
- Lists and Keys: Discusses how to render lists and the importance of using keys for efficient updates.
- Forms: Provides guidance on handling forms in React.
- Hooks: Introduces React Hooks, such as useState and useEffect, for managing state and side effects in functional components.
- Context API: Explains how to use the Context API for managing global state.
- Routing: Includes information on client-side routing in React applications.
- State Management Libraries: Briefly introduces popular state management libraries like Redux, Zustand and MobX.
Table of contents
Open Table of contents
JSX Syntax
import React from "react";
// Functional component using JSX
const MyComponent = () => {
return (
<div>
<h1>Hello, React!</h1>
<p>This is a simple JSX element in a React component.</p>
</div>
);
};
export default MyComponent;Components
import React from "react";
import MyComponent from "./MyComponent";
const App = () => {
return (
<div>
<h1>My React App</h1>
<MyComponent />
</div>
);
};
export default App;Props
import React from "react";
// Functional component with JSX and props
const Greeting = props => {
return (
<div>
<h1>Hello, {props.name}!</h1>
<p>{props.message}</p>
</div>
);
};
// Example usage of the Greeting component
const App = () => {
return (
<div>
<Greeting name="John" message="Welcome to my React app!" />
<Greeting name="Alice" message="Have a great day!" />
</div>
);
};
export default App;State
import React, { useState } from "react";
const Counter = () => {
// useState hook to create a state variable 'count' with an initial value of 0
const [count, setCount] = useState(0);
// Event handler to increment the count
const increment = () => {
setCount(count + 1);
};
// Event handler to decrement the count
const decrement = () => {
setCount(count - 1);
};
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
};
export default Counter;Lifecycle Methods
import React, { useState, useEffect } from "react";
const FunctionalLifecycleExample = () => {
// useState to manage component state
const [count, setCount] = useState(0);
// useEffect to mimic componentDidMount and componentDidUpdate
useEffect(() => {
console.log("Component did mount or update");
return () => {
console.log("Component will unmount");
};
}, [count]); // Dependency array to control when useEffect is called
// Custom function to update count
const handleClick = () => {
setCount(prevCount => prevCount + 1);
};
console.log("Render method called");
// Render the component's UI
return (
<div>
<h1>Functional Lifecycle Example</h1>
<p>Count: {count}</p>
<button onClick={handleClick}>Increment Count</button>
</div>
);
};
export default FunctionalLifecycleExample;Event Handling
import React, { useState } from "react";
const EventHandlingExample = () => {
const [message, setMessage] = useState("");
const handleInputChange = event => {
setMessage(event.target.value);
};
const handleButtonClick = () => {
alert(`Message: ${message}`);
};
return (
<div>
<h1>Event Handling Example</h1>
<input type="text" onChange={handleInputChange} />
<button onClick={handleButtonClick}>Show Message</button>
</div>
);
};Conditional Rendering
import React, { useState } from "react";
const ConditionalRenderingExample = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const handleLogin = () => {
setIsLoggedIn(true);
};
const handleLogout = () => {
setIsLoggedIn(false);
};
return (
<div>
{isLoggedIn ? (
<div>
<h1>Welcome, User!</h1>
<button onClick={handleLogout}>Logout</button>
</div>
) : (
<div>
<h1>Please log in</h1>
<button onClick={handleLogin}>Login</button>
</div>
)}
</div>
);
};Lists and Keys
import React from "react";
const ListExample = () => {
const items = ["Apple", "Banana", "Cherry", "Date"];
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
};Forms
import React, { useState } from "react";
const FormExample = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const handleNameChange = event => {
setName(event.target.value);
};
const handleEmailChange = event => {
setEmail(event.target.value);
};
const handleSubmit = event => {
event.preventDefault();
alert(`Name: ${name}, Email: ${email}`);
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Name:</label>
<input type="text" value={name} onChange={handleNameChange} />
</div>
<div>
<label>Email:</label>
<input type="email" value={email} onChange={handleEmailChange} />
</div>
<button type="submit">Submit</button>
</form>
);
};Available on latest canary
export default function Search() {
function search(formData) {
const query = formData.get("query");
alert(`You searched for '${query}'`);
}
return (
<form action={search}>
<input name="query" />
<button type="submit">Search</button>
</form>
);
}Hooks
import React, { useState, useEffect } from "react";
const Counter = () => {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
};Context API
import React, { createContext, useContext, useState } from "react";
// Create a context to store the user's authentication status
const AuthContext = createContext();
// Provider component to wrap the app and provide the context value
const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
const login = username => {
setUser(username);
};
const logout = () => {
setUser(null);
};
return (
<AuthContext.Provider value={{ user, login, logout }}>
{children}
</AuthContext.Provider>
);
};
// Custom hook to access the context value
const useAuth = () => {
return useContext(AuthContext);
};
export { AuthProvider, useAuth };Routing
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const App = () => {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</div>
</Router>
);
};
export default App;State Management Libraries
MobX: A simple, scalable state management library that makes it easy to manage the state of your React application. It uses observables to automatically track and update state changes.
Recoil: A state management library for React that is designed to be flexible and scalable. It introduces atoms, selectors, and a React hook API for managing state in a more intuitive way.
Zustand: A small, fast, and lightweight state management library. It uses a hook-based API and is designed to be easy to use with minimal boilerplate.
XState: While originally designed for finite state machines, XState can also be used for more general state management. It’s particularly powerful for managing complex UI behavior and asynchronous workflows.
Valtio: A proxy-state library for React. It’s designed to provide reactivity with minimal boilerplate and integrates well with React’s functional components.
React Query: While primarily focused on data fetching and caching, React Query can also be used for managing UI-related state in React applications. It excels in handling asynchronous data and side effects.
Jotai: A primitive and flexible state management library for React. It uses atoms and a custom hook-based API to provide a simple and scalable solution for managing state.
Redux: A predictable state container for JavaScript apps. It helps manage the state of your application in a single store and provides a predictable way to update and access that state.