Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Create stateless React components using TypeScript


    You can create a stateless React component in TypeScript as easily as creating a function.

    But if you want to create high quality idiomatic React + TypeScript components we cover some improved patterns in this lesson.



    Become a Member to view code

    You must be a Pro 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
    orLog In




    Basarat Ali Syed: Here, I have a simple 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 called App and returning the same JSX element.

    Of course, one big advantage of components is that you get to use props that change the component behavior. For example, we can take the message as a prop by adding it as an argument and using it inside the function body. TypeScript tells us that this property needs to be provided, so we go ahead and provide it.

    Let's add something different this time. You can see that it works as expected. Although such simple functions work fine for stateless components, if you want to create high-quality types of components, it is recommended that you annotate such functions as React SFC.

    The React SFC interface takes a generic argument that allows you to easily provide the type annotation for the component props. You can see that the type specified over here flows through to the function arguments.

    Of course, if you want, you can easily move out this inline prop type definition into an appropriately named type, for example, App Props.