Frontend Dev Essentials – 80/20 Cheatsheet

1. React Basics

useState – Store & Update Values

Description: Creates a state variable in a component and provides a setter to update it, triggering a re-render.

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

useEffect – Side Effects

Description: Runs code after render. Useful for data fetching, timers, or interacting with the DOM.

useEffect(() => {
  console.log("Runs once on mount");
}, []);

Cleanup in useEffect

Description: Return a cleanup function to remove event listeners, clear timers, or reset resources.

useEffect(() => {
  const id = setInterval(() => console.log("tick"), 1000);
  return () => clearInterval(id);
}, []);

Mapping Lists

Description: Render arrays with map(). Always include a unique key.

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

2. Next.js Basics

Routing

Description: File-based routing — file and folder names define routes.

# Pages router
pages/index.js       → /
pages/about.js       → /about

# App router
app/page.tsx         → /
app/about/page.tsx   → /about

Environment Variables

Description: Store secrets/config in .env.local. NEXT_PUBLIC_ variables are exposed client-side.

# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com

Fetching in Server Component

Description: In the App Router, server components can fetch data directly without useEffect.

export default async function Page() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
  return <pre>{JSON.stringify(data)}</pre>;
}

3. API Requests

GET

Description: Retrieve data from the server.

const res = await fetch("/api/items");
const data = await res.json();

POST

Description: Send new data to the server.

await fetch("/api/items", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "New item" }),
});

DELETE

Description: Delete a resource by ID.

await fetch(`/api/items/${id}`, { method: "DELETE" });

4. CLI Commands

Common Git

Description: Manage code with Git: check status, stage, commit, and push changes.

git status
git add .
git commit -m "message"
git push origin main
git pull

Project Setup

Description: Create and run a new project.

npx create-next-app@latest myapp
npm run dev

Misc

Description: Handy development utilities.

npx kill-port 3000
npx prettier --write .

5. TypeScript Basics

Types for Variables

Description: Explicitly declare variable types for safety and autocompletion.

let age: number = 25;
let name: string = "Alex";
let tags: string[] = ["react", "ts"];

Function Types

Description: Define parameter and return types.

function add(a: number, b: number): number {
  return a + b;
}

Props

Description: Define prop types with type or interface.

type Props = { title: string; count?: number };
function Header({ title, count }: Props) {}

6. Framer Motion Basics

Animate In

Description: Animate between initial and target states.

import { motion } from "framer-motion";

<motion.div initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: 0.5 }}>
  Hello
</motion.div>

Animate on Hover

Description: Apply animations on hover.

<motion.button whileHover={{ scale: 1.1 }}>
  Click
</motion.button>

Variants

Description: Named sets of animation states for reuse.

const box = { hidden: { x: -100 }, visible: { x: 0 } };
<motion.div variants={box} initial="hidden" animate="visible" />

7. Beginner API Project Flow

Description: Quick plan to connect a Next.js app to a free API.

1. Pick a public API (e.g. https://api.quotable.io/random).
2. Create project: npx create-next-app my-api-test.
3. Fetch in a server component (simplest):

export default async function Page() {
  const res = await fetch("https://api.quotable.io/random");
  const data = await res.json();
  return <p>{data.content} — {data.author}</p>;
}

4. Test in browser — you should see API data on refresh.
5. Try a client fetch with button + useState/useEffect.