From React basics to React server render.

1. A full introductory
guide to React

2. Jean Emer
@jcemer
jcemer.com

4. Work&Co
Digital Products

5. ***

6. 1of9
What is
React for

7. React is a library for
building modular
and reusable user
interfaces

8. It is good for
webapps that has
different states and
also to define a
styleguide

10. State management
is the coordination
of actions and its
effects

11. http://material-ui.com

12. Styleguide is a
good way to keep
your project in
shape

13. 2of9
What is a React
component

14. class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}

15. JSX is XML with
JavaScript

16. class HelloMessage extends React.Component {
render() {
return React.createElement(
"div",
null,
"Hello ",
this.props.name
);
}
}

17. class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { seconds: 0 };
}
tick() {
this.setState(prevState => ({
seconds: prevState.seconds + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div>Seconds: {this.state.seconds}</div>
);
}
}
State
management
Life cycles
HTML with
states and props

18. A React component
is props, states, and
life cycle hooks
together

19. React is declarative,
there is no need to
define the interface
transitions

20. <div>Seconds: {this.state.seconds}</div>
I want a <div> with
the seconds inside.
Do it!

21. The role of the
Virtual DOM is to
transform the render
result in imperative
DOM instructions

22. <div>Seconds: 1</div>
From
<div>Seconds: 2</div>
To
element.textContent = 'Seconds 2'
Do

24. return (
<ReactCSSTransitionGroup
transitionName='number'
transitionEnterTimeout={200}
transitionLeaveTimeout={200}>
<div key={this.state.seconds}>
Seconds: {this.state.seconds}
</div>
</ReactCSSTransitionGroup>
);
https://reactjs.org/docs/animation.html

25. 3of9
How to setup
and build
React

26. ReactDOM.render(
<Component any={data} />,
document
.getElementById(‘component-root')
);
It renders a
component in
the document

27. There is at least the
need of using Babel
with Transform
React JSX plugin

28. https://github.com/
facebookincubator/create-react-app

31. https://github.com/facebookincubator/create-react-app/blob/
master/packages/react-scripts/config/webpack.config.dev.js

33. 4of9
How to fetch
data for a
component

34. class ServerTime extends React.Component {
constructor(props) {
super(props);
this.state = { time: 'Fetching' };
}
componentDidMount() {
axios.get('/time.json')
.then(res => this.setState({ time: res.data.time }));
}
render() {
return (
<div>{this.state.time}</div>
);
}
}
Get a response
and change
the state

35. Fetch the data
right before the
component is
mounted

36. But what happens
if the component
isn’t mounted
anymore when the
response arrives?

37. class ServerTime extends React.Component {
constructor(props) {
super(props);
this.cancelToken = axios.CancelToken.source();
this.state = { time: 'Fetching' };
}
componentDidMount() {
axios.get('/time.json', { cancelToken: this.cancelToken.token })
.then(res => this.setState({ time: res.data.time }));
}
componentWillUnmount() {
this.cancelToken.cancel('Operation canceled by the user.');
}
render() {
return (
<div>{this.state.time}</div>
);
}
}
Cancel token

38. https://discuss.reactjs.org/t/cancel-async-fetch-on-unmount/3272/2

39. 5of9
How to share
state between
components

40. class ServerTime extends React.Component {
constructor(props) {
super(props);
this.state = { time: 'Fetching' };
}
componentDidMount() {
/* Fetch server time */
}
render() {
return (
<div>
<Header time={this.state.time} />
<Content time={this.state.time} />
<Footer time={this.state.time} />
</div>
);
}
}
Send the time via
prop to different
components

41. User

42. User

43. Transporting a
user through all the
component tree is a
boring job

44. window.user = { name: 'Jean' }
All components can
easily access the user
But what happens
if the user login or
logout

45. https://redux.js.org/

46. The state store
keeps the user and
can be connected to
components

47. import { connect } from 'react-redux';
const mapStateToProps = state => ({ user: state.user })
export default connect(mapStateToProps)(Header);
Maps the user
to a prop

48. Login and logout
are actions that
change the state
store

49. store.dispatch(fetchUserAction);
this.props.dispatch(logoutAction);
On app bootstrap
Inside a connected
component

50. https://daveceddia.com/how-does-redux-work/

51. 6of9
What is children,
HOC, render
prop, and more

52. All that will see
are techniques to
code reuse

53. function Content(props) {
return (
<div className='content'>
{props.children}
</div>
);
}
<Content>
<Article />
<Comments />
</Content>
Usage
Content is a
generic box

54. Higher-Order
Component is a
function that takes a
component and returns
a new component
React documentation

55. import { connect } from 'react-redux';
const mapStateToProps = state => ({ user: state.user })
export default connect(mapStateToProps)(Header);
It’s a HOC

56. <UserProvider>
{user => (
<Header {...this.props} user={user}/>
)}
</UserProvider>
Function as child
component
function UserProvider(props) {
return props.children(window.user);
}

57. A render prop is a
function prop that a
component uses to
know what to render
https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce

58. <UserProvider render={user => (
<Header {...this.props} user={user}/>
)}/>
Render is a prop
that accepts a
function to render

59. • Children
• Function as Child
Component
• Higher-Order
Component
• Function (render) as
Prop Component

60. const HelloWorld = () => (<div>Hello world</div>);
React Stateless
Functional
Components

61. 7of9
A bit about
performance

62. React is fast!

63. https://reactjs.org/docs/react-api.html#reactpurecomponent

64. class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}

65. class HelloMessage extends React.PureComponent {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}
Shallow
compare

66. shouldComponentUpdate()

67. 8of9
How to route
an application

68. const BasicExample = () => (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/topics" component={Topics}/>
</div>
</Router>
)
React Router code example

69. It can be very
complex if you try
to async load data
and animate the
transitions

70. ***

71. 9of9
How to run
React on the
server

72. ReactDOM.renderToString(
<Component any={data} />
);

73. React Router default
routing is dynamic
and it is hard to fetch
data on the server
because of that

74. https://crypt.codemancers.com/posts/2017-06-03-reactjs-server-side-
rendering-with-router-v4-and-redux/

75. https://crypt.codemancers.com/posts/2017-06-03-reactjs-server-side-
rendering-with-router-v4-and-redux/

76. https://zeit.co/blog/next

77. https://zeit.co/blog/next

78. ***

79. I hope it inspires you
@jcemer
Thank you!