Fluent React

Chapter 2. JSX

In Chapter 1, we learned about the basics of React and its origin story, comparing it to other popular JavaScript libraries and frameworks of its time. We learned about the true value proposition of React and why it’s a thing.

In this chapter, we’ll learn about JSX, which is a syntax extension for JavaScript that allows us to write HTML-like code within our JavaScript code. Back when React was introduced in 2013, it was the first thing people noticed and heavily criticized, so it makes sense to zero in on it this early in the book. With that, let’s dive deep into this language extension, how it works, and how we can conceptually make our own code.

To begin our discussion, let’s understand what JSX stands for. We already know that JS is JavaScript. Does that mean JSX is JavaScript version 10? Like Mac OS X? Is it JS Xtra? We may think the X in JSX means 10 or Xtra, which would both be good guesses! But the X in JSX stands for JavaScript Syntax eXtension. It’s also sometimes called JavaScript XML.

JavaScript XML?

If you’ve been around the web for a while, you might remember the term AJAX, or Asynchronous JavaScript and XML, from around the 2000s. AJAX was essentially a new way of using existing technologies to create highly interactive web pages that updated asynchronously and in place, instead of the status quo at the time: each state change would load an entire new page.

Using tools like XMLHttpRequest in the browser, it would initiate an asynchronous (that is, ...