Learn TypeScript 3 by Building Web Applications

Introduction

As we mentioned in the introduction of this chapter, JSX is an extension to JavaScript. It expands the syntax of the language to allow writing XML-like code in JavaScript.

In reality, JSX is only syntactic sugar; it is never executed as is at runtime. A build step is required to transform JSX code into JavaScript. The default choice for handling this transformation is Babel but as we'll see later, TypeScript can also take care of it for us.

Here's a basic example of JSX code:

const element = <h1>Hello, world!</h1>; 

Here, we created a simple React element (we'll explain what those are in the next section).

JSX elements such as the preceding one actually get converted into calls like these: React.createElement(component, props, ...