JSX and TSX
JSX is another innovation from Facebook. It refers to JavaScript enhanced with XML and practically it is JavaScript with HTML templates embedded into it. The following is an example of its use:
render() {
return <div>Hello {this.props.name}</div>;
}
This is a function that returns an HTML template. We must use JSX to do this. Normally, this would result in a syntax error as this is not a quoted string nor is it any recognizable object or syntax in TypeScript. JSX allows us to mix our HTML templating in with our code. Some earlier view libraries would use one file for source code and another for templating. This was often confusing to programmers as they needed to flip back and forth between the two.
It is possible to write React without using JSX but that is rarely done and won't be covered in this book. Some other languages, such as Vue, use JSX as well.
When we want to write TypeScript in JSX, we use the .tsx file extension instead...