React, Vue and Svelte: three approaches to frontend JavaScript

React is a library that runs in the browser. Vue is a framework with a runtime. Svelte is a compiler that converts components into efficient JavaScript code during the build process without runtime overhead. This fundamental difference determines how each technology performs and how you work with it.

2. Know the core architecture of React.

React introduced the Virtual DOM on May 29, 2013: an in-memory representation of the real DOM. When application data changes, React calculates the difference between the previous and new virtual representation and updates only the parts that actually changed. React focuses solely on the view layer — developers choose additional libraries for state management and routing themselves.

// React 18 component with hooks
   import React, { useState } from 'react';</p><p>function Counter() {
     const [count, setCount] = useState(0);
     return (
       <button onClick={() => setCount(count + 1)}>
         Clicked: {count} times
       </button>
     );
   }

3. Understand how Vue works.

Vue was announced on February 3, 2014, by Evan You, who previously worked with AngularJS at Google. The GitHub repository dates from July 29, 2013. Vue combines a template system close to HTML with support for JSX and component-based development. It offers gradual adoption: you start with a script tag and scale up to large applications with Vue Router and Pinia for state management.

<script setup>
   import { ref } from 'vue';
   const count = ref(0);
   </script></p><p><template>
     <button @click="count++">
       Clicked: {{ count }} times
     </button>
   </template>

4. Study Svelte's compiler approach.

Svelte appeared on November 29, 2016, created by Rich Harris, who previously developed Ractive.js. Instead of a Virtual DOM, Svelte uses a compiler that converts components into direct DOM manipulation during the build process. This eliminates runtime overhead and results in faster initial loading times and smaller bundles. Svelte 3 introduced the `$:` label for declarative reactivity on April 21, 2019.

<script>
     let count = 0;
     $: doubled = count * 2;
   </script></p><p><button on:click={() => count++}>
     Clicked: {count} times (doubled: {doubled})
   </button>

5. Compare the version history.

Svelte 2 appeared on April 19, 2018, with improved reactivity. Svelte 3 followed on April 21, 2019, with a new component syntax and the `$:` label. In October 2020, Harris announced SvelteKit — a framework comparable to Next.js for React or Nuxt.js for Vue. SvelteKit went into beta in March 2021 and offers server-side rendering (SSR), static site generation (SSG), and client-side routing with adapters for Vercel, Netlify, and Node.js servers.

6. Choose based on project context.

React has the largest community and the most external support thanks to Meta. Vue offers a gentle learning curve and a lot of functionality out-of-the-box — it is widely used in China and at medium-sized companies. Svelte attracts developers who want less boilerplate code and find performance or small bundle size critical. The choice depends on team experience, performance requirements, and design patterns.

7. Use Vite for project setup.

Vite supports out-of-the-box templates for React, Vue, and Svelte in JavaScript and TypeScript. This eliminates the need to manually configure complex bundlers like Webpack.

<h2>Set up a React project with Vite 5</h2>
   npm create vite@latest my-react-app -- --template react</p><h2>Set up a Vue project</h2>
   npm create vite@latest my-vue-app -- --template vue<h2>Set up a Svelte project</h2>
   npm create vite@latest my-svelte-app -- --template svelte

8. Install dependencies and start the development server.

cd my-react-app
   npm install
   npm run dev

Verification

Check that your project runs correctly by opening the development server at `http://localhost:5173`. You should see the default Vite start page with the logo of the chosen framework. For a functional check:

<h2>Check that the server is running</h2>
curl http://localhost:5173

The output should contain HTML with the text "Vite + React", "Vite + Vue", or "Vite + Svelte", depending on the chosen template.

Common problems

1. `npm create vite@latest` gives an error about the Node.js version.

Vite 5 requires Node.js 18 or higher. Check your version with `node --version` and upgrade if necessary.

2. Port 5173 is already in use.

Vite automatically selects the next available port. You will see the correct address in the terminal output. Force a specific port with `npm run dev -- --port 3000`.

3. Svelte component gives a warning about `on:click`.

In Svelte 4, `on:click` is deprecated. Use `onclick` as the event attribute in Svelte 5, or upgrade to the latest version.

The choice between React, Vue, and Svelte is not a matter of which technology is "better" — it is a trade-off between a mature ecosystem with maximum flexibility, a balanced framework with a low entry threshold, or a compiler-based approach that minimizes runtime code. Each technology continues to evolve based on user feedback and changing web standards, and the arrival of tools like Vite has significantly lowered the entry threshold for all three. The next major shift in frontend development will likely not come from a new framework, but from how existing technologies adapt to WebAssembly, edge computing, and AI-generated interfaces.