React cheatsheet

Syntax snippets and quick notes for revision.

React Introduction

function LessonList() {
  const topics = ["React Introduction", "practice", "quiz"];
  return <ul>{topics.map((item) => <li key={item}>{item}</li>)}</ul>;
}

Use this react introduction pattern when a React task needs a small, readable starting point.

JSX

function LessonList() {
  const topics = ["JSX", "practice", "quiz"];
  return <ul>{topics.map((item) => <li key={item}>{item}</li>)}</ul>;
}

Use this jsx pattern when a React task needs a small, readable starting point.

Components

function StatCard({ label, value }) {
  return <section><strong>{value}</strong><span>{label}</span></section>;
}

export default function Dashboard() {
  return <StatCard label="Paid orders" value={24} />;
}

Use this components pattern when a React task needs a small, readable starting point.

Props

function StatCard({ label, value }) {
  return <section><strong>{value}</strong><span>{label}</span></section>;
}

export default function Dashboard() {
  return <StatCard label="Paid orders" value={24} />;
}

Use this props pattern when a React task needs a small, readable starting point.

State

import { useState } from "react";

export function SaveButton() {
  const [saved, setSaved] = useState(false);
  return <button onClick={() => setSaved(true)}>{saved ? "Saved" : "Save"}</button>;
}

Use this state pattern when a React task needs a small, readable starting point.

Events

import { useState } from "react";

export function SaveButton() {
  const [saved, setSaved] = useState(false);
  return <button onClick={() => setSaved(true)}>{saved ? "Saved" : "Save"}</button>;
}

Use this events pattern when a React task needs a small, readable starting point.

Lists

function LessonList() {
  const topics = ["Lists", "practice", "quiz"];
  return <ul>{topics.map((item) => <li key={item}>{item}</li>)}</ul>;
}

Use this lists pattern when a React task needs a small, readable starting point.

Conditional Rendering

function LessonList() {
  const topics = ["Conditional Rendering", "practice", "quiz"];
  return <ul>{topics.map((item) => <li key={item}>{item}</li>)}</ul>;
}

Use this conditional rendering pattern when a React task needs a small, readable starting point.

Forms

function LessonList() {
  const topics = ["Forms", "practice", "quiz"];
  return <ul>{topics.map((item) => <li key={item}>{item}</li>)}</ul>;
}

Use this forms pattern when a React task needs a small, readable starting point.

useEffect

import { useEffect, useState } from "react";

export function OrdersPanel() {
  const [orders, setOrders] = useState([]);
  useEffect(() => { fetch("/api/orders").then((res) => res.json()).then(setOrders); }, []);
  return <p>{orders.length} orders loaded</p>;
}

Use this useeffect pattern when a React task needs a small, readable starting point.

useRef

function LessonList() {
  const topics = ["useRef", "practice", "quiz"];
  return <ul>{topics.map((item) => <li key={item}>{item}</li>)}</ul>;
}

Use this useref pattern when a React task needs a small, readable starting point.

Custom Hooks

function LessonList() {
  const topics = ["Custom Hooks", "practice", "quiz"];
  return <ul>{topics.map((item) => <li key={item}>{item}</li>)}</ul>;
}

Use this custom hooks pattern when a React task needs a small, readable starting point.