Exporting and importing components in React - Mini Project: Build & Apply

Exporting and Importing Components in React

📖 Scenario: You are building a simple React app that shows a greeting message. To keep your code organized, you want to create the greeting message as a separate component and then use it inside your main app component.

🎯 Goal: Build two React components: a Greeting component that shows a message, and an App component that imports and uses the Greeting component.

📋 What You'll Learn

Create a functional React component called Greeting that returns a <h1> with the text 'Hello, welcome to React!'

Export the Greeting component as a named export

Create a functional React component called App

Import the Greeting component inside App using a named import

Use the <Greeting /> component inside the App component's returned JSX

💡 Why This Matters

🌍 Real World

In real React projects, components are split into separate files and imported/exported to keep code clean and maintainable.

💼 Career

Understanding how to export and import components is essential for working on React apps in professional development teams.

1

Create the Greeting component

Create a functional React component called Greeting that returns an <h1> element with the text 'Hello, welcome to React!'.

React

// Create the Greeting component
// Your code here

Need a hint?

Use export function Greeting() to create and export the component in one step.

2

Create the App component

Create a functional React component called App that returns an empty <div> element.

React

export function Greeting() {
  return Hello, welcome to React!;
}

// Create the App component
// Your code here

Need a hint?

Use export function App() to create and export the App component.

3

Import the Greeting component inside App

Inside the same file, add a named import statement to import the Greeting component into the App component's scope.

React

// Import the Greeting component here
// Your code here

export function Greeting() {
  return Hello, welcome to React!;
}

export function App() {
  return ;
}

Need a hint?

Use import { Greeting } from './Greeting'; to import the named export Greeting.

Note: In a real project, Greeting would be in a separate file named Greeting.js. For this exercise, assume the import path is './Greeting'.

4

Use the Greeting component inside App

Inside the App component's returned JSX, add the <Greeting /> component so it shows the greeting message on the page.

React

import { Greeting } from './Greeting';

export function Greeting() {
  return Hello, welcome to React!;
}

export function App() {
  return (
    
      {/* Add Greeting component here */}
    
  );
}

Need a hint?

Use <Greeting /> inside the return statement of App.