Advanced Component Patterns

A presentation at ReactFoo Pune in January 2018 in Pune, Maharashtra, India by Siddharth Kshetrapal

Slide 1

Slide 1

Advanced
Component
Patterns

Slide 2

Slide 2

siddharthkp

Slide 3

Slide 3

Slide 4

Slide 4

I teach React

Slide 5

Slide 5

MUST LEARN ALL PATTERNS

Slide 6

Slide 6

Slide 7

Slide 7

7 component patterns

Slide 8

Slide 8

Slide 9

Slide 9

DESIGN DEVELOPMENT

Slide 10

Slide 10

Slide 11

Slide 11

Slide 12

Slide 12

Slide 13

Slide 13

Slide 14

Slide 14

const TextInput

props =>

{ return

( < input className =" input " type =" text " placeholder ={ props . placeholder } /> ) } render ( < TextInput placeholder =" Enter

some

text"

/> )

Slide 15

Slide 15

Slide 16

Slide 16

const TextInput

props =>

{ return

( < input className =" input " type =" text " placeholder ={ props . placeholder } /> ) } render ( < TextInput placeholder =" Enter

some

text"

/> )

Slide 17

Slide 17

const TextInput

props =>

{ return

( < input className =" input " type =" text " placeholder ={ props . placeholder } /> ) } render ( < TextInput readOnly placeholder =" Enter

some

text"

/> )

Slide 18

Slide 18

const TextInput

props =>

{ let classes

'input' if

( props . readOnly ) classes +=

' readonly' return

( < input className ={ classes } type =" text " placeholder ={ props . placeholder } /> ) } render ( < TextInput readOnly placeholder =" Enter

some

text"

/> )

Slide 19

Slide 19

const TextInput

props =>

{ let classes

'input' if

( props . readOnly ) classes +=

' readonly' return

( < input className ={ classes } type =" text " placeholder ={ props . placeholder } readOnly ={ props . readOnly } /> ) } render ( < TextInput readOnly placeholder =" Enter

some

text"

/> )

Slide 20

Slide 20

Functional component

Slide 21

Slide 21

const TextInput

props =>

{ let classes

'input' if

( props . readOnly ) classes +=

' readonly' return

( < input className ={ classes } type =" text " placeholder ={ props . placeholder } readOnly ={ props . readOnly } /> ) } render ( < TextInput readOnly placeholder =" Enter

some

text"

/> )

Slide 22

Slide 22

Slide 23

Slide 23

0 chars

Slide 24

Slide 24

const TextInput

props =>

{ return

( < input className =" input " type =" text " placeholder ={ props . placeholder } /> ) } 0 chars

Slide 25

Slide 25

const TextInput

props =>

{ return

( < div

< span

0 chars </ span

< input className =" input " type =" text " placeholder ={ props . placeholder } /> </ div

) } 0 chars

Slide 26

Slide 26

class TextInput extends React . Component { render ()

{ return

( < div

< span

0 chars </ span

< input className =" input " type =" text " placeholder ={ props . placeholder } /> </ div

) } } 0 chars

Slide 27

Slide 27

class TextInput extends React . Component { render ()

{ return

( < div

< span

0 chars </ span

< input className =" input " type =" text " placeholder ={ this . props . placeholder } /> </ div

) } } 0 chars

Slide 28

Slide 28

class TextInput extends React . Component { constructor (props)

{ super (props) this . state

{ length :

0

} } render ()

{ return

( < div

< span

0 chars </ span

< input className =" input " type =" text " placeholder ={ this . props . placeholder } /> </ div

) } } 0 chars

Slide 29

Slide 29

class TextInput extends React . Component { constructor (props)

{ super (props) this . state

{ length :

0

} } render ()

{ return

( < div

< span

{ this . state . length } chars </ span

< input className =" input " type =" text " placeholder ={ this . props . placeholder } /> </ div

) } } 0 chars

Slide 30

Slide 30

class TextInput extends React . Component { constructor (props)

{ ... } render ()

{ return

( < div

< span

{ this . state . length } chars </ span

< input className =" input " type =" text " placeholder ={ this . props . placeholder } /> </ div

) } } 0 chars

Slide 31

Slide 31

class TextInput extends React . Component { constructor (props)

{ ... } onChange ( event )

{ this . setState ({ length : event . target . value . length }) } render ()

{ return

( < div

< span

{ this . state . length } chars </ span

< input className =" input " type =" text " placeholder ={ this . props . placeholder } /> </ div

) } } 0 chars

Slide 32

Slide 32

class TextInput extends React . Component { constructor (props)

{ ... } onChange ( event )

{ this . setState ({ length : event . target . value . length }) } render ()

{ return

( < div

< span

{ this . state . length } chars </ span

< input className =" input " type =" text " placeholder ={ this . props . placeholder

onChange ={ this . onChange . bind ( this )} /> </ div

) } 0 chars Abc 3 chars

Slide 33

Slide 33

Class component

Slide 34

Slide 34

class TextInput extends React . Component { constructor (props)

{ ... } onChange ( event )

{ this . setState ({ length : event . target . value . length }) } render ()

{ return

( < div

< span

{ this . state . length } chars </ span

< input className =" input " type =" text " placeholder ={ this . props . placeholder

onChange ={ this . onChange . bind ( this )} /> </ div

) } 0 chars Abc 3 chars

Slide 35

Slide 35

class TextInput extends React . Component { constructor (props)

{ ... } onChange ( event )

{ this . setState ({ length : event . target . value . length }) } render ()

{ return

( < div

< span

{ this . state . length } chars </ span

< input className =" input " type =" text " placeholder ={ this . props . placeholder

onChange ={ this . onChange . bind ( this )} /> </ div

) } 0 chars Abc 3 chars

Slide 36

Slide 36

class TextInput extends React . Component { constructor (props)

{ ... } onChange ( event )

{ this . setState ({ length : event . target . value . length }) } render ()

{ return

( < div

< span

{ this . state . length } chars </ span

< input className =" input " type =" text " placeholder ={ this . props . placeholder

onChange ={ this . onChange } /> </ div

) } 0 chars Abc 3 chars

Slide 37

Slide 37

class TextInput extends React . Component { constructor (props)

{ ... } onChange

( event )

=> { this . setState ({ length : event . target . value . length }) } render ()

{ return

( < div

< span

{ this . state . length } chars </ span

< input className =" input " type =" text " placeholder ={ this . props . placeholder

onChange ={ this . onChange } /> </ div

) } 0 chars Abc 3 chars

Slide 38

Slide 38

class TextInput extends React . Component { constructor (props)

{ ... } onChange

( event )

=> { ... }
render ()

{ return

( < div

< span

{ this . state . length } chars </ span

< input className =" input " type =" text " placeholder ={ this . props . placeholder

onChange ={ this . onChange } /> </ div

) 0 chars Abc 3 chars

Slide 39

Slide 39

class TextInput extends React . Component { constructor (props)

{ super (props) this . state

{ length :

0

} } onChange

( event )

=> { ... }
render ()

{ return

( < div

< span

{ this . state . length } chars </ span

< input className =" input " type =" text " placeholder ={ this . props . placeholder

onChange ={ this . onChange } /> </ div

) 0 chars Abc 3 chars

Slide 40

Slide 40

class TextInput extends React . Component { state

{ length :

0

} onChange

( event )

=> { ... }
render ()

{ return

( < div

< span

{ this . state . length } chars </ span

< input className =" input " type =" text " placeholder ={ this . props . placeholder

onChange ={ this . onChange } /> </ div

) 0 chars Abc 3 chars

Slide 41

Slide 41

class TextInput extends React . Component { state

{ length :

0

} onChange

( event )

=> { ... }
render ()

{ return

( < div

< span

{ this . state . length } chars </ span

< input className =" input " type =" text " placeholder ={ this . props . placeholder

onChange ={ this . onChange } /> </ div

) } } 0 chars Abc 3 chars

Slide 42

Slide 42

1/3

Slide 43

Slide 43

class TextInput extends React . Component { state

{ length :

0

} onChange

( event )

=> { ... }
render ()

{ return

( < div

< span

{ this . state . length } chars </ span

< input className =" input " type =" text " placeholder ={ this . props . placeholder

onChange ={ this . onChange } /> </ div

) } } 0 chars Abc 3 chars

Slide 44

Slide 44

0 chars email Siddharth@Gmail.Com siddharth@gmail.com

Slide 45

Slide 45

class TextInput extends React . Component { render ()

{ return

( < input type =" text " placeholder ={ this . props . placeholder } /> ) } } email

Slide 46

Slide 46

Un controlled component

Slide 47

Slide 47

class TextInput extends React . Component { render ()

{ return

( < input type =" text " placeholder ={ this . props . placeholder } /> ) } } email SIDDHARTH

Slide 48

Slide 48

class TextInput extends React . Component { state

{ value :

''

} render ()

{ return

( < input value ={ this . state . value } type =" text " placeholder ={ this . props . placeholder } /> ) } } email

Slide 49

Slide 49

class TextInput extends React . Component { state

{ value :

''

} render ()

{ return

( < input value ={ this . state . value } type =" text " placeholder ={ this . props . placeholder } /> ) } } email s

Slide 50

Slide 50

class TextInput extends React . Component { state

{ value :

''

} render ()

{ return

( < input value ={ this . state . value } type =" text " placeholder ={ this . props . placeholder } /> ) } } email s

Slide 51

Slide 51

class TextInput extends React . Component { state

{ value :

''

} onChange

( event )

=> {

this . setState ({ value : event . target . value . toLowerCase ()

}) } render ()

{ return

( < input onChange ={ this . onChange } value ={ this . state . value } type =" text " placeholder ={ this . props . placeholder } /> ) } } email

Slide 52

Slide 52

class TextInput extends React . Component { state

{ value :

''

} onChange

( event )

=> {

this . setState ({ value : event . target . value . toLowerCase ()

}) } render ()

{ return

( < input onChange ={ this . onChange } value ={ this . state . value } type =" text " placeholder ={ this . props . placeholder } /> ) } } email siddharth@gmail.com SIDDHARTH@Gmail.com

Slide 53

Slide 53

0 chars email siddharth@gmail.com address

Slide 54

Slide 54

render ( < TextArea placeholder =" Enter

some

text"

/> ) address

Slide 55

Slide 55

render ( withLabel ( ‘address' , < TextArea placeholder =" Enter

some

text"

/>) ) address

Slide 56

Slide 56

const withLabel

( label , Component )

=>

{ } render ( withLabel ( ‘address' , < TextArea placeholder =" Enter

some

text"

/>) ) address

Slide 57

Slide 57

const withLabel

( label , Component )

=>

{ return

( < div className =" form-field "> < label

{ label }</ label

< Component /> </ div

) } render ( withLabel ( ‘address' , < TextArea placeholder =" Enter

some

text"

/>) ) address

Slide 58

Slide 58

Higher Order Component

Slide 59

Slide 59

const withLabel

( label , Component )

=>

{ return

( < div className =" form-field "> < label

{ label }</ label

< Component /> </ div

) } render ( withLabel ( ‘address' , < TextArea placeholder =" Enter

some

text"

/>) ) address

Slide 60

Slide 60

const withLabel

( label , Component )

=>

{ return

( < div className =" form-field "> < label

{ label }</ label

< Component /> </ div

) } render ( < WithLabel label =" address "> < TextArea placeholder =" Enter

some

text"

/> </ WithLabel

) address

Slide 61

Slide 61

const WithLabel

( props )

=>

{ return

( < div className =" form-field "> < label

{ label }</ label

< Component /> </ div

) } render ( < WithLabel label =" address "> < TextArea placeholder =" Enter

some

text"

/> </ WithLabel

) address

Slide 62

Slide 62

const withLabel

( props )

=>

{ return

( < div className =" form-field "> < label

{ label }</ label

{ props.children } </ div

) } render ( < WithLabel label =" address "> < TextArea placeholder =" Enter

some

text"

/> </ WithLabel

) address

Slide 63

Slide 63

address accept? email

Slide 64

Slide 64

render ( < form

</ form

) email

Slide 65

Slide 65

render ( < form

< WithLabel label =" address "> < TextInput placeholder =" Enter

some

text"

/> </ WithLabel

</ form

) email

Slide 66

Slide 66

render ( < form

< WithLabel label =" address "> < TextInput placeholder =" Enter

some

text"

/> </ WithLabel

< WithLabel label =" address "> < TextArea

placeholder =" Enter

some

text"

/> </ WithLabel

< WithLabel label =" accept? "> < Switch

/> </ WithLabel

</ form

) email

Slide 67

Slide 67

render ( < form

< WithLabel label =" address "> < TextInput placeholder =" Enter

some

text"

/> </ WithLabel

< WithLabel label =" address "> < TextArea

placeholder =" Enter

some

text"

/> </ WithLabel

< WithLabel label =" accept? "> < Switch

/> </ WithLabel

< div className =" actions "> < Button

primary

onClick ={ this . save }>Save</ Button

< Button

onClick ={ this . clear }>Clear</ Button

</ div

</ form

) email

Slide 68

Slide 68

address accept? email

Slide 69

Slide 69

render ( < form

< WithLabel label =" address "> < TextInput placeholder =" Enter

some

text"

/> </ WithLabel

< WithLabel label =" address "> < Form.TextArea placeholder =" Enter

some

text"

/> </ WithLabel

< WithLabel label =“ accept? "> < Form.Switch /> </ WithLabel

< div className =" actions "> < Button

primary

onClick ={ this . save }>Save</ Button

< Button

onClick ={ this . clear }>Clear</ Button

</ div

</ form

) email

Slide 70

Slide 70

render ( < Form

< Form.TextInput label =" email "

placeholder =" Enter

some

text"

/> < Form.TextArea label =" address "

placeholder =" Enter

some

text"

/> < Form.Switch label =" accept? " /> < Form. Actions primary ={{ label :

'Save Changes' , method : this.save }} secondary ={{ label :

'Save Changes' ,

method : this.save }} /> </ Form

) email

Slide 71

Slide 71

Compound Component ❤

Slide 72

Slide 72

compo 
 compo

Slide 73

Slide 73

render ( < Form

< Form.TextInput label =" email "

placeholder =" Enter

some

text"

/> < Form.TextArea label =" address "

placeholder =" Enter

some

text"

/> < Form.Switch label =" accept? " /> < Form. Actions primary ={{ label :

'Save Changes' , method : this.save }} secondary ={{ label :

'Save Changes' ,

method : this.save }} /> </ Form

) email

Slide 74

Slide 74

< Form

< Form.TextInput label =" email "

placeholder =" Enter

some

text"

/> < Form.TextArea label =" address "

placeholder =" Enter

some

text"

/> email

Slide 75

Slide 75

const Form

( props )

=>

{ return

(< form

{ props.children }</ form ) } < Form.TextInput label =" email "

placeholder =" Enter

some

text"

/> < Form.TextArea label =" address "

placeholder =" Enter

some

text"

/> email

Slide 76

Slide 76

const Form

( props )

=>

{ return

(< form

{ props.children }</ form ) } Form . TextInput = props =>

{ return

( < WithLabel

label ={ props.label }> < TextInput placeholder ={ props.placeholder }

/> </ WithLabel

) } < Form.TextArea label =" address "

placeholder =" Enter

some

text"

/> email

Slide 77

Slide 77

const Form

( props )

=>

{ return

(< form

{ props.children }</ form ) } Form . TextInput = props =>

{ return

( < WithLabel

label ={ props.label }> < TextInput placeholder ={ props.placeholder }

/> </ WithLabel

) } Form . TextArea

props =>

{ return

( < WithLabel

label ={ props.label }> < TextArea placeholder ={ props.placeholder }

/> </ WithLabel

) email

Slide 78

Slide 78

render ( < Form

< Form.TextInput label =" email "

placeholder =" Enter

some

text"

/> < Form.TextArea label =" address "

placeholder =" Enter

some

text"

/> < Form.Switch label =" accept? " /> < Form. Actions primary ={{ label :

'Save Changes' , method : this.save }} secondary ={{ label :

'Save Changes' ,

method : this.save }} /> </ Form

) email

Slide 79

Slide 79

email address accept?

Slide 80

Slide 80

render ( < Form

< Form.TextInput label =" email "

placeholder =" Enter

some

text"

/> < Form.TextArea label =" address "

placeholder =" Enter

some

text"

/> < Form.Switch label =" accept? " /> < Form. Actions primary ={{ label :

'Save Changes' , method : this.save }} secondary ={{ label :

'Save Changes' ,

method : this.save }} /> </ Form

) email

Slide 81

Slide 81

email address accept?

Slide 82

Slide 82

email address accept?

Slide 83

Slide 83

0 chars

Slide 84

Slide 84

0 chars PROJECT NAME Abc really long name, omg goes on and on 34 chars

Slide 85

Slide 85

0 chars PROJECT NAME Abc really long name, omg goes on and on 34 chars class TextInput extends React . Component { constructor (props)

{ ... } onChange ( event )

{ this . setState ({ length : event . target . value . length }) } render ()

{ return

( < div

< input onChange ={ this . onChange . bind ( this ) /> < span

{ this . state . length } chars </ span

</ div

) } }

Slide 86

Slide 86

0 chars PROJECT NAME Abc really long name, omg goes on and on 34 chars class TextInput extends React . Component { constructor (props)

{ ... } onChange ( event )

{ const error

event . target . value . length

30 this . setState ({ length : event . target . value . length, error }) } render ()

{ return

( < div

< input onChange ={ this . onChange . bind ( this ) /> < span className ={...}>{ this . state . length } chars </ span

</ div

) } }

Slide 87

Slide 87

0 chars PROJECT NAME Abc really long name, omg goes on and on 34 chars class TextInput extends React . Component { constructor (props)

{ ... } onChange ( event )

{ const error

event . target . value . length

this . props.limit this . setState ({ length : event . target . value . length, error }) } render ()

{ return

( < div

< input onChange ={ this . onChange . bind ( this ) /> < span className ={...}>{ this . state . length } chars </ span

</ div

) } }

Slide 88

Slide 88

0 chars PROJECT NAME Abc really long name, omg goes on and on 34 chars class TextInput extends React . Component { ... } render (< TextInput limit ={ 30 }

/>)

Slide 89

Slide 89

0 chars PROJECT NAME Abc really long name, omg goes on and on 34 chars 0 chars Abc really long name, omg goes on 28 chars 2/3

Slide 90

Slide 90

0 chars PROJECT NAME Abc really long name, omg goes on and on 34 chars class TextInput extends React . Component { ... } render (< TextInput limit ={ 30 }

/>)

Slide 91

Slide 91

0 chars PROJECT NAME Abc really long name, omg goes on and on 34 chars class TextInput extends React . Component { ... } render (< TextInput renderLabel ={ renderLabel } />)

Slide 92

Slide 92

0 chars PROJECT NAME Abc really long name, omg goes on and on 34 chars class TextInput extends React . Component { ... } render (< TextInput renderLabel ={ renderLabel } />) const renderLabel

( length )

=>

{

return

< span

{ length } chars </ span

}

Slide 93

Slide 93

Render prop

Slide 94

Slide 94

0 chars PROJECT NAME Abc really long name, omg goes on and on 34 chars class TextInput extends React . Component { ... } render (< TextInput renderLabel ={ renderLabel } />) const renderLabel

( length )

=>

{

return

< span

{ length } chars </ span

}

Slide 95

Slide 95

0 chars PROJECT NAME Abc really long name, omg goes on and on 34 chars class TextInput extends React . Component { ... } render (< TextInput renderLabel ={ renderLabel } />) const renderLabel

( length )

=>

{

let className

if

( length

25 ) className

'warn'

else

if

( length

30 ) className

'error'

return

< span className ={ className }>

{ length } chars </ span

}

Slide 96

Slide 96

0 chars PROJECT NAME Abc really long name, omg goes on and on 34 chars class TextInput extends React . Component { constructor (props)

{ ... } onChange ( event )

{ ... } render ()

{ return

( < div

< input onChange ={ this . onChange . bind ( this ) /> < span

{ this . state . length } chars </ span

</ div

) } }

Slide 97

Slide 97

0 chars PROJECT NAME Abc really long name, omg goes on and on 34 chars class TextInput extends React . Component { constructor (props)

{ ... } onChange ( event )

{ ... } render ()

{ return

( < div

< input onChange ={ this . onChange . bind ( this ) /> {

this . props . renderLabel ()

} </ div

) } }

Slide 98

Slide 98

0 chars PROJECT NAME Abc really long name, omg goes on and on 34 chars class TextInput extends React . Component { constructor (props)

{ ... } onChange ( event )

{ ... } render ()

{ return

( < div

< input onChange ={ this . onChange . bind ( this ) /> {

this . props . renderLabel ( this . state . length )

} </ div

) } }

Slide 99

Slide 99

0 chars PROJECT NAME Abc really long name, omg goes on and on 34 chars class TextInput extends React . Component { constructor (props)

{ ... } onChange ( event )

{ ... } render ()

{ return

( this . props . render ( this . state . length ) ) } }

Slide 100

Slide 100

Slide 101

Slide 101

Slide 102

Slide 102

Slide 103

Slide 103

Slide 104

Slide 104

Slide 105

Slide 105

< Form

< Form.TextInput label =" email "

placeholder =" Enter

some

text"

/> < Form.TextArea label =" address "

placeholder =" Enter

some

text"

/> < Form.Switch label =“ accept? " theme =" manage " /> < Button theme =" manage ">Save Changes</ Button

</ Form

Slide 106

Slide 106

< Form

< Form.TextInput label =" email "

placeholder =" Enter

some

text"

/> < Form.TextArea label =" address "

placeholder =" Enter

some

text"

/> < Form.Switch label =“ accept? " theme =" extend " /> < Button theme =" manage ">Save Changes</ Button

</ Form

Slide 107

Slide 107

< Form

< Form.TextInput label =" email "

placeholder =" Enter

some

text"

/> < Form.TextArea label =" address "

placeholder =" Enter

some

text"

/> < Form.Switch label =“ accept? " theme =" extend " /> < Button theme =" manage ">Save Changes</ Button

</ Form

Slide 108

Slide 108

< Form

< Form.TextInput label =" email "

placeholder =" Enter

some

text"

/> < Form.TextArea label =" address "

placeholder =" Enter

some

text"

/> < Form.Switch label =“ accept? " theme =" extend " /> < Button theme =" extend ">Save Changes</ Button

</ Form

Slide 109

Slide 109

render (

< App /> )

Slide 110

Slide 110

render (

< ThemeProvider name =" manage ">

< App />

</ ThemeProvider

)

Slide 111

Slide 111

render (

< ThemeProvider name =" extend ">

< App />

</ ThemeProvider

)

Slide 112

Slide 112

Provider Component

Slide 113

Slide 113

Slide 114

Slide 114

https://avatars3.githubusercontent.com/u/17475736?s=400&v=4 ✅ ✅ ✅

Slide 115

Slide 115

render (

< ThemeProvider name =" extend ">

< App />

</ ThemeProvider

)

Slide 116

Slide 116

render (

< ThemeProvider name =" extend ">

< App />

</ ThemeProvider> )

Slide 117

Slide 117

render (

< ThemeProvider name =" extend ">

< App />

</ ThemeProvider> ) class ThemeProvider extends React . Component {

render ()

{

return

this . props . children

} }

Slide 118

Slide 118

render (

< ThemeProvider name =" extend ">

< App />

</ ThemeProvider> ) class ThemeProvider extends React . Component {

getChildContext ()

{

return

{ theme :

this . props . name }

}

render ()

{

return

this . props . children

} }

Slide 119

Slide 119

render (

< ThemeProvider name =" extend ">

< App />

</ ThemeProvider> ) class ThemeProvider extends React . Component {

getChildContext ()

{

return

{ theme :

this . props . name }

}

render ()

{

return

this . props . children

} } ThemeProvider. childContextTypes

{ theme : PropTypes . string }

Slide 120

Slide 120

render (

< ThemeProvider name =" extend ">

< App />

</ ThemeProvider> ) class ThemeProvider extends React . Component { ... } ThemeProvider. childContextTypes

{ theme : PropTypes . string }

Slide 121

Slide 121

render (

< ThemeProvider name =" extend ">

< App />

</ ThemeProvider> ) class ThemeProvider extends React . Component { ... } ThemeProvider. childContextTypes

{ theme : PropTypes . string } const Button

( props )

=>

{

return

< button className ="button">{ props . children }</ button

}

Slide 122

Slide 122

render (

< ThemeProvider name =" extend ">

< App />

</ ThemeProvider> ) class ThemeProvider extends React . Component { ... } ThemeProvider. childContextTypes

{ theme : PropTypes . string } const Button

( props )

=>

{

return

< button className ="button">{ props . children }</ button

} Button . contextTypes

{ theme : PropTypes . string }

Slide 123

Slide 123

render (

< ThemeProvider name =" extend ">

< App />

</ ThemeProvider> ) class ThemeProvider extends React . Component { ... } ThemeProvider. childContextTypes

{ theme : PropTypes . string } const Button

( props, context )

=>

{

return

< button className ="button">{ props . children }</ button

} Button . contextTypes

{ theme : PropTypes . string }

Slide 124

Slide 124

render (

< ThemeProvider name =" extend ">

< App />

</ ThemeProvider> ) class ThemeProvider extends React . Component { ... } ThemeProvider. childContextTypes

{ theme : PropTypes . string } const Button

( props, context )

=>

{

let className

'button'

'button-'

context . theme

return

< button className ={ className }>{ props . children }</ button

} Button . contextTypes

{ theme : PropTypes . string }

Slide 125

Slide 125

render (

< ThemeProvider name =" extend ">

< App />

</ ThemeProvider> )

Slide 126

Slide 126

render (

< ThemeProvider name =" manage ">

< App />

</ ThemeProvider> )

Slide 127

Slide 127

Slide 128

Slide 128

class ThemeProvider extends React . Component { ... } ThemeProvider. childContextTypes

{ theme : PropTypes . string } const Button

( props, context )

=>

{

let className

'button'

'button-'

context . theme

return

< button className ={ className }>{ props . children }</ button

} Button . contextTypes

{ theme : PropTypes . string } render (

< ThemeProvider name =" extend ">

< App />

</ ThemeProvider> )

Slide 129

Slide 129

class ThemeProvider extends React . Component { ... } ThemeProvider. childContextTypes

{ theme : PropTypes . string } const Button

( props, context )

=>

{

let className

'button'

'button-'

context . theme

return

< button className ={ className }>{ props . children }</ button

} addContext (Button) render (

< ThemeProvider name =" extend ">

< App />

</ ThemeProvider> )

Slide 130

Slide 130

class ThemeProvider extends React . Component { ... } ThemeProvider. childContextTypes

{ theme : PropTypes . string } export function addContext ( Component )

{ Component [ 'contextTypes' ]

=

{ theme : PropTypes . string

}

return Component }

const Button

( props, context )

=>

{

let className

'button'

'button-'

context . theme

return

< button className ={ className }>{ props . children }</ button

} addContext (Button)

Slide 131

Slide 131

✅

Slide 132

Slide 132

7 component patterns

Slide 133

Slide 133

I hope you learned something today

Slide 134

Slide 134

siddharthkp