Frontend

In React you write components: functions that take inputs (props) and return what should appear on screen, usually in JSX, an HTML-like syntax inside JavaScript. When data changes, React re-runs the affected components and updates only the parts of the page that actually changed. Hooks such as useState and useEffect give components memory and side effects.

React itself only draws the interface. Routing, data loading and server rendering come from a framework on top, such as Next.js or React Router, or from separate libraries. Recent versions added Server Components, which run only on the server, and the React Compiler, which handles much of the performance tuning that used to be done by hand. The same component model powers React Native for iOS and Android.

Meta created React and released it as open source in 2013. In 2026 it handed React, React Native and JSX to the React Foundation, hosted by the Linux Foundation, so the project no longer belongs to a single company.

Vue components are usually written as single-file components: one .vue file holding the template (HTML), the script and the styles. Its reactivity system tracks which data each part of the page uses, so when a value changes only the dependent parts update. The Composition API (with ref and computed) is the modern way to write logic, while the older Options API still works.

Vue was created by Evan You and is run as an independent, sponsor-funded project rather than by a big company. The official pieces cover most needs: Vue Router for pages, Pinia for shared state, and Nuxt for server rendering. It can also be dropped into an existing page with a script tag, which makes it popular for modernising older server-rendered sites one piece at a time.

Angular apps are written in TypeScript and built from components, each with a template, a class and styles. Unlike React or Vue, it ships nearly everything in one box: a router, forms, an HTTP client, dependency injection and the Angular CLI, which generates code and runs builds and tests. That shared structure makes one Angular codebase look much like another.

Google releases a new major version roughly every six months. Recent versions moved to standalone components, a built-in control-flow syntax and signals, a simpler way to track changing values, and new apps no longer need the older Zone.js change detection. Angular is a full rewrite of AngularJS (version 1), which is no longer supported.

Most frameworks ship a runtime that works out what changed on the page while the app runs. Svelte does that work in its compiler instead: it turns .svelte files into code that updates exactly the parts of the page that depend on a value. Svelte 5 introduced runes, explicit markers such as $state, $derived and $effect, which make reactivity clearer and also work outside components.

SvelteKit is the official app framework: file-based routing, server-side rendering, static pages, form actions and adapters for hosts such as Vercel, Netlify, Cloudflare and Node.js. Svelte was created by Rich Harris and is developed in the open by a core team and community.

Next.js decides where and when each page is built: ahead of time at build, on the server for every request, or refreshed in the background (ISR). Its App Router, based on folders in the app directory, uses React Server Components by default, so data can be fetched on the server and less JavaScript reaches the browser. Route handlers and server functions let the same project handle forms, APIs and webhooks.

It also bundles image optimisation, font loading, SEO metadata and Turbopack, a Rust-based bundler that is the default in recent versions. The older Pages Router is still supported for existing apps. Next.js is open source and runs on any Node.js server or in Docker, but some features work most smoothly on Vercel, the company that makes it, which is worth weighing if you plan to host elsewhere.

A Nuxt project maps files in a pages folder to URLs, auto-imports components and helpers, and renders each route on the server, at build time or in the browser, as configured. Its server engine, Nitro, runs API routes and deploys the same app to Node.js, serverless platforms or edge networks through presets.

A large module ecosystem adds content sites, images, authentication, SEO and UI kits such as Nuxt UI. NuxtLabs, the company behind it, joined Vercel in 2025; Nuxt and Nitro stayed MIT-licensed and host-neutral, and several previously paid add-ons became free.

Astro renders pages to HTML at build time or on the server, and ships no JavaScript unless a component asks for it. Interactive parts become islands: a React, Vue, Svelte or Solid component marked with a directive such as client:visible loads on its own, while the rest of the page stays static. Content collections give Markdown and MDX files typed, validated front matter.

It suits sites where reading matters more than app-like interaction, and sending less JavaScript helps Core Web Vitals. Server islands and on-demand rendering cover personalised parts. The team behind Astro joined Cloudflare in 2026; the framework stays MIT-licensed and deploys to most hosts.

React Router maps URLs to components and handles links, nested layouts and the back button without full page reloads. It can be used in three ways: as a plain router inside a single-page app, with data loaders and actions attached to each route, or as a full framework with server rendering and a Vite plugin.

Remix began as a framework built on top of React Router. Its own layer grew so thin that its features were merged into React Router 7 as framework mode, and Remix apps upgrade to it. The Remix name now belongs to Remix 3, a separate project that does not use React. React Router apps deploy to Node.js, Cloudflare Workers, Vercel, Netlify and other hosts through adapters.

During development Vite serves your source files to the browser as native ES modules and transforms each one only when it is requested, so even large projects start quickly, and hot module replacement updates the page without losing its state. For production it bundles, minifies and splits the code into small files. Vite 8 replaced its two engines (esbuild and Rollup) with Rolldown, a single bundler written in Rust.

Vite works with React, Vue, Svelte, Solid, Preact and plain TypeScript, and it sits underneath many frameworks, including Nuxt, SvelteKit, Astro and React Router. Since Create React App was deprecated, it is the usual way to start a plain React single-page app. Vitest, a test runner built on it, reuses the same configuration.

Create React App hid webpack, Babel, ESLint and Jest behind a single package (react-scripts), so a beginner could run one command and start writing components without touching any configuration. For years it was the default way to learn React and start a project.

It fell behind: slow start-up and rebuilds, no server rendering, and few updates after 2022. In February 2025 the React team officially deprecated it and pointed people to frameworks such as Next.js and React Router, or to build tools such as Vite. Existing apps keep working, and moving one to Vite is usually a matter of a few configuration changes and relocating index.html.

A modern app is written as hundreds of small modules plus packages from npm. A bundler follows every import from an entry file, combines what is needed, removes unused code (tree shaking), minifies it and splits it into chunks that load on demand. It also handles CSS, images and TypeScript along the way.

webpack defined the category and is still found in many older projects. Newer tools written in faster languages have taken over most new work: esbuild (Go), Rolldown (a Rust bundler compatible with Rollup, which now powers Vite), Turbopack (Next.js) and Rspack, a webpack-compatible bundler in Rust. Most developers meet a bundler through a framework or Vite rather than configuring one by hand.

Browsers do not understand TypeScript or JSX, and older ones miss newer syntax. A transpiler parses the source, transforms it and prints ordinary JavaScript, usually with a source map so that errors point back at the original code. Babel, around since 2014, did this for most of the JavaScript world and has a huge plugin system.

SWC (Speedy Web Compiler) is written in Rust and is many times faster, so Next.js, Deno and Rspack build on it. esbuild and Oxc play a similar role elsewhere. Babel is still common where a particular plugin is needed; the React Compiler, for example, ships as a Babel plugin.

Each Tailwind class does one thing: flex, mt-2, bg-white, md:grid-cols-3. Combining them in markup builds any design, and prefixes handle hover states, dark mode and screen sizes. At build time Tailwind scans your files and generates CSS only for the classes you actually used, so the final stylesheet stays small.

Version 4 moved configuration into the CSS file itself (theme values live in an @theme block) and rebuilt the engine for speed. Long class lists are the usual complaint; components, plus helpers such as clsx and tailwind-merge, keep them manageable. In 2026 Tailwind Labs joined Shopify. The framework stays MIT-licensed, while its paid Tailwind Plus kit of components and templates closed to new customers.

Instead of adding a dependency, you run the shadcn CLI and it writes each component's source file into your project. The components are styled with Tailwind CSS and built on accessible headless primitives, so keyboard use, focus handling and screen-reader labels are taken care of. Because the code is yours, changing a variant or restyling a dialog is an ordinary edit.

shadcn/ui launched on Radix UI in 2023. It later added Base UI, a newer headless library from some of the people who created Radix, and made it the default for new projects in 2026, while Radix stays fully supported. Registries let other teams publish components that install the same way, and AI coding tools often generate shadcn-style code, which has made it a common starting point for React apps.

Radix Primitives are headless: each component ships the tricky parts (focus trapping, keyboard navigation, ARIA attributes, positioning of popovers) but no visual style. You compose them from parts such as Dialog.Trigger and Dialog.Content and style them with Tailwind, CSS Modules or any other approach. Radix Themes is a separate, pre-styled library built on top.

Radix is open source and maintained by WorkOS. It became widely known as the layer underneath shadcn/ui. Some of its original authors now build Base UI, a similar headless library that shadcn/ui made its default for new projects in 2026, so it is worth comparing the two, along with React Aria, when starting fresh.

State is any data that can change while the app runs. Some belongs to one component (whether a menu is open), some is shared across screens (the signed-in user, a basket), some really lives on a server and is only cached in the browser (a list of orders), and some belongs in the URL (search filters). Mixing these up is a common source of bugs.

Frameworks provide local state (useState in React, ref in Vue, signals in Angular and Svelte runes). For shared state, React apps use context or a store library such as Zustand or Redux; Vue has Pinia; Angular has services and NgRx. For server data, a caching library such as TanStack Query usually replaces most hand-written global state.

You call create() with the starting values and the functions that change them, and get back a hook. Any component can call that hook and pick just the slice it needs, so it re-renders only when that slice changes. There is no provider to wrap the app in and very little boilerplate.

Middleware adds saving to localStorage (persist), Redux DevTools support and Immer-style updates. Zustand comes from the Poimandres collective (pmndrs), which also makes Jotai and React Three Fiber. It suits client state such as settings, carts and UI toggles; data fetched from a server is usually better handled by TanStack Query.

In Redux the whole shared state lives in one store. Components dispatch actions such as 'cart/itemAdded', and reducer functions compute the next state from the current one without modifying it in place. Because every change goes through that single path, Redux DevTools can list each action and even step back through them (time-travel debugging).

Early Redux was known for boilerplate. Redux Toolkit is now the official way to write it: createSlice generates actions and reducers together, Immer allows simple-looking updates, and RTK Query adds data fetching and caching. Redux works with any UI library but is mostly used with React through react-redux.

You describe a query with a key, such as ['orders', userId], and a function that fetches it. TanStack Query caches the result under that key, shares it with every component that asks, refetches in the background when data goes stale or the window regains focus, retries failures and exposes loading and error states. Mutations change data on the server and can update the screen optimistically before the reply arrives.

It started as React Query and now has adapters for Vue, Svelte, Solid and Angular. It handles server state, not client state, so apps often pair it with a small store such as Zustand for the rest. SWR from Vercel is a lighter alternative, and RTK Query covers the same ground for Redux users.

React Hook Form leans on uncontrolled inputs: register() connects each field to the form through a ref and the browser holds the value, so typing in one field does not re-render the whole form. useForm returns helpers for submission, errors, dirty and touched fields, and useFieldArray handles repeating rows.

Validation can use built-in rules (required, minLength, pattern) or a schema library such as Zod through a resolver, so one schema both types the data and checks it. For controlled inputs, such as date pickers from a UI kit, a Controller component bridges the gap. shadcn/ui documents ready-made form patterns for it.

You define a schema such as z.object({ name: z.string(), age: z.number().min(18) }) and call parse or safeParse on incoming data. Zod returns the checked data or a list of clear errors, and z.infer turns the same schema into a TypeScript type, so the type and the runtime check never drift apart.

It runs in browsers and on servers alike: checking form input with React Hook Form, request bodies in API routes, environment variables at start-up and structured output from AI models. Version 4 made it faster and smaller and added JSON Schema conversion. Libraries that follow the Standard Schema spec accept Zod, Valibot or ArkType interchangeably.

You swap a div for motion.div and describe states: initial, animate and exit values, plus a transition such as a spring. Motion handles the rest, including gestures (hover, tap, drag), scroll-linked effects and layout animations that smoothly move elements when the page rearranges. AnimatePresence animates components as they leave the page.

Created at Framer, the library became independent in late 2024 and was renamed Motion; new code imports from motion/react, and it also works with plain JavaScript and Vue. It uses the browser's hardware-accelerated animation engine where it can. The library is MIT-licensed; Motion+ is an optional paid pack of premium components and examples.

GSAP animates any numeric property: CSS, SVG, canvas objects or values in a WebGL scene. A tween moves one thing from A to B, and a timeline sequences many tweens with precise timing, so a whole intro can be paused, reversed or scrubbed. Plugins add scroll-driven animation (ScrollTrigger), text splitting (SplitText), shape morphing (MorphSVG) and more.

It does not depend on any framework; React projects usually use the useGSAP hook from @gsap/react, which cleans animations up automatically. Webflow acquired GreenSock in 2024 and in 2025 made GSAP and every formerly paid plugin free, commercial use included. The licence is Webflow's own rather than an open-source one, and it forbids using GSAP inside no-code animation builders that compete with Webflow.

Responsive layouts use fluid grids (flexbox and CSS grid), images that scale, and media queries that change the layout at chosen widths called breakpoints. The viewport meta tag tells phones not to zoom out to a desktop-sized page. Mobile-first means writing the small-screen layout first and adding rules as space grows, which keeps the base CSS simple.

Newer tools make it more precise: container queries let a component adapt to the space it sits in rather than to the whole screen, clamp() scales text smoothly, and srcset serves smaller images to smaller screens. Touch targets need to be large enough for fingers. Google indexes the mobile version of pages, so a poor phone layout also hurts SEO.

Most of it comes from solid basics: real buttons and links instead of clickable divs, headings in order, a label on every form field, alternative text on meaningful images, enough colour contrast, visible focus outlines, and everything reachable by keyboard. ARIA attributes fill gaps for custom widgets, but used wrongly they make things worse, so native HTML elements come first.

The Web Content Accessibility Guidelines (WCAG) set the standard, with levels A, AA and AAA; most laws point at level AA. The European Accessibility Act has applied to many consumer products and services sold in the EU since June 2025. Automated checkers such as axe and Lighthouse catch only part of the problems, so testing with a keyboard and a screen reader (VoiceOver, NVDA, TalkBack) is part of the job.

An extension is a bundle of HTML, CSS and JavaScript described by a manifest.json file. Content scripts run inside the pages you visit and can read or change them, a background service worker reacts to browser events, and a popup, side panel or options page gives it a small interface. Each ability (tabs, storage, access to certain sites) must be declared as a permission.

Chrome, Edge, Firefox, Opera and Safari share the WebExtensions API, so one codebase can target all of them with small changes; Safari needs the extension wrapped in a Mac or iOS app with Xcode. Chrome requires Manifest V3, which replaced long-running background pages with service workers and limited how extensions can block network requests. Firefox supports Manifest V3 too but kept the older blocking API. Stores review each submission, and broad permissions such as reading every site draw closer scrutiny.