This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Create stateless React components using TypeScript

    Basarat Ali SyedBasarat Ali Syed

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss