Upgrade to Pro — share decks privately, control downloads, hide ads and more …

From Zero to Hero with React and TypeScript

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 ⚛⚛⚛.

Martin Hochel

October 27, 2018
Tweet

More Decks by Martin Hochel

Other Decks in Programming

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