Tweet
Tweet

Slide 1

Slide 1 text

Ultimate React Component Patterns Martin Hochel @martin_hotell With TypeScript March 30—31, 2019, Novosibirsk, RU

Slide 2

Slide 2 text

Martin Hochel UI Tech Lead @Twisto, 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/Controlled Component <⚛> f() => s() => V f(p) => s(p?) => V <⚛> <⚛>

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

High Order Component hoc(⚛) => <⚛+⚛/> inject extend pass through

Slide 16

Slide 16 text

Hooks const api = useCounter(p)

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

What did we learn today (about Components) Un/Controlled Render Prop High Order Component hooks

Slide 19

Slide 19 text

medium.com/@martin_hotell

Slide 20

Slide 20 text

medium.com/@martin_hotell

Slide 21

Slide 21 text

Demos on Github

Slide 22

Slide 22 text

Thanks ! Martin Hochel @martin_hotell