Introduction to JavaScript Frameworks

A JavaScript framework keeps what is on screen in sync with your data. Without one you write code that finds elements and updates them by hand; with one you describe what the page should look like for a given state, and the framework works out what to change. That is the whole value proposition, and everything else follows from it.

The problem they solve#

Say you have a counter with a number, a progress bar and a message that changes at ten. Without a framework:

let count = 0;

function increment() {
  count++;
  document.querySelector("#count").textContent = count;
  document.querySelector("#bar").style.width = (count * 10) + "%";
  document.querySelector("#message").textContent =
    count >= 10 ? "Done" : "Keep going";
  document.querySelector("#reset").disabled = count === 0;
}

Four manual updates for one change. Add a fifth thing that depends on the count and you must remember to update it here too — and in every other function that changes the count. That is where the bugs come from.

With a framework you describe the relationship once:

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <div style={{ width: count * 10 + "%" }} />
      <p>{count >= 10 ? "Done" : "Keep going"}</p>
      <button disabled={count === 0}>Reset</button>
      <button onClick={() => setCount(count + 1)}>Add</button>
    </div>
  );
}

Change the count and everything that mentions it updates. You never write an update instruction.

The three shared ideas#

Every framework on this page uses the same three concepts under different names:

• Components — a reusable piece of interface with its own markup, logic and often styles. A button, a card, a whole page.
• State — data that belongs to a component and, when it changes, causes a re-render.
• Props — data passed into a component from its parent, which the component does not change itself.

Learn these once and moving between frameworks is mostly a matter of syntax.

The main options#

The same counter in each, so you can see the flavour:

// React
const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>{count}</button>

<!-- Vue -->
<script setup>
import { ref } from "vue";
const count = ref(0);
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

<!-- Svelte -->
<script>
  let count = 0;
</script>

<button on:click={() => count++}>{count}</button>

Do you need one?#

Probably not for a blog, a marketing site, a documentation site, a contact form, or a page with a handful of interactive bits. Plain JavaScript is smaller, faster to load and has nothing to keep updated.

Probably yes when several parts of the page depend on the same changing data, when you have real client-side state, when the same interface pieces repeat, or when a team needs shared conventions.

A useful test: count the places you would have to update by hand when one value changes. One or two, and a framework is overhead. Five or more, and it is earning its place.

Learn these first#

Frameworks are built on plain JavaScript, and skipping it makes them much harder, not easier. Be comfortable with:

• Arrays and objects, especially map, filter and spread
• Arrow functions and destructuring
• Modules — import and export
• Promises, async and await
• The DOM and events, so you know what the framework is doing for you

The most common cause of frustration with React is not React. It is not being fluent in map and immutable updates.

Starting a project#

npm create vite@latest my-app
# choose a framework when prompted

cd my-app
npm install
npm run dev

Vite works for React, Vue and Svelte and starts in seconds. Angular has its own tool:

npm install -g @angular/cli
ng new my-app

What comes after the framework#

A framework only handles rendering. Real applications also need:

• Routing — showing different views for different URLs
• Data fetching — loading, caching and refreshing server data
• Forms and validation
• Shared state across distant components

Vue and Angular provide official answers. React and Svelte leave you to choose, which is why “learning React” often turns into learning four libraries. Meta-frameworks — Next.js, Nuxt, SvelteKit — bundle these decisions together and add server-side rendering, which matters for search visibility.

Where to go next#

• JavaScript basics — the foundation to have first.
• Arrays and objects in JavaScript — the skills frameworks lean on most.
• Working with JavaScript libraries — npm and dependencies.