React Quickly, Second Edition

3 Introduction to JSX

This chapter covers

• Understanding JSX and its benefits
• Using JSX to implement custom components faster and easier
• React and JSX gotchas

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:

const link = <a href="//react.dev">React</a>;

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 ...