This workshop talk about React, Router and Redux

1. React/Redux Workshop
Sebastián Alarcón - Web UI Developer - johan.alarcon@globant.com

2. Intro
● Theoretical and practical workshop
● We’re going to talk about React, Router and Redux
● There is no definitive knowledge
● We’re going to have a practical section after each theoric section

3. What you can expect from the Workshop
● Learn the most you can
● Code whatever you learned
● Get motivated to learn more
● Get interested in UI Development and new technologies

4. What I expect from you
● Respect
● Vibrate or silent mode to your phone
● You can pick up your phone but, please, leave the room.
● If you feel that you don’t understand something write down your
questions and ask once each theoric part finishes
● You have a laptop and Node/npm installed
● Have fun!

6. Let’s talk about React!

7. What is React?

8. So… Why React?

9. Virtual DOM
● Create lightweight description of UI components
● Representation of a UI is kept in memory and synced with the “real”
DOM
● Diff between states
● Compute minimal set of changes to apply to the DOM
● Different to Shadow DOM!

14. Virtual DOM - Summary
1. The entire virtual DOM gets updated.
2. The virtual DOM gets compared to what it looked like before you
updated it. React figures out which objects have changed.
3. The changed objects, and the changed objects only, get updated on the
real DOM.

15. JSX
class HelloMessage extends React.Component
{
render() {
return (
<div>
Hello World
</div>
);
}
}
ReactDOM.render(
<HelloMessage />,
mountNode
);
This is an optional HTML markup
and processor translates to plain JS

17. State and Props A Property is:
● Attribute
● Quality
● Characteristic
In React we called them props
and we can access to them using
this.props
First Props!

18. State and Props
We have two useful objects:
● defaultProps
● propTypes
The component props can be defined by itself or can be passed by its parent

19. For data that is going to change, we
have to use state (dynamic data!)
1. Is it passed in from a parent via
props?
If so, it probably isn't state
2. Does it remain unchanged over
time
If so, it probably isn't state
State and Props
Now the State!

20. State and Props
Some useful things here:
● getInitialState
● setState(data, callback)
● User inputs
● Event handlers

21. Lifecycle

22. Lifecycle - Mounting

23. Lifecycle - Updating - State changed

24. Lifecycle - Updating - Props changed

25. Lifecycle - Unmounting

27. What is coming? Routing and
Redux...

28. But first… create-react-app

29. create-react-app
Is a tool built by developers at Facebook to help you build React applications. It
saves you from time-consuming setup and configuration. You simply run one
command and create react app sets up the tools you need to start your React
project.

30. create-react-app
You must have:
● npm +5
And then run:
npx create-react-app my-app

31. Configuring git into our new app
● cd my app
● git init
● git remote add origin
https://github.com/Sebas-Alarcon-WebUI/react-redux-workshop.git

32. Now we’re going to Route!

33. How to implement it

34. React Router
This is the Declarative routing for React
We have to install:
npm install react-router react-router-dom

36. Let’s have some
rest.
10 min break!

37. And finally… Redux!

38. What is Redux?

39. Why Redux?

40. Redux
The basic stuff to take into account
● ​Actions​
● ​Reducers​
● Store​
● Data Flow​

41. Actions
● Payloads of information
● The only source of information for the store
● Send them using store.dispatch().
● They describe WHAT happens

42. Reducers
Specify HOW the application's state
changes in response to actions sent to the
store.

43. Store
The Store is the object that brings
Actions and Reducers together.

44. Data Flow
Redux architecture revolves around a strict unidirectional data flow.
The lifecycle is:
1. You call store.dispatch(action).
2. The Redux store calls the reducer function you gave it.
3. The root reducer may combine the output of multiple reducers into a single
state tree.
4. The Redux store saves the complete state tree returned by the root reducer.

45. Installation
We have to install:
npm install redux react-redux redux-devtools-extension
redux-thunk

47. Thanks!