React Brussels

14th of October, our colleague Elian gave a lightning talk at React Brussels. This blog post contains the slides as well as some extra accompanying speaker notes.

Keep in mind that this was a lightning talk between 4 and 10 minutes long.

Elian at the conference

☝️ Elian at the conference!

The Slides

Thanks for taking an interest in the slides!

So, Elian is a software engineer at vBridge in Belgium 🇧🇪.

Elian is also an Ambassador for Astro.

Slide 1

So what is Astro?

Slide 2

Astro is a lightning fast framework!

Slide 3

Even better, it’s a blazing fast framework!

Slide 4

Or even a primeagen fast framework!

Slide 5

Or just simply Astronomically fast!!!

Slide 6

So; Why was Elian talking about a different Framework than React at React Brussels?

It’s because Astro loves React!

Slide 7

Astro is based on an island component design architecture, what does this mean?

Slide 8

Well, Astro doesn’t only love React, it’s a bring your own framework to the party kinda framework!

Slide 9

One of the amazing things about Astro, is that it can be experienced right now in your browser by heading to & trying it out! Right there in your browser!

You’ll see that it offers templates for all of your favourite frameworks; including React, Preact, Vue, svelte and so on.

Slide 10

Astro also has a lot of official and community driven integrations. All of them are documented and collected on the Astro website!

The React integration is right there on the Astro integrations & Frameworks tab!

Let’s take a look at using React in Astro in a short demo:

Slide 11

So let’s pop in our terminal here and setup a new Astro project by using our favourite node package manager:

Here, yarn create astro is used

Astro will ask us what kind of project we’d like, In the demo, we choose an empty one, since Elian wanted to show of how easy this is.

Astro supports TypeScript, so it will ask us if we want to use that for our project.

That’s how easy it is to set up a new project with astro

Slide 12

Let’s take a closer look at writing and using a React Component in Astro

Slide 13

Let’s add a very simple React counter component that you’ve all probably used before. A basic number and two buttons, one decreasing the value and one increasing the value.

Let’s add some HTML in our index.astro file.

Let’s add some basic styling in the frontmatter of our Astro page, and import our newly created <Counter /> component in there and add it on the page.

If we now build the Astro project and preview it, you’ll see the imported React Counter component on the page.

Slide 14

Okay, so a lot of this probably feels very familiar for everyone that has used React before, so what’s the difference?

Astro ships no JavaScript at all by default. Although components might be written in JavaScript or a JavaScript framework.

Of course, if you’ve got no JavaScript, you’ve got no interactivity!

But what if we need to make a component interactive?

Slide 15

That is where partial hydration comes in!

Slide 16

So, probably you are thinking “what the fuck is partial hydration?”

Well, here is the perfect analogy to understand it;

Slide 17

If you don’t water / hydrate a plant enough. The plant will feel very sad

If you hydrate too much; the plant will drown. This is the same for web applications. The application will be drowned in technical debt, bundle size and complexity!

Let’s take a deeper look into this:

Slide 18

Imagine you have this page. All of those components will require JavaScript to properly render. Even though some of them, like the footer are completely static and don’t require interactivity.

Slide 19

Actually, you probably want something more like this; Where you just select the components you need to be interactive and ship JavaScript to those components only.

Slide 20

Astro makes this possible by using the client: directive.

Slide 21

Using the client directive, you have complete control over which components should use JavaScript, but also have flexibility to choose when or how the component should become interactive.

Slide 22

There are a couple of options for hydration, let’s take a look at them!

Slide 23

Firstly there’s the client:load directive which will just start hydrating the component as soon as the initial DOM content is loaded.

You could also opt for the client:idle directive, which will start importing the component JavaScript as soon as the main browser thread is free.

Slide 24

Now let’s also take a look at how to use this in our code and what the effect is on our result.

Slide 25

There is also client:visible which only will start importing the JavaScript as soon as the component enters the viewport.

Another option is the client:media directive which just starts hydrating the component as soon as the given media query requirements are met.

Slide 26

So let’s hydrate our component here using client:visible and see what that means for our end result.

Slide 27

Of course, Astro is a lot more than just deciding if we should hydrate a component or not!

Slide 28

Astro also supports:

  • Server Side generation
  • Server Side Rendering
  • File-based routing
  • Markdown components
  • MDX components / pages
  • Deploying to the edge (using tools like Vercel edge functions)
  • Deno

But also there are native integrations with popular packages, like Tailwind and Partytown

Slide 29

So, not only is Astro an amazing framework, it’s also driven by a beautiful community, so come chat with us on discord!

Here are some more links that can guide you on your journey in Astro!


Huge thanks you to Aymen & Omar for organising this conference & asking Elian! 🙏

← Back to blog


Drop us a message

  • an icon of an envelope

    Let's talk

    Want to have a talk? Reach out by submitting the form and we'll set up the details.

    Call us at +32 93 96 75 55

  • an icon of an office


    Ottergemsesteenweg-Zuid 713
    9000 Ghent