From Zero to Hero with React and TypeScript

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

What this talk IS

Slide 5

Slide 5 text

Live coding

Slide 6

Slide 6 text

Let’s Get STARTED !

Slide 7

Slide 7 text

I. Environment Setup

Slide 8

Slide 8 text

II. TypeScript

Slide 9

Slide 9 text

III. React

Slide 10

Slide 10 text

Component

Slide 11

Slide 11 text

Component f(p) => View

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

IV. SPA with React

Slide 14

Slide 14 text

One way data flow

Slide 15

Slide 15 text

What are we gonna build ?

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Fetching data

Slide 21

Slide 21 text

http-client service

Slide 22

Slide 22 text

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