Frontend framework
React
The library we use for interactive islands and app-like builds.
React is an open-source JavaScript library for building user interfaces out of reusable components. It powers everything from a single interactive widget to a full web app. HDC uses React as self-contained interactive islands inside fast Astro sites, and as the foundation for genuinely app-like builds, so clients get rich interactivity exactly where it earns its place.
Where it shines
- Component-driven: build UI once, reuse it everywhere, keep it consistent
- Huge, mature ecosystem and the largest pool of developer talent of any UI library
- Drops cleanly into Astro as interactive islands without bloating the rest of the page
- Scales from a single widget up to a full customer dashboard or web app
- Backed by Meta and a vast community, so it's stable, well-documented and long-lived
- React 19 adds Server Components, so logic can run on the server and ship less JavaScript
Trade-offs to weigh
- Ships JavaScript to the browser, overkill for a static page that needs no interactivity
- A whole-site React app (without a framework) tends to be slower and weaker for SEO
- The ecosystem moves fast, so choices need experienced judgement to avoid churn
What React is
React is an open-source JavaScript library for building user interfaces, originally created at Meta (Facebook) and now used across a huge portion of the modern web. Its core idea is components: you build your interface out of small, self-contained pieces, a button, a form, a card, a whole page, and compose them together. Each component manages its own logic and appearance, and React keeps what’s on screen in sync with your data automatically.
That component model is what made React so widely adopted. The same approach scales from a single interactive element embedded in a page all the way up to a complete web application. Recent versions add Server Components, which let parts of a React app run on the server or at build time and send less JavaScript to the browser, a meaningful step towards the fast, server-first approach we favour.
How HDC uses React
We use React in two distinct ways, and we’re deliberate about which.
- As interactive islands inside Astro. Most of our client sites are fast, static Astro builds. Where a page genuinely needs interactivity, a quote calculator, an image gallery, a multi-step lead form, live filtering, we build that single piece as a React island. It loads on its own, while the rest of the page stays static and instant.
- As the base for app-like builds. When a client needs something closer to a web application, a customer portal, a dashboard, a booking tool with constant interactivity, React (usually with a framework like Next.js) is the foundation we build on.
In both cases we pair React with TypeScript for safer code and Tailwind CSS for styling, and we keep components small and reusable so the build stays maintainable.
Why we apply it
The point of React, for our clients, is rich interactivity without reinventing the wheel. Because the component model is so well established, we can build a reliable, accessible interactive feature quickly and know it will behave consistently across browsers and devices. React’s enormous ecosystem and talent pool also mean a client isn’t locked into anything obscure, the work is built on the single most widely used UI library on the web.
Crucially, using React as islands means a client gets that interactivity without paying the speed and SEO cost of turning the whole site into a heavy app. The interactive feature earns its JavaScript; everything else stays fast.
How React fits our stack
React rarely works alone in our stack, it’s a component layer that plugs into the rest. On a typical content site it sits inside Astro, hydrated only where needed. On an app-like build it sits under Next.js, which adds routing, server rendering and data handling. Either way we layer TypeScript on top for type safety, Tailwind CSS for styling, and Vite as the fast build tool under the hood. This lets us mix the right amount of interactivity into a site without compromising the speed and SEO that win trades and local businesses more work.
When React isn’t the right tool
We don’t reach for React just because it’s popular. If a page is purely informational, a services page, a location page, a blog post, it should ship as plain static HTML with no JavaScript at all, and forcing React onto it only adds weight and slows it down. For those pages, Astro on its own is the better answer, and we’ll build them that way. React earns its place the moment a page needs to do something interactive, and that’s exactly where we use it.
Worked example
A live quote calculator inside a fast trades site
Picture a roofing firm that wants visitors to get a rough price before they enquire. The site itself is a fast, static Astro build that ships almost no JavaScript, but the quote calculator genuinely needs to be interactive. We build that one piece as a React island: a tidy component where the visitor picks a roof type, enters a rough size, and sees an instant estimate, which flows straight into the enquiry form. Only the calculator loads JavaScript; every other page stays instant and SEO-friendly. The client gets a feature that turns browsers into qualified leads, without slowing the rest of the site down. (Illustrative, every build is scoped to your goals.)
Better together
How React fits with the rest of our stack
React: your questions answered
What is React used for?
React is used to build user interfaces from reusable components. That ranges from a single interactive widget on an otherwise static page, a calculator, a slider, a booking form, all the way up to a complete web application like a customer dashboard or portal.
Is React good for SEO?
It depends how it's used. A whole site built as a client-side React app can struggle for SEO, because much of the content only appears after JavaScript runs. That's exactly why we don't do that: we use React as small islands inside server-rendered Astro pages, or with a framework like Next.js that renders on the server, so the content is in the HTML and search engines read it properly.
Why does HDC use React?
Because it's the most proven, best-supported way to build interactive UI, with the deepest talent pool of any library. We embed it as islands in Astro sites so clients get rich features without slowing the page down, and we use it as the base for app-like builds. It's a tool we reach for deliberately, never to turn a simple marketing site into a heavy app.
What's the difference between React and Next.js?
React is the underlying library for building components. Next.js is a full framework built on top of React that adds routing, server-side rendering, data fetching and a build system. We use React directly for islands inside Astro, and we reach for Next.js when a client needs a genuinely app-like product with many connected pages.
Is React the same as React Native?
No, but they're related. React builds interfaces for the web. React Native uses the same component model to build native mobile apps. Both share the React way of thinking, which is one reason the skills and components can carry across.
Will using React make my site slower?
Not the way we build. Because we add React only where interactivity is genuinely needed, as isolated islands, the rest of the page ships no extra JavaScript and stays fast. A site only gets heavy when everything is forced into a single React app, which we avoid for marketing sites.
Want React working for your business?
Tell us what you're trying to achieve, we'll show you, honestly, whether it's the right tool and how we'd apply it.
Enquire now