Tweet
Tweet

Slide 1

Slide 1 text

Ultimate React Component Patterns Martin Hochel @martin_hotell With (WE ARE) 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

Patterns

Slide 6

Slide 6 text

Component

Slide 7

Slide 7 text

One way data flow

Slide 8

Slide 8 text

Patterns showcase

Slide 9

Slide 9 text

Live coding

Slide 10

Slide 10 text

Let’s Get STARTED !

Slide 11

Slide 11 text

Component f(p) => View

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Un/Controller Component <⚛> f() => V f(p) => V <⚛> <⚛>

Slide 14

Slide 14 text

Render Prop / Children as a Function ( CaaF ) <⚛> { (p) => <⚛> } this.props.children(props) API

Slide 15

Slide 15 text

High Order Component hoc(⚛) => <⚛+⚛/>

Slide 16

Slide 16 text

What did we learn today (bout Components yo) Stateless/Stateful Un/Controlled Render Prop High Order Component

Slide 17

Slide 17 text

medium.com/@martin_hotell

Slide 18

Slide 18 text

Thanks ! Martin Hochel @martin_hotell