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:
<button type="button">
<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.
The UI of a web app normally has to be constructed in HTML, because that’s what browsers understand. You can create that HTML using JavaScript, just as you can with PHP or any other language: it’s just text <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.
JavaScript, like many, many other programming languages, has a way of creating objects using classes. So in JavaScript, you can use the keyword 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 class
es 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 class