Frontend

React

A library for building interfaces from components: UI as a function of state.

Official siteRepository

What it is

React was created at Facebook (now Meta) and open sourced in 2013. The UI is built from components: functions that take props and return markup (JSX).

The key idea: you describe what the UI looks like for the current state, and React updates the DOM by diffing the new tree against the previous one (reconciliation). State and side effects in components work through hooks (useState, useEffect).

React is only the view layer: routing, data and builds come from the ecosystem. The most common framework around React is Next.js, and React Native covers mobile apps.

Use it when

  • A complex interactive interface with lots of state.
  • You want the largest library ecosystem and the biggest frontend job market.
  • You want to share knowledge between web (React) and mobile (React Native).
  • A team project where the component approach helps reuse.

Avoid it when

  • A simple content site: static generation or Astro ships less JS.
  • The team wants a batteries-included solution without picking libraries: look at Angular or Vue.

Key concepts

Component and props
A function that returns UI. Props pass data from parent to child.
State and hooks
useState holds local state, useEffect syncs with the outside world, useMemo and useCallback cache.
Virtual DOM / reconciliation
React compares the new element tree with the previous one and applies minimal changes to the DOM.
Keys
Stable identifiers of list items that React uses to match them between renders.
Server Components
Components that run on the server and add no JS to the browser (in the Next.js App Router).

Example

A counter component with state.

Cheat sheet

React cheat sheet
Command or codeWhat it does
npm create vite@latest app -- --template react-tsNew React project with TypeScript
const [n, setN] = useState(0)Local state
setN(prev => prev + 1)Update state from the previous value
useEffect(() => { ... }, [dep])Side effect that depends on dep
useRef(null)Reference to a DOM node or a mutable value
useMemo(() => calc(a), [a])Caches a computation between renders
useCallback(fn, [dep])Stable function reference
{items.map(i => <li key={i.id}>{i.name}</li>)}List rendering with a key
<Ctx.Provider value={v}>Passes a value through context
export default function Card({ title }) { }Component with props

How to learn it

  1. First take the JavaScript course, especially arrays, destructuring and async.
  2. Take the React course on ShortLesson and build your first component.
  3. Learn props, state with useState and conditional list rendering.
  4. Study useEffect, when you need it and when you do not.
  5. Learn to extract logic into custom hooks and to work with forms.
  6. Add routing and API requests, for example with TanStack Query.
  7. Build a small app with Vite and TypeScript.
  8. Move to Next.js when you need SSR and file based routing.

Interview questions

  1. 1. Why are keys needed in lists?

    A key helps React match items between renders so it can add, remove and reorder them correctly without losing state. The key should be a stable id, not an array index, when the list changes.

  2. 2. How does useEffect differ from an event handler?

    A handler responds to a user action. useEffect runs after render to sync the component with an external system (request, subscription, timer). Cleanup is returned from the effect.

  3. 3. What is a controlled component?

    A form field whose value comes from React state through value and changes through onChange. State is then the single source of truth.

  4. 4. When does a component re-render?

    When its state or props change, or its parent re-renders. For optimization use React.memo and useMemo, but measure first.

Interview questions from the bank

Comparisons with this technology

Related technologies

Logos belong to their owners and are used for identification only. Icons: Simple Icons (CC0), Devicon (MIT).

Explore the platform