From Zero to Hero with React and TypeScript

Wanna build robust and maintainable app and get an amazing developer experience while building it? Wanna use functional approach, typed JavaScript, and get blazing fast and easy to write unit tests? Is this even real? Indeed It is! With React and TypeScript. A best couple to write web apps for today and the future.

Join me in this live coding session to become a new Hero from zero with React and TypeScript ⚛⚛⚛.

Transcript

1. From Zero To Hero
   Martin Hochel
   @martin_hotell
   Codecamp, RO/Iasi
   With
   React &
   TypeScript
   

   View Slide

2. Martin Hochel
   Principal SE, GDE WEB
   Prague / Czech Republic
   @martin_hotell
   medium.com/@martin_hotell
   github.com/hotell
   

   View Slide

3. What this talk is NOT
   Deep dive about
   What is React ?
   What is TypeScript ?
   

   View Slide

4. What this talk IS
   

   View Slide

5. Live coding
   

   View Slide

6. Let’s
   Get
   STARTED !
   

   View Slide

7. I. Environment Setup
   

   View Slide

8. II. TypeScript
   

   View Slide

9. III. React
   

   View Slide

10. Component
    

    View Slide

11. Component
    f(p) => View
    

    View Slide

12. State-less/ful
    <⚛>
    f(p) => V f(p) => s() => V
    <⚛>
    

    View Slide

13. IV. SPA with React
    

    View Slide

14. One way data flow
    

    View Slide

15. What are we gonna build ?
    

    View Slide

16. View Slide

17. 
    {
    data: {
    bio: GithubUser;
    repos: GithubUserRepo[]
    } | null,
    loading: boolean
    }
    State:
    {}
    Props:
    Children
    

    View Slide

18. 
    {
    term: string
    }
    State: {
    onSearch: (t:string)=>void
    }
    Props:
    

    View Slide

19. {
    data: {
    bio: GithubUser
    repos: GithubUserRepo[]
    }
    }
    Props:
    
    
    {
    bio: GithubUser;
    }
    {
    repos: GithubUserRepo[];
    }
    

    View Slide

20. Fetching data
    

    View Slide

21. http-client service
    

    View Slide

22. 
    {
    data: {
    bio: GithubUser;
    repos: GithubUserRepo[]
    },
    loading: boolean
    }
    State:
    {
    httpClient: HttpClient
    }
    Props:
    Children
    

    View Slide

23. V. Testing
    

    View Slide

24. VI. e2e Testing
    

    View Slide

25. medium.com/@martin_hotell
    

    View Slide

26. Thanks !
    Martin Hochel
    @martin_hotell
    

    View Slide