What’s inside the return statement is JSX, that’s what JSX is. Nothing else in there is JSX, it’s just JS, in a JS file.
HTML has specific attributes:
<input type="email" disabled>
JSX lets you effectively define arbitrary attributes:
<MyButton foo="something" bar="something else">
It is similar to a templating language. It’s very similar to PHP. PHP, originally, was for adding dynamic things to HTML, so you can put programming code in HTML – PHP works on the server instead of in the browser like React + JSX, but the principle is the same.
You asked what the difference is.
JSX is a syntax that looks like HTML that you can use in JS files.
<with> some tags </around it>
React (well, ReactDOM, but for simplification) is a JS library for doing that. With React you can use an extension to JS called JSX that lets you write bits of your JS files in code that looks exactly like HTML.
class when you write the code for a class.
HTML and CSS are not programming languages but also use something called
class, this has nothing to do with JS classes. You add some
classes in your HTML, and then in your CSS you refer to those class names when you’re styling things.
JSX is also not a programming language, t is just something you use in JS files. So the authors of React used the property
className instead of
class to remove ambiguity, so it is obvious it is referring to the HTML/CSS idea of
class rather than the JS