Do You Need React With Astro? When a Script Tag Is Enough

Many beginners think a modern site needs React. React is a tool for building the moving parts of a page. Astro is built so you don’t need it. This site has a search dialog, a dark-mode switch, copy buttons, a progress bar and a course tracker. It uses no UI framework at all. Here is how. And here is when you would want React anyway.

What a script tag gives you

An Astro component is one piece of a page. It can hold a <script> tag. That tag holds a small bit of JavaScript. JavaScript is the code that makes a page move. Astro bundles it, loads it once, and runs it in the browser. That is all you need for most small actions:

<button id="theme">Switch theme</button>

<script>
  const button = document.getElementById('theme');
  button?.addEventListener('click', () => {
    document.documentElement.classList.toggle('dark');
  });
</script>

This is plain JavaScript. It works with the HTML Astro already made. HTML is the words and layout of a page. There is no framework to download. There is no component to wake up.

What it costs

We tested this. One React island brought about 207 KB of React runtime into the page before compression. An island is one small live part of a page. The runtime is React’s own code. A script tag like the one above is a few hundred bytes.

That is not a reason to skip React. It is a reason to use it only where it earns its cost.

Use a script tag when

• One thing responds to a click. Think a menu, a toggle, or a copy button.
• You read from or write to the page that is already there.
• The state is simple. Open or closed. Light or dark. Copied or not.

Use a framework island when

• The piece has a lot of state that changes together. Think a product list with filters, or a form with many steps.
• You use a component library made for React, Vue or Svelte. A component library is a set of ready-made parts.
• The same live piece shows up on many pages. It must stay the same on each one.
• You already know a framework. The piece would take an afternoon in plain JavaScript.

If the piece is a real little app, a framework will save you time. If it is a button, it won’t.

A middle path

You can start with scripts. Add a framework for one component when you hit the limit. Astro mixes them happily on the same page. Adding React is one command. Only the components you mark with a client directive pay for it. A client directive is a small label. It tells Astro to make that one part live in the browser.

Our recommendation

Build your first site with scripts only. You will learn how the browser works. Your site will be fast without trying. Reach for React, Vue or Svelte the first time a script tag starts to feel like a mess. Not before.

Frequently asked questions

Is Astro without React still a real framework?

Yes. Astro components, content collections, layouts and scripts are the whole framework. React is an extra you add only for the moving parts.

Can I add React later?

Yes, with one command. Starting without it does not make it harder to add later.