JSX is a JavaScript syntax extension that looks similar to XML. It is used to build UI components in ReactJS. It's very similar to HTML with some subtle differences. JSX extends JavaScript in such a way that you can easily build ReactJS components with the same understanding as building HTML pages. It's commonly mixed with your JavaScript code because ReactJS thinks about UI in a different way. This paradigm will be explained later in the chapter.
It's wrong to say that you are mixing up your HTML with JavaScript. As already said, JSX extends JavaScript. Actually, you're not writing HTML tags, but you're writing JavaScript objects in the JSX syntax. Of course, it has to be transformed into plain JavaScript first.
When you write this example:
var HelloWorld = React.createClass({
render: function () {
return <h1>Hello World from Learning ReactJS</h1>;
}
});It's transformed into this:
var HelloWorld = React.createClass({
render: function () {
return React...