TodayTools

React flashcards

Build interfaces from components: state, effects, forms with Actions, Server Components and the React Compiler.

Donate
Beginner friendly, starts from zero
Section
How to study
0
ReactStart from zero · 1 of 12

What is React, in one plain sentence?

React is a free JavaScript library for building the parts of a website that people click and type into, out of small reusable pieces.

React builds pages the way you build with LEGO: small bricks, big model.

All topics

React at a glance

React is a JavaScript library for building interactive web pages out of small reusable pieces called components.

Like LEGO: you build small bricks such as a button or a card once, then snap them together into a whole app.

Words you will meet

Component
One reusable piece of the screen, like a button or a card
JSX
HTML-like writing inside JavaScript that describes the screen
Props
The details you pass into a component
State
Data a component remembers that can change
Render
React drawing a component from its data
Hook
A special function starting with use that gives a component a power
DOM
The browser's live family tree of every part of the page
Event
Something the user does, like a click or typing

The steps

  1. 1. Start from zero (12 cards): What React is, why it exists, your first component, and the plain words the core basics use.
  2. 2. Core basics (16 cards): Components, JSX, props, state, events, lists and keys.
  3. 3. Next steps (16 cards): Effects and when not to use them, state updates, forms, refs, context, reducers and custom hooks.
  4. 4. Go deeper (17 cards): Rendering internals, React 19 Actions, Suspense, Server Components, concurrency, the compiler and Activity.
All 12 cards in Start from zero
What is React, in one plain sentence?
React is a free JavaScript library for building the parts of a website that people click and type into, out of small reusable pieces.
What was hard before React?
You wrote code to find each bit of the page and change it by hand. With many moving parts it got tangled, and one corner of the screen often showed an old number.
Where do you meet React in daily life?
Big social, shopping, video and chat websites use it, including Facebook, Instagram and WhatsApp on the web. Every time a like count or cart number updates at once, something like React is at work.
What is a component?
A component is one reusable piece of the screen, like a button, a product card or a whole menu. You design it once and use it many times with different details.
What are the UI, an element and the DOM?
The UI (user interface) is everything you see and use on screen. An element is one part, like a heading or a button. The DOM is the browser's live family tree of every element on the page.
What is JSX, and what does your first component look like?
This is a component: a function whose name starts with a capital letter. It returns JSX, HTML-like writing inside JavaScript. A build step turns JSX into plain JavaScript the browser runs.
What are props, and what are parent and child components?
Props are the details you pass into a component, like name="Naveen". A component placed inside another is its child; the outer one is the parent, and it sends the props down.
What are state and render?
State is data a component remembers that can change, like the number of likes. Render means React draws the component from its data; when state changes, it renders again, called a re-render.
What is a hook?
A hook is a special React function whose name starts with use, like useState. It gives a component a power, such as remembering state between renders.
What are an event and a handler?
An event is something the user does, like a click or typing. A handler is the function that runs when it happens. A function you pass to someone else to run later is called a callback.
What do you need before starting?
Basic JavaScript and HTML, a browser and a code editor. To make a project on your computer you also need Node, which brings npm, the tool that installs React.
What will you be able to do after this topic?
Build a page from components, pass data with props, make buttons that change state, show lists of items, and start a new React app the modern way.
React cheatsheet

State and effects

  • const [v, setV] = useState(init) Local state
  • setV((prev) => next) Update from latest value
  • useReducer(reducer, init) Complex related state
  • useEffect(() => { ...; return cleanup }, [deps]) Sync with outside systems
  • useEffectEvent(fn) Latest values, not a dependency (19.2)
  • useRef(null) DOM node or mutable box
  • useSyncExternalStore(sub, get) Read external stores safely

React 19 Actions

  • <form action={asyncFn}> Submit with pending and reset
  • useActionState(fn, init) [state, action, isPending]
  • useFormStatus() Parent form pending state
  • useOptimistic(state, update) Instant UI, auto rollback
  • startTransition(async () => {}) Non-urgent async update
  • use(promise) / use(Context) Read in render, may be conditional

Rendering control

  • key={item.id} Stable list identity
  • key={userId} on a component Reset its state
  • <Suspense fallback> Loading boundary
  • <Activity mode="hidden"> Hide but keep state (19.2)
  • useDeferredValue(v) Lagging copy for slow renders
  • lazy(() => import("./Chart")) Code-split a component
  • createPortal(node, el) Render outside the parent DOM

Server Components

  • async function Page() Server Component with await
  • "use client" Client boundary, top of file
  • "use server" Server Function, public endpoint
  • import "server-only" Build error if imported on client
  • props must be serialisable No functions from server to client

Tooling

  • npx create-next-app@latest Full-stack React app
  • npm create vite@latest -- --template react-ts Client-only app
  • npm i -D babel-plugin-react-compiler Automatic memoisation
  • npm i -D eslint-plugin-react-hooks Rules of hooks and compiler lints
  • npx react-scan Highlight slow renders live
Donate