JSX in TypeScript and React Components

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: