3 Introduction to JSX

JavaScript XML (JSX) is a syntax extension to JavaScript. It’s one of the things that make React great, but it was also one of the more controversial elements of React when it was introduced back in the day.

This is an example of using JSX in JavaScript:

JSX is the element that appears between the angle brackets: <a href="//react .dev">React</a>. It’s not a string, not a template literal, and not HTML. It’s a JavaScript object that is created with the syntax extension called JSX. It makes creating React elements much faster and more compact and makes reading React elements much easier. The latter advantage is at least as important as the former.

JSX is made for developers only. By itself, it doesn’t do anything to make better or faster web applications. JSX is converted to the same code you get when not using JSX.

Although JSX isn’t a requirement, it’s universally accepted as the only way to write React components. You may find a few teams out there not using JSX, but they are by far the minority.

3.1 Why do we use JSX?

3.1.1 Before and after JSX

3.1.2 Keeping HTML and JavaScript together

3.2 Understanding JSX

3.2.1 Creating elements with JSX

3.2.2 Using JSX with custom components

3.2.3 Multiline JSX objects

3.2.4 Outputting variables in JSX

3.2.5 Working with properties in JSX

3.2.6 Branching in JSX

3.2.7 Comments in JSX

3.2.8 Lists of JSX objects