Extending React Using Astro

Rate this content
Bookmark

We'll start out by taking a look at Astro; What is Astro, why does it exist and what problems does it solve. How can we optimise our React application / components by using Astro? Let's do some live coding and start out exploring Astro in combination with React! 

Main talking points: 

- What is Astro 

- Astro integrations 

- React in Astro 

- Partial Hydration 

- Server Side Rendering vs Server Side Generation

This talk has been presented at React Summit 2023, check out the latest edition of this React Conference.

Watch video on a separate page

FAQ

To start a new Astro project, you can use the command line interface (CLI) with your preferred package manager such as pnpm, npm, or Yarn. The CLI, represented by the mascot Houston, guides you through the process including setting up a new project and installing dependencies.

Astro is described by Elion as an 'astronomically fast' all-in-one framework built for speed, designed to extend the capabilities of React and allow developers to 'bring your own framework' for various integrations.

The Astro Island architecture refers to a modular approach in web development where components are built and managed as individual 'islands' of functionality, allowing for efficient loading and interaction.

Partial hydration is a feature in Astro that allows developers to selectively hydrate components with JavaScript only when needed, which helps in reducing the overall JavaScript payload and improving performance.

Astro allows developers to use different UI frameworks for different components within a single project. This flexibility lets you choose the best tool for each part of your application, such as React, Svelte, or SolidJS.

Astro offers benefits such as faster performance due to its unique island architecture and partial hydration, SEO optimization through server-side generation of HTML, and the flexibility to use various frameworks and libraries seamlessly.

To integrate React into an Astro project, use the CLI command 'astro add react'. This command updates the project configuration, installs necessary dependencies, and prepares the environment for React components.

Astro supports a range of developer tools and integrations, including VS Code extensions for syntax highlighting, build tools like Vite, and various CSS preprocessors and adapters for deployment platforms like Vercel and Netlify.

Elion can be reached via his Twitter handle @ElionCodes, where he is most active and available to answer questions about Astro and related topics.

Elian Van Cutsem
Elian Van Cutsem
24 min
06 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Astro is an all-in-one framework built for speed that allows for flexibility and customization. It supports file-based routing, dynamic pages, and easy integration with popular frameworks like React. Astro's client directives enable selective hydration and optimization of websites. It also supports fetching data from APIs and using Markdown. With features like style preprocessors, CSS support, and deployment adapters, Astro stands out as a framework for SEO, developer experience, and performance.
Available in Español: Ampliando React utilizando Astro

1. Introduction to Astro

Short description:

Hey everyone, thanks for tuning in! I'm Elion, a software engineer at Veebridge in Belgium and an Astro Ambassador and Maintainer. Today, I'll introduce you to Astro, an all-in-one framework built for speed. We'll explore the Astro Island architecture and how it can be used with React. Let's start with a theoretical example. In Astro, you can bring your own framework, allowing for flexibility and customization. Check out Astro's website for all the official and unofficial integrations. Stay tuned for the React integration in the following slides!

Hey everyone, and thanks for tuning into my talk for React Semi 2023. I'm Elion, I'm a software engineer at Veebridge in Belgium, and for a short while I've also been an Astro Ambassador and now I'm also an Astro Maintainer.

And today I'm going to tell you about Astro. So if you do want to follow me online, or reach out to me if you have any questions, you can do that with at ElionCodes, I'm most active on Twitter, so that would be the easiest, but feel free to reach or contact me anywhere you find me on, okay.

So now that you know who I am, let's start by the question of this whole talk, which is, what is Astro? Well, Astro isn't just like a lightning-fast framework, it's actually even better than those blazingly fast ones. I'd like to call it astronomically fast. So in short, Astro is this all-in-one framework built for speed, and that might sound as an empty box right now, but I promise you that it will get clearer over the following slides why I say that.

So, my goal for today is to introduce you to the Astro Island architecture, and show you how it can be used with React, so you'll be extending React with Astro's capabilities. So, let me start out by showing you a theoretical example. So, take this page for instance. We can divide all of these HTML structures in blocks, see it as a Lego baseplate? With blocks added on the baseplate, and on that blocks, little blocks, and totally, you get the point.

So, we already do this in a couple of frameworks out there. Well, most UI frameworks actually, being Dittsveld, Vue, Solider, React. We are familiar with this component design. But in Astro, you can actually do something like this. Well, it's theoretically possible, not recommended, it will become clear why. But you can choose different colors or flavors for each brick, so referring to the color as being the UI framework. For instance, if you want a component to be solid JS for instance, or you want to component in Svelte, you can do it with Astro. So, that's why we call Astro a bring your own framework. So, Astro is actually a framework that makes it able for you to bring your own framework onto it which means that you can bring it and I'll show you that in the following slides. For instance, all the integrations can be checked out on Astro's website itself. There is a full page dedicated to all integrations, all official and unofficial existing integrations. And, as you can see, you tuned in for an event that's mainly about React. So, I will show you what React integration looks like in the following slides. But, before we dive into React with Astro, we of course have to start a new Astro project. So, let me pop into the terminal here and show you what our CLI looks like. So, you can use any package manager you like. I'd like to use pnpm. But feel free to use npm or Yarn. So, you just create a new thing and then you see Houston.

2. Setting up a New Project and Astro File Structure

Short description:

Houston, our mascot, will guide us through setting up a new project in Astro. We'll answer a few questions, install dependencies, and consider TypeScript. Once set up, we can open the project in VS Code, with support for Astro files. The syntax is similar to HTML with some JSX. Before diving into coding examples, let's explore the Astro file structure, which is similar to other meta frameworks like Next or Nuxt. Astro supports file-based routing and dynamic pages.

Yeah, there he is. So, Houston is our mascot and they will guide us through the process of setting up a new project inside of our terminal. So, he will ask you a couple of questions. For instance, what's your project? Do you want to use a template? Which I don't. And then of course, it will install your dependencies and ask you if you'd like to use TypeScript.

So, while we wait, even if you don't use TypeScript or don't like, well, if you don't want to use TypeScript or write your own TypeScript, well, Astro will actually still be using some TypeScript on the backend, which you won't have to worry about, but know that there is still some typesafety going on. So, I'll choose strict here just because to show you how it works and stuff. Okay, cool. So, that's how easy it is to set up a new project in Astro. Really cool.

So, maybe let's open up our project in VS Code. So, yep, there we go. So, to get support for the Astro files in VS Code, you still have to install a separate extension. It's a very good integration, it's official, so don't worry about it. Everything else should work out of the box. But as you can see, let's take a look at the syntax here. So, the syntax feels quite familiar. It looks like something in between. Well, actually, it looks just like regular HTML with some bits and pieces of JSX in between. But most of what we can see right now is HTML. But I'll go into that a little bit later.

Because before we dive into our coding examples, I want you to take a look at our Astro file structure, because it's very important to know what Astro is capable of. There's nothing too weird going on here. Your configuration happens in the astro.config.js file. Your components and pages and layouts go in their separate directories inside of the source folder. That all should make sense if you ever used a meta framework like Next or Nuxt before. Astro has file-based routing, so every file inside of the pages folder will respond to its own page or route. You can see there is inside of the blog an id in between brackets there that's a dynamic page, so it's fully capable of doing that as well. And also we have the 404 page. But as you can see, there is also like a little hint to the component there, which is called counter.tsx.