Mastering TypeScript/

...

/

JSX in TypeScript and React Components

JSX in TypeScript and React Components

Learn how to use JSX syntax in TypeScript and embed HTML directly into our React components.

We'll cover the following...

JSX

As mentioned earlier, React uses a specific syntax for embedding what looks like HTML directly into our JavaScript code. This syntax is known as JavaScript XML or simply JSX. TypeScript has supported the JSX syntax from very early releases, with one main caveat. If we need to use JSX syntax, then our TypeScript file should be named .tsx instead of the normal .ts. With this in mind, let’s modify the generated src/App.tsx file and replace the contents with the following:

import React from "react";
import "./App.css";
class App extends React.Component {
  render() {
    return <div>Hello JSX</div>;
  }
}
export default App;
A React application rendering a JSX div to the screen

Here, we have the simplest example of a React component named App and how it uses JSX syntax. We have defined a class named App that extends the class React.Component on line 3. This class has a single ...