Embedding expressions in JSX in React - Mini Project: Build & Apply

Embedding expressions in JSX

📖 Scenario: You are building a simple React component that shows a greeting message with a user's name and the current year.

🎯 Goal: Create a React functional component that uses JSX expressions to embed variables and JavaScript expressions inside the rendered output.

📋 What You'll Learn

Create a variable with the user's name

Create a variable with the current year

Use JSX expressions to embed these variables inside the returned JSX

Render a greeting message that includes the user's name and the current year

💡 Why This Matters

🌍 Real World

Embedding expressions in JSX is how React components show dynamic data, like user names, dates, or calculated values, making web pages interactive and personalized.

💼 Career

React developers frequently embed JavaScript expressions in JSX to build user interfaces that update automatically based on data or user input.

1

Create user name variable

Create a variable called userName and set it to the string "Alice" inside the Greeting component.

React

import React from 'react';

export default function Greeting() {
  // Create userName variable here
  
  return (
    
      {/* Greeting message will go here */}
    
  );
}

Need a hint?

Use const userName = "Alice"; inside the component function.

2

Create current year variable

Add a variable called currentYear and set it to the number 2024 inside the Greeting component, below userName.

React

import React from 'react';

export default function Greeting() {
  const userName = "Alice";
  // Create currentYear variable here
  
  return (
    
      {/* Greeting message will go here */}
    
  );
}

Need a hint?

Use const currentYear = 2024; below userName.

3

Embed expressions in JSX

Inside the return statement, replace the comment with a <p> element that uses JSX expressions to embed userName and currentYear in this exact text: Hello, Alice! Welcome to the year 2024.

React

import React from 'react';

export default function Greeting() {
  const userName = "Alice";
  const currentYear = 2024;
  
  return (
    
      {/* Replace this comment with a  element embedding userName and currentYear */}
    
  );
}

Need a hint?

Use curly braces {} inside JSX to embed variables like {userName} and {currentYear}.

4

Complete component export

Ensure the component is exported as the default export with the exact name Greeting.

React

import React from 'react';

// Ensure default export of Greeting component

export default function Greeting() {
  const userName = "Alice";
  const currentYear = 2024;
  
  return (
    
      Hello, {userName}! Welcome to the year {currentYear}.
    
  );
}

Need a hint?

Make sure the component is exported with export default function Greeting().