@bolshchikov
Pragmatic React
Workshop
Sergey Bolshchikov, Team Lead @ Wix
Itai Ben David, Guild Master @ Wix
linkedin/bolshchikov github.com/bolshchikov@bolshchikovsergeyb@wix.com

@bolshchikov
Hi.
We are Sergey and Itai.
@bolshchikov 2

@bolshchikov
Your turn...
1. What’s your name?
2. Your previous
experience with front
end and React?
3. Top thing you want to
learn today?
@bolshchikov 3

@bolshchikov
To give the necessary knowledge
and understanding about React in
order to write the application
@bolshchikov
Our goal
4

@bolshchikov
AGENDA
1. The state of front end now
2. React ecosystem
3. React: before and after
4. Design React application
5. React Syntax
1. Representational
components
2. Container components
6. Life-cycle management
7. Hand-on part
@bolshchikov 5

@bolshchikov
Front End
Ecosystem
01
@bolshchikov 6

@bolshchikov@bolshchikov
https://coggle.it/diagram
/52e97f8c5a143de23900
5d1b/56212c4e4c505e0
045c0d3bda59b77e5977
c2c9bd40f3fd0b451bdcf
8da4aa52
7

@bolshchikov@bolshchikov
https://coggle.it/diagram
/52e97f8c5a143de23900
5d1b/56212c4e4c505e0
045c0d3bda59b77e5977
c2c9bd40f3fd0b451bdcf
8da4aa52
We are here
8

@bolshchikov
React
Ecosystem
02
@bolshchikov 9

@bolshchikov@bolshchikov
https://coggle.it/diagram
/52e97f8c5a143de23900
5d1b/56212c4e4c505e0
045c0d3bda59b77e5977
c2c9bd40f3fd0b451bdcf
8da4aa52
There is still more
to learn
10

@bolshchikov
React:
Before and After
03
@bolshchikov 11

@bolshchikov 12
https://trends.google.co
m/trends/explore?cat=13
&q=angularjs,reactGoogle Trends

@bolshchikov
React: Before
▪ MV* approach
▪ Angular is the most popular framework
▪ Two-way binding (magic)
▪ HTML Templates
▪ Services/Factories/Directives/Config/Run/etc…
▪ Full-blown framework
@bolshchikov 13

@bolshchikov
React: After
▪ Simple library
▪ Challenges best practices
▪ One-way binding
▪ HTML inside JavaScript
▪ Components Only
▪ Bring only what you need
@bolshchikov
14

@bolshchikov
AGENDA
1. The state of front end now
2. React ecosystem
3. React: before and after
4. Design React application
5. React Syntax
1. Representational
components
2. Container components
6. Life-cycle management
7. Hand-on part
@bolshchikov 15

@bolshchikov
Designing
Application
04
@bolshchikov 16

@bolshchikov
Every application is
a tree of components
@bolshchikov 17

@bolshchikov 18
Parent
Component
Components Tree

@bolshchikov 19
Parent
Component
Child
Component
Child
Component
Child
Component
Components Tree

@bolshchikov 20
Parent
Component
Child
Component
Child
Component
Child
Component
Grandchild
Component
Grandchild
Component
Components Tree

@bolshchikov 21
Parent
Component
Child
Component
Child
Component
Child
Component
Grandchild
Component
Grandchild
Component
Grandchild
Component
Components Tree

@bolshchikov 22

@bolshchikov 23
TweetHeader

@bolshchikov 24
TweetHeader
Tweet Body

@bolshchikov 25
TweetHeader
Tweet Body
TweetSocial

@bolshchikov 26
TweetHeader
Tweet Body
TweetSocial
TweetTimestamp
TweetActions

@bolshchikov 27
TweetHeader

@bolshchikov
Your turn to try
Divide UI into components
@bolshchikov 28

@bolshchikov 29

@bolshchikov 30

@bolshchikov
There is one way
flow of data
@bolshchikov 31

@bolshchikov 32
Parent
Component
Child
Component
Child
Component
Child
Component
Grandchild
Component
Grandchild
Component
Grandchild
Component
Data Flow

@bolshchikov 33
Parent
Component
Child
Component
Data Flow
props
callbacks

@bolshchikov
AGENDA
1. The state of front end now
2. React ecosystem
3. React: before and after
4. Design React application
5. React Syntax
1. Representational
components
2. Container components
6. Life-cycle management
7. Hand-on part
@bolshchikov 34

@bolshchikov
React
Syntax
05
@bolshchikov 35

@bolshchikov
import React from 'react';
const MyComp = props => {
return (
<div>Hello World!</div>
);
}
export default MyComp;
React Stateless
Component
▪ Arrow function
▪ Accepts props object
▪ Returns JSX
Representational
Component
36

@bolshchikov
import {React} from 'react';
import PropTypes from 'prop-types';
const MyComp = ({ name }) => {
return (
<div>Hello, {name}</div>
);
}
MyComp.propTypes = {
name: PropTypes.string.isRequired
};
export default MyComp;
React Stateless
Component
▪ Import PropTypes
▪ Define propTypes
Representational
Component with
PropTypes
37

@bolshchikov
Your turn to try
Generate the app &
Create a representation component
@bolshchikov 38

@bolshchikov
import React, {Component} from 'react';
import PropTypes from 'prop-types';
class MyComp extends Component {
render() {
const name = {this.props};
return (
<div>Hello, {name}</div>
);
}
}
MyComp.propTypes = {
name: PropTypes.string.isRequired
};
export default MyComp;
React Stateless
Component
▪ Extends from
Component
▪ Has a render()
method
Form of ES6 class
39

@bolshchikov
import React, {Component} from 'react';
class MyComp extends Component {
constructor(props) {
super(props);
this.state = {name: 'Sergey'}
}
render() {
const name = this.state.name;
return (
<div>Hello, {name}</div>
);
}
}
export default MyComp;
React Stateful
Component
▪ set initial state
40
Set internal state

@bolshchikov
import React, {Component} from 'react';
class MyComp extends Component {
constructor(props) {
super(props);
this.state = {name: ''}
}
componentWillMount() {
fetch('/name').then(name => this.setState({name}));
}
render() {
const name = {this.state};
return (
<div>Hello, {name}</div>
);
}
}
export default MyComp;
React Stateful
Component
Set internal state
41
▪ component will
mount
▪ set internal state

@bolshchikov
React
Lifecycle
06
@bolshchikov 42

@bolshchikov
componentWillMount()
43
constructor(props) componentDidMount()
Mounting Mounted
render()
componentShouldU
pdate()
componentWillRec
eiveProps(nextPro
ps)
componentDidUp
date()
Receiving State Mounted
componentWillUpda
te()
componentWillUnmout()
Unmounting
render()
@bolshchikov

@bolshchikov
AGENDA
1. The state of front end now
2. React ecosystem
3. React: before and after
4. Design React application
5. React Syntax
1. Representational
components
2. Container components
6. Life-cycle management
7. Hand-on part
@bolshchikov 44

@bolshchikov
Hand-on
Part in Pairs
07
@bolshchikov 45

@bolshchikov
▪ Login
▪ Display list of users
▪ Chat with any user
▪ Receive messages
Simple WazzApp
46@bolshchikov

@bolshchikov 47

@bolshchikov 48

@bolshchikov 49

@bolshchikov 50

@bolshchikov
❏ Divide into pairs
❏ Implement every component
❏ Push to git
❏ Deploy
❏ Play together
Plan for today
51@bolshchikov

@bolshchikov
References
99
@bolshchikov 52

@bolshchikov@bolshchikov
1. Create React App
2. Understanding React
3. Frontend Ecosystem
4. Angular Two-way Binding
5. Pete Hunt: React: Rethinking best practices -- JSConf EU 2013
6. Pete Hunt: React: Rethinking best practices -- JSConf EU 2013 [Slides]
7. React: How To
8. WazzApp Repo
53

@bolshchikov
Thank You
linkedin/bolshchikov github.com/bolshchikov@bolshchikovsergeyb@wix.com

@bolshchikov
Q&A
linkedin/bolshchikov github.com/bolshchikov@bolshchikovsergeyb@wix.com

@bolshchikov
Feedback Form
linkedin/bolshchikov github.com/bolshchikov@bolshchikovsergeyb@wix.com