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
2. Martin Hochel Principal SE, GDE WEB Prague / Czech Republic @martin_hotell medium.com/@martin_hotell github.com/hotell
3. What this talk is NOT Deep dive about What is React ? What is TypeScript ?
4. What this talk IS
5. Live coding
6. Let’s Get STARTED !
7. I. Environment Setup
8. II. TypeScript
9. III. React
10. Component
11. Component f(p) => View
12. State-less/ful <⚛> f(p) => V f(p) => s() => V <⚛>
13. IV. SPA with React
14. One way data flow
15. What are we gonna build ?
17. <App/> { data: { bio: GithubUser; repos: GithubUserRepo[] } | null, loading: boolean } State: {} Props: Children
18. <Search/> { term: string } State: { onSearch: (t:string)=>void } Props:
19. <Profile/> { data: { bio: GithubUser repos: GithubUserRepo[] } } Props: <UserProfile/> <UserRepos/> <Profile/> { bio: GithubUser; } { repos: GithubUserRepo[]; }
20. Fetching data
21. http-client service
22. <App/> { data: { bio: GithubUser; repos: GithubUserRepo[] }, loading: boolean } State: { httpClient: HttpClient } Props: Children
23. V. Testing
24. VI. e2e Testing
25. medium.com/@martin_hotell
26. Thanks ! Martin Hochel @martin_hotell