React components in Astro - Mini Project: Build & Apply

Using React Components in Astro

📖 Scenario: You are building a simple Astro website that uses React components to show a greeting message. Astro lets you mix React components inside its pages easily.

🎯 Goal: Create an Astro page that imports and uses a React component called Greeting. The React component should display a friendly message. You will set up the React component, import it into Astro, and render it on the page.

📋 What You'll Learn

Create a React component named Greeting that returns a <div> with the text 'Hello from React!'

Create an Astro page file named index.astro

Import the Greeting React component into index.astro

Render the Greeting component inside the Astro page

💡 Why This Matters

🌍 Real World

Astro allows developers to build fast websites by combining multiple frontend frameworks like React, Vue, and Svelte in one project.

💼 Career

Knowing how to integrate React components in Astro is useful for frontend developers working on modern web projects that require flexible component usage.

1

Create the React component

Create a React component named Greeting in a file called Greeting.jsx. It should return a <div> with the exact text 'Hello from React!'.

Astro

// Your code here

Hint

Use a function named Greeting that returns JSX with a <div> containing the text.

2

Create the Astro page

Create a new Astro page file named index.astro. Add the basic Astro frontmatter section with no content yet.

Astro

---
// Your code here
---

Hint

Astro pages start and end the frontmatter with ---. Leave it empty for now.

3

Import the React component in Astro

In index.astro, import the Greeting React component from ./Greeting.jsx inside the frontmatter section.

Astro

---
import { Greeting } from './Greeting.jsx';
// Your code here
---

Hint

Use import { Greeting } from './Greeting.jsx'; inside the frontmatter.

4

Render the React component in the Astro page

Below the frontmatter in index.astro, render the Greeting React component using the <Greeting /> tag.

Astro

---
import { Greeting } from './Greeting.jsx';
---

Hint

Use the JSX tag <Greeting /> below the frontmatter to show the React component.