We're now moving from JavaScript to React. And we're looking, in fact, at a React component, instead of a typical JavaScript function that we've been working with lately. Now notice that it looks identical, we're still declaring it like a normal function declaration, we've got the function keyword, we've got the same type of name.

Note that this has a capital letter at the very beginning of it, this is our App function. But again, since we're working in React, things are a little bit different. Yes, React is just JavaScript. But you'll notice immediately that there's a difference between the code that we've written before and this particular code. First of all, you'll notice that we're using a .jsx file, the JavaScript files that we're using here in our source folder, where our source code is these end in .jsx.

And you'll also notice that we're returning a string here, but it's just outputting it as a plain string in our app, it's not converting it to HTML. So to fix this, and to actually use JSX. To output HTML, we can just remove the template strings around it. And there we go, we have an actual div with the text Hello, JSX. What's unusual about JSX is that this is actually JavaScript code. To create this div, we're actually using JavaScript. And that means when we write this HTML-like syntax called JSX, which stands for JavaScript and XML, is pretty close to using HTML. But there are some key differences.

The first thing is that since this is JavaScript, some words are reserved, so we can't use class. For example, if we want to write a class on an element, we have to use className. In other words, there's a lot of attributes, which now have to be written in this camel case syntax. Instead of class, it's className with Name capitalized. And this applies just to attributes that have multiple words in it. For example, ID is still just ID, since that's one word, or it doesn't consist of more than one word.

Additionally, unlike HTML, you can't return two adjacent elements, this won't work, it's going to tell us we need to wrap it in something, we need to wrap it in something like a div. So components can only return one element, one parent element.

And finally, it's referred to as JavaScript and XML because there are some elements that can't be written like they were in plain HTML, for example, this line break this br element has to be ended with a forward slash. If it's just one tag, it has to be closed. And this applies. For example, if we wanted to just have a single div tag an empty div, we would also have to close that make sure that it's closed.

And if we have a two-tag element, well, that's normal. We have to close that just like we did before. But with all those rules in mind, the best way to get familiar with JSX is to actually convert some HTML into valid JSX.

I want you to take this string that we have here, which again just outputs plain text to turn that into valid JSX to display this pricing component.