You can create a stateless React component in TypeScript by just creating a function. 

But if you want to create high quality idiomatic React + TypeScript components you should use the `React.StatelessComponent` interface. This is demonstrated in the video.

https://app.egghead.io/api/v1/lessons/typescript-create-stateless-react-components-using-typescript/subtitles

Create stateless React components using TypeScript

[00:00] Here, I have a simple React TypeScript application that renders the div, "Hello world," to the DOM using React and ReactDOM. We can easily move this div into a stateless component called "app" by creating a function, app, that returns this element.

[00:18] Of course, one big advantage of components is that you get to use props to change the component behavior. For example, we can take the message as a property by adding it to the function arguments, and then, using it inside the function body.

[00:33] Now, we'll get to pass in the message as a property the component. You can see that it still behaves the same, but now, we can also control the rendering with the passed-in properties.

[00:44] Although simple functions work fine for simple stateless components, if you want to create high quality types of components, it is recommended that you annotate your component as a React stateless component.

[00:55] This interface takes a generic argument that allows you to easily provide type annotations for the component props. This annotation also opens up other features, like the ability to specify the display name, which will be used as the name for the component in React dev tools.

Create stateless React components using TypeScript

Share this video with your friends