What is JSX in React - Hands-On Activity

What is JSX

📖 Scenario: You want to create a simple React component that shows a greeting message on a webpage.

🎯 Goal: Build a React functional component using JSX to display a friendly greeting inside a <div> element.

📋 What You'll Learn

Create a React functional component named Greeting

Use JSX syntax to return a <div> containing the text Hello, welcome to JSX!

Export the Greeting component as default

💡 Why This Matters

🌍 Real World

JSX is used in React apps to build user interfaces by combining JavaScript logic and HTML structure in one place.

💼 Career

Understanding JSX is essential for React developers to create interactive and maintainable web applications.

1

Create the React functional component

Write a React functional component named Greeting that returns a <div> with the text Hello, welcome to JSX! using JSX syntax.

React

// Your code here

Need a hint?

Remember, JSX looks like HTML but is written inside JavaScript functions.

2

Add export statement

Add a line to export the Greeting component as the default export.

React

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

// Your code here

Need a hint?

Use export default Greeting; to make the component usable in other files.

3

Import React (optional in React 17+)

Add an import statement to import React from the 'react' package at the top of the file.

React

// Your code here

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

export default Greeting;

Need a hint?

In React 17 and later, importing React is optional but good to know.

4

Use the Greeting component in JSX

Write a JSX expression that uses the Greeting component inside a <main> element.

React

import React from 'react';

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

export default Greeting;

// Your code here

Need a hint?

Use <Greeting /> inside JSX to include the component.