Alright, it’s time to roll up your sleeves and dive into some hands-on coding! In this section, you’ll get the chance to apply what you’ve learned about JSX and put your new skills to the test.

Challenge 1: Embed JavaScript Expressiosn in JSX

Follow these instructions to embed JavaScript expressions in JSX:

1. Navigate to the App.jsx file found in the component/src directory.
2. Create a variable named userName and assign it any name of your choice.
3. Use JSX to create an <h1> element that says "Hello, [userName]!", where [userName] is dynamically inserted.
4. Store the JSX in a variable named greeting.
5. Return the greeting variable and render it inside the App component.

Expected Output on Screen:

Hello, John! 

Note: You can choose any username of your choice

Challenge 2: Evaluate Mathematical Expressions using JSX

Follow these instructions to complete your challenge:

1. Navigate to the App.jsx file found in the component/src directory.
2. Create a variable named num1 and assign it a value of 5.
3. Create another variable named num2 and assign it a value of 10.
4. Use JSX to display the sum of num1 and num2 inside a <p> element.
5. Store the JSX in a variable named sumElement and render it inside the App component.

Expected Output on Screen:

The sum of 5 and 10 is 15.