3 Introduction to JSX

JSX is a syntax extension to JavaScript. It is one of the things that make React great, but 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 there between the angle brackets: <a href="//reactjs.org">React</a>. It's not a string. It's not a template literal. It's not HTML. It's a JavaScript object, but created with the syntax extension called JSX. It makes creating React elements much faster and more compact, but also makes reading React elements much easier. And the latter is at least as important as the former.

JSX is made for developers only. It does not by itself do anything to make better nor faster web applications. It is converted to the exact same code as not using JSX would do.

JSX is not a requirement, but is 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

3.2.9 Fragments in JSX

3.3 How to transpile JSX

3.4 React and JSX gotchas

3.4.1 Self-closing elements

3.4.2 Special characters

3.4.3 String conversion

3.4.4 style attribute