Introduction

One of the first things you'll encounter when learning React is JSX. Don't let the name intimidate you – it's a pretty cool and intuitive way of writing your user interfaces. Think of JSX as a special kind of code that resembles a mix of HTML and JavaScript. It allows you to write your components in a way that's easy to read and understand, even for someone new to web development.

Here's an example of what JSX looks like: 

import React from 'react';

function Greeting() {
  return (
    <div>
      <h1>Hello, Developer!</h1>
      <p>Welcome to the wacky world of React!</p>
    </div>
  );
}

In this example, we're creating a React component called Greeting. We're using JSX to describe what the component should render inside the component function. It looks a lot like HTML, right? But wait, there's more!

👾 Exercise: Expressions 

JSX allows you to use JavaScript expressions inside your HTML by wrapping them in curly braces. Check out the following example: defining a name variable inside the MathGreeting component and rendering it inside the <h1> tag using curly braces. We are also rendering a sum of numbers stored in variables a and b. In fact, we can execute any Javascript expression inside curly braces apart from block statements, such as function definitions or return statements.

🎯 YOUR GOAL is to add a new variable c with the value of 2 and then change the formatting of the message to show the text from the error message in the test window. The final result should look like  ”The sum of 6, 10 and 2 is 18" Please hit the Edit button to launch the editor.

👾 Exercise: Interactive Components

But JSX isn't just for rendering elements – you can also use it to create and manipulate complex, reusable components. For example, let's create a <Button /> component that shows a text and displays a message when user clicks it. Please, click on the button to see the message.

In this example, we're creating a Button component that takes a title prop and a message prop. When the button is clicked, it will trigger the clickHandler function and display the message.  The button is is styled in CSS, but the background is styled using inline styles based on the value of the message prop.

🎯 YOUR GOAL is to add a third, 🇮🇹 Italian button, that says “Say Ciao!”. Make sure that all tests ar green!

Conclusion

You might be wondering, "But wait, isn't JSX just like HTML?" Well, not quite. JSX is a syntax extension for JavaScript, which means it gets transpiled (converted) into regular JavaScript code that browsers can understand. This is why you need to import the React library at the top of your files when using JSX.

Don't worry if JSX seems a bit strange at first – it's a powerful tool that makes writing React components much more intuitive and readable. With practice, you'll get the hang of it and start appreciating its quirky charm!