Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1023 of the free egghead.io lessons, plus get TypeScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Create stateless React components using TypeScript

1:13 TypeScript lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

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.

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?