React Cheat Sheet
React fundamentals reference guide
React Cheat Sheet
Quick reference guide for React fundamentals and hooks. Click the copy button to copy any command.
96
Total Commands
96
Filtered Results
Components
| Command | Copy | Description |
|---|---|---|
function Component() { return <div>Hello</div> } | Function component | |
export default Component | Export component | |
import Component from "./Component" | Import component | |
<Component /> | Self-closing component | |
<Component>content</Component> | Component with children | |
const Component = () => <div>Hello</div> | Arrow function component |
JSX
| Command | Copy | Description |
|---|---|---|
<div className="class">text</div> | JSX element with class | |
<div style={{color: "red"}}>text</div> | Inline style | |
{variable} | JavaScript expression | |
{condition && <div>text</div>} | Conditional rendering | |
{condition ? <A /> : <B />} | Ternary operator | |
{items.map(item => <div key={item.id}>{item.name}</div>)} | Render list | |
<><div>1</div><div>2</div></> | Fragment shorthand | |
<React.Fragment></React.Fragment> | Fragment |
Props
| Command | Copy | Description |
|---|---|---|
function Component({ prop1, prop2 }) {} | Destructure props | |
props.propName | Access prop | |
<Component prop="value" /> | Pass prop | |
<Component {...props} /> | Spread props | |
Component.defaultProps = { prop: value } | Default props | |
children | Access children prop |
State - useState
| Command | Copy | Description |
|---|---|---|
import { useState } from "react" | Import useState | |
const [state, setState] = useState(initialValue) | Declare state | |
setState(newValue) | Update state | |
setState(prev => prev + 1) | Update based on previous | |
const [count, setCount] = useState(0) | Number state | |
const [text, setText] = useState("") | String state | |
const [items, setItems] = useState([]) | Array state | |
const [obj, setObj] = useState({}) | Object state |
Effects - useEffect
| Command | Copy | Description |
|---|---|---|
import { useEffect } from "react" | Import useEffect | |
useEffect(() => { }, []) | Run once on mount | |
useEffect(() => { }, [dependency]) | Run when dependency changes | |
useEffect(() => { return () => {} }, []) | Cleanup function | |
useEffect(() => { fetch(url) }, []) | Fetch data on mount |
Refs - useRef
| Command | Copy | Description |
|---|---|---|
import { useRef } from "react" | Import useRef | |
const ref = useRef(initialValue) | Create ref | |
ref.current | Access ref value | |
<div ref={ref}></div> | Attach ref to element | |
ref.current.focus() | Manipulate DOM element |
Context
| Command | Copy | Description |
|---|---|---|
import { createContext } from "react" | Import createContext | |
const MyContext = createContext() | Create context | |
<MyContext.Provider value={value}> | Context provider | |
import { useContext } from "react" | Import useContext | |
const value = useContext(MyContext) | Use context |
useReducer
| Command | Copy | Description |
|---|---|---|
import { useReducer } from "react" | Import useReducer | |
const [state, dispatch] = useReducer(reducer, initialState) | Use reducer | |
dispatch({ type: "ACTION", payload: data }) | Dispatch action | |
function reducer(state, action) { switch(action.type) {} } | Reducer function |
useCallback
| Command | Copy | Description |
|---|---|---|
import { useCallback } from "react" | Import useCallback | |
const callback = useCallback(() => {}, [deps]) | Memoize callback |
useMemo
| Command | Copy | Description |
|---|---|---|
import { useMemo } from "react" | Import useMemo | |
const value = useMemo(() => compute(), [deps]) | Memoize value |
Event Handling
| Command | Copy | Description |
|---|---|---|
onClick={handleClick} | Click event | |
onChange={handleChange} | Change event | |
onSubmit={handleSubmit} | Submit event | |
onClick={() => handleClick(arg)} | Event with argument | |
onClick={(e) => e.preventDefault()} | Prevent default |
Forms
| Command | Copy | Description |
|---|---|---|
<input value={value} onChange={e => setValue(e.target.value)} /> | Controlled input | |
<input type="text" name="name" /> | Text input | |
<input type="checkbox" checked={checked} /> | Checkbox | |
<select value={value} onChange={handleChange}> | Select dropdown | |
<textarea value={value} onChange={handleChange} /> | Textarea | |
e.target.value | Get input value |
Lifecycle (Class Components)
| Command | Copy | Description |
|---|---|---|
componentDidMount() | After first render | |
componentDidUpdate() | After update | |
componentWillUnmount() | Before unmount |
Conditional Rendering
| Command | Copy | Description |
|---|---|---|
if (condition) return <A /> | Early return | |
condition && <Component /> | AND operator | |
condition ? <A /> : <B /> | Ternary operator |
Lists and Keys
| Command | Copy | Description |
|---|---|---|
key={item.id} | Unique key for list items | |
{items.map((item, index) => <div key={index}>{item}</div>)} | Map over array |
Styling
| Command | Copy | Description |
|---|---|---|
className="class-name" | CSS class | |
style={{color: "red", fontSize: "16px"}} | Inline styles | |
import styles from "./Component.module.css" | CSS modules | |
className={styles.className} | Use CSS module class |
React Router
| Command | Copy | Description |
|---|---|---|
import { BrowserRouter, Route, Routes } from "react-router-dom" | Import Router | |
<Routes><Route path="/" element={<Home />} /></Routes> | Define routes | |
import { Link } from "react-router-dom" | Import Link | |
<Link to="/about">About</Link> | Navigation link | |
import { useNavigate } from "react-router-dom" | Import useNavigate | |
const navigate = useNavigate(); navigate("/path") | Programmatic navigation | |
import { useParams } from "react-router-dom" | Import useParams | |
const { id } = useParams() | Get URL params |
Performance
| Command | Copy | Description |
|---|---|---|
import { memo } from "react" | Import memo | |
export default memo(Component) | Memoize component | |
import { lazy, Suspense } from "react" | Import lazy loading | |
const Component = lazy(() => import("./Component")) | Lazy load component | |
<Suspense fallback={<Loading />}><Component /></Suspense> | Suspense wrapper |
Error Boundaries
| Command | Copy | Description |
|---|---|---|
componentDidCatch(error, info) | Catch errors | |
static getDerivedStateFromError(error) | Update state on error |
Portals
| Command | Copy | Description |
|---|---|---|
import { createPortal } from "react-dom" | Import createPortal | |
createPortal(children, domNode) | Render to different DOM node |
Custom Hooks
| Command | Copy | Description |
|---|---|---|
function useCustomHook() { return value } | Create custom hook | |
const value = useCustomHook() | Use custom hook |
Common Patterns
| Command | Copy | Description |
|---|---|---|
const [loading, setLoading] = useState(false) | Loading state | |
const [error, setError] = useState(null) | Error state | |
const [data, setData] = useState([]) | Data state |
All operations are performed locally in your browser. No data is sent to any server.
About React Cheat Sheet
This section will contain detailed, SEO-friendly content about the React Cheat Sheet.
In the future, this content will be managed through a headless CMS, allowing you to:
- Add detailed explanations about how to use this tool
- Include examples and use cases
- Provide tips and best practices
- Add FAQs and troubleshooting guides
- Update content without touching the code
How to Use
Step-by-step instructions for using the React Cheat Sheet will appear here. This content will be fully customizable through the admin panel.
Features
Key features and benefits of this tool will be listed here. All content is editable via the CMS.