Introduction to

React.js(and Redux!)

1
React.js

What is a Front-End
Framework ?

2
React.js WEB Browser Beach

Javascript FRONT END

Framework

USER

AJAX
HTTP

WEB Server Ocean HTTP

HTTP HTTP

Web Dynamic
Server Web Dynamic

Web Service BACK END

Server

Dabase requests

DATA 3
React.js

Front End
 Everything running on the web browser !!
 Basic languages
▪ HTML
▪ CSS
▪ JAVASCRIPT
 Lots of toolboxes !!
▪ Jquery
▪ AJAX
▪ Canvas
▪ WebGL
▪ …
4
React.js

Why do we need additional

tools ?
 Everything can be done through pure JAVASCRIPT !
 right but hard!
 Front End Framework
▪ Help to organize front end development
▪ Provide lots of predefined components
▪ Allow the creation of components
▪ Help to gain time !!
(depending on your front end framework knowledge !)

5
React.js

What is the best Frond End

Framework ?
 It depends of what you want!
▪ Time to learn
▪ Front End efficiency
▪ Modularity
▪ Component creation complexity
▪ Community Size
▪ Maturity

6
What is a front end FrameWork ?

Frond-End Solutions Comparison

https://www.valuecoders.com/blog/wp-
content/uploads/2016/11/Angular-react-and-vue-comparision.png
What is a front end FrameWork ?

Frond-End Solutions Comparison

http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html
What is a front end FrameWork ?

Frond-End Solutions Comparison

http://stateofjs.com/2016/frontend/
What is a front end FrameWork ?

Frond-End Solutions Comparison

https://wptavern.com/state-of-javascript-survey-results-published-react-emerges-as-
clear-winner-in-front-end-frameworks
What is a front end FrameWork ?

Frond-End Solutions Comparison

React.js

Flux and react.js

Concepts

12
Flux and React.js Concepts

Why current approaches

are not sufficient ?

https://www.youtube.com/watch?v=Bic_sFiaNDI
13
Flux and React.js Concepts

Current State: MVC

https://developer.apple.com/library/content/documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html

14
Flux and React.js Concepts

Current State: MVC

Model Model  Model B needs (depends on) model A
A B
 Model A needs to be updated first
and then model B
Model Model  Idem if Model C and Model D needs model A
C D

Model Model  Model B may needs also on model C

A B
 Model A needs to be updated first,
then model C and finally Model B
Model Model  Update needs to be propagated and we need
C D
to manage that
15
Flux and React.js Concepts

Current State: MVC

What happen when we scale up ?

Model Model Model Model Model Model Model

Model Model Model Model Model Model Model

Model Model Model Model Model Model Model

Model Model Model Model Model Model Model

16
Flux and React.js Concepts

Current State: MVC

What happen when we scale up ?

17
Flux and React.js Concepts

Current State: MVVM (Model View ViewModel)

 Angular.js data binding

 No more controller for managing model update events instead

18
Flux and React.js Concepts

Current State: MVVM (Model View ViewModel)

 Angular.js data binding

 More details information below

https://docs.angularjs.org/guide/scope#integration-with-the-browser-event-loop

19
Flux and React.js Concepts

Proposition: Flux
 Single direction data flow: FLUX

https://facebook.github.io/flux/docs/in-depth-overview.html#content

20
Flux and React.js Concepts

Proposition: Flux
 Details information and explanation here

https://facebook.github.io/flux/docs/in-depth-overview.html#content

21
Flux and React.js Concepts

UI update Issue
 How updating web page efficiency after data modification ?

{ text: 'message 1'} <li>

{ text: 'message 2'} <div>message 1</div>
<div>message 2</div>
<li>
+
Append
{ text: 'message 3'}
 <div>message 2</div>

22
Flux and React.js Concepts

UI update Issue
 How updating web page efficiency after data modifications ?

<li>
{ text: 'message 1'} <div>message 1</div>
{ text: 'message 2'} <div>message 2</div>
{ text: 'message 3'} <div>message 3</div>
<li>

 We want to always re-render!

23
Flux and React.js Concepts

Proposition: React.js
 What is React.js?
 A library for building reusable UI components
 Implements one-way reactive data flow
 Mostly use as the V of the MVC.

 React.js Properties
 Use the Javascript syntax extension (JSX)
 Optimize the DOM Update through Virutal DOM

24
Flux and React.js Concepts

React.js : Virtual DOM

Initial States
▪ Light copy of the DOM
Virtual DOM ▪ Quick navigation and update
▪ Detached from Browser specific

▪ Hierarchical component view

DOM ▪ Could update and navigate slowly
▪ Browser specific

Web Page

Ref: http://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/
25
Flux and React.js Concepts

React.js : Virtual DOM

Virtual DOM

DOM

Web Page

Initial State of DOM A state changes on A diff is computed The DOM and
and Virtual DOM the Virtual DOM between old web page are re-
Virtual Dom and render according
new Virtual DOM the computed diff

26
Flux and React.js Concepts

React.js objects
 ReactElement
▪ Lowest type of virtual dom
 ReactNode
▪ Hierachical Element of the virtual dom
▪ ReactElement, string, number
▪ Array of virtual nodes
 ReactComponent Virtual DOM

▪ Specification of how to build react

DOM
elements
Web Page

27
Flux and React.js Concepts

React.js Component
 In react.js everything (mostly) is a component
UI events for the current component

COMPONENT
Init Data
(props)
onValidate
Data
onClick (state)

onDataReceived
RENDER
VIRTUAL DOM
(for the current
component)
SPECIFICATION

28
Flux and React.js Concepts

React.js Component
import React, { Component } from 'react'; App.js
import React from 'react'; Index.js class App extends Component {
import ReactDOM from 'react-dom'; constructor(props) {
import App from './App'; super(props);
this.state = { title:this.props.title, };
ReactDOM.render(<App />, this.handleChangeTitle=this.handleChangeTitle.bind(this);
document.getElementById('root')); }

handleChangeTitle(e){
this.setState({title:e.target.value});
}

render() {
return (
<div className="App">
<h1> this is my first React Component</h1>
<label htmlFor="titleInput">Title </label>
<input type="text" id="titleInput"
onChange={this.handleChangeTitle}
value={this.state.title}
/>
<h3>{this.state.title}</h3>
</div>
); }}
export default App; 30
 Flux and React.js Concepts

React.js Component
import React, { Component } from 'react'; App.js
class App extends Component {
constructor(props) {
super(props);
this.state = { title:this.props.title, };
this.handleChangeTitle=this.handleChangeTitle.bind(this); UI events for the current component
}
COMPONENT
Init Data
handleChangeTitle(e){ (props)
onValidate
this.setState({title:e.target.value}); Data
} onClick (state)

render() { onDataReceived
RENDER
VIRTUAL DOM
return ( (for the current
component)
<div className="App"> SPECIFICATION
<h1> this is my first React Component</h1>
<label htmlFor="titleInput">Title </label>
<input type="text" id="titleInput"
onChange={this.handleChangeTitle}
value={this.state.title}
/>
<h3>{this.state.title}</h3>
</div>
); }}
export default App; 31
Flux and React.js Concepts

React.js From JSX to JS

var profile = <div>
<img src="avatar.png" className="profile" />
<h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

RENDER

var profile = React.createElement("div", null,

React.createElement("img", { src: "avatar.png", className: "profile" }),
React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);

More information herehttps://jasonformat.com/wtf-is-jsx/ 32

Flux and React.js Concepts

React.js Component
Application DOM
<html lang="en">
<head>
<meta charset="utf-8">
<title>React App</title>
</head>
<body style="">
<div id="root">
<div data-reactroot="" class="App">
<h1> this is my first React Component</h1>
<label for="titleInput">Title </label>
<input type="text" class="form-control" id="titleInput">
<h3></h3>
</div>
</div>
</body>
</html>

33
Flux and React.js Concepts

Syntax
 Javascript based on the ES6 standard
 Object syntactic sugar
 New symbols usage (generator, arrow, functions)
 Set of libraries (promises, new collections, types arrays)

34
Flux and React.js Concepts

Syntax ES6
From http://slidedeck.io/DonaldWhyte/isomorphic-react-workshop
CLASSES INHERITENCE
class Point { class ColorPoint extends Point {
constructor(x, y) { constructor(x, y, color) {
this.x = x; this.y = y; super(x, y);
} this.color = color;
toString() { return `(${this.x}, ${this.y})`; } }
} toString() { return super.toString() + ' in ' + this.color; }
}
IMPORTING OTHER MODULES
Modules are JavaScript files. EXPORTING SYMBOLS
// import foo.js in same dir as current file import foo foo.js:
from './foo'; export function foobar(num) { console.log('FOOBAR:', num); }
foo.foobar(42);
EXPORTING ENTIRE OBJECTS
// import specific variables/functions from a module person.js:
import { foobar } from './foo'; foobar(42); export default { name: 'Donald', age: 24 };
another_file.js
LET and CONST import person as './person'; console.log(person.name);
const x_const // outputs 'Donald'
Let x_var
FUNCTION
x_var = x_var +1 ()=>{return ‘hello’;}
x_const = x_const +50 //  error

35
Flux and React.js Concepts

React ToolBoxe : Configure a read.js project

https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr
36
React.js

React.js : Let’s go!

37
Let’s go!

Installation
https://facebook.github.io/react/docs/installation.html

 Nodes.js
 Npm

npm install -g create-react-app

create-react-app my-app
cd my-app
npm start

npm run build

38
Let’s go!

It is your turn !
 Create App allowing to get as input a
title and print it below
 Your App component must be
initialized with the title property =
‘default_title ’

39
Let’s go!

It is your turn !
 Update the number of mouse over the
printed title

40
Let’s go!

Best practices
 Divide your application into components

41
Let’s go!

Best practices
 Divide your application into components

42
Let’s go!

Best practices
 Displaying (presentational Component) Vs Processing (container Component)

VS

43
Let’s go!

Best practices
 Displaying Vs Processing

44
Let’s go!

Best practices
 Displaying Vs Processing

Process Data

Robot Part
Display Data
Label Properties Visual

45
Let’s go!

It is your turn !
 Create the following application
 Create
▪ A main component initialized with
a json file
▪ A Left side component
▪ A Robot component
▪ A Label component for the Robot
Component

All steps available at:

https://github.com/jacques-saraydaryan/front-end-react.js.git
46
Let’s go!

It is your turn !
Main

LeftSide
Robot

Label

Visual

47
Let’s go!

It is your turn !
 Same as previously but with a list of
robots
 Some robot can have a visual as a video

48
Let’s go!

It is your turn !
 Add a Part Component using
 Description Component
 Price Component
 Visual Component
 Add a MiddleSide Component
displaying the list of parts of the
selected robot

49
Let’s go!

It is your turn !
Main
LeftSide MiddleSide
Robot
Label

Visual
Part
Description
Price

50
Let’s go!

It is your turn !
Robots_parts.json

{"robots":[ "parts":[
{ {
"id":1, "id":"A1",
"title":"robotA", "title":"WheelA",
"visual_type":"img", "price":10
"visual_src":"https://www.robot-advance.com/EN/ori-wowwee- },
mip-white-robot-1281_1613.jpg", {
"parts":["A1","A1","A1","A1","A4"] "id":"A2",
}, "title":"WheelB",
{ "price":15
"id":2, },
"title":"robotB", {
"visual_type":"video", "id":"A3",
"visual_src":"https://www.youtube.com/embed/ePINYZK4p5Y", "title":"WheelC",
"parts":["A2","A2","A4"] "price":150
}, },
], {
"id":"A4",
"title":"Contrôleur de Servomoteurs USB SSC-32U Lynxmotion",
"price":57
}]
}

Npm install json-loader

51
Let’s go!

It is your turn !
 Add a RightSide Component using
 Panel Component displaying
selected part

52
Let’s go!

It is your turn !
Main
LeftSide MiddleSide RightSide
Robot Panel
Label
Visual
Part
Description
Price

Visual

Price

53
React.js

React.js :
Our current State
Redux as enhancement

54
Redux

React.js and so?

 Pro
 Components Based
 Extremely efficient (Virtual Dom)
 Easy to write module base code
 UI Test Cases easy to write
 Con
 Only for the view layer
 Write visual component into Javascript
 Hard to learn
 Hierarchical dependencies !

55
Redux

Redux

Can be view as an
implementation of Flux

56
Redux

Redux

https://www.slideshare.net/JonasOhlsson/using-redux

57
Redux

Redux
STORE
OLD STATE

NEW STATE
COMPONENT
ACTION

ACTION REDUCER A
COMPONENT
SUBSCRIBERS

COMPONENT
REDUCER B

58
Redux

Redux export const myAction =

ACTION () => {
return { type: ‘A', value: 2 };
1 Define actions }

function app(state = 0, action) {

OLD STATE
switch (action.type) {
case ‘A': return state + action.value
NEW STATE
case ‘B': return 0
ACTION default: return state
2 Define a Reducer }
REDUCER A }

STORE
import { createStore } from 'redux';
3 Create A Store OLD STATE

const store = createStore(app);

with the Reducer ACTION

REDUCER A

4 Component register
STORE
to the Store
OLD STATE

store.subscribe(() => console.log(store.getState()) )

ACTION

REDUCER A
SUBSCRIBERS

59
Redux

Redux in practice (1/4)

 Install reduce components
npm install redux

npm install react-redux

 Create actions and reducers into dedicated files and

directories

 Use Global reducers merging several reducers

index.js robotReducer.js

import { combineReducers } from 'redux'; const robotReducer= (state={},action) => {

import robotReducer from './robotReducer'; console.log(action);
switch (action.type) {
import partReducer from './partReducer';
case 'UPDATE_SELECTED_ROBOT':
return action.obj;
const globalReducer = combineReducers({
default:
robotReducer: robotReducer, return state;
partReducer: partReducer }
}); }

export default globalReducer; export default robotReducer; 60

Redux

Redux in practice (1/4)

 Install reduce components http://redux.js.org/docs/Troubleshooting.html

npm install redux

npm install react-redux

 Create actions and reduces into dedicated files and

directory

 Use Global reducers merging several reducers

index.js robotReducer.js

import { combineReducers } from 'redux'; const robotReducer= (state={},action) => {

import robotReducer from './robotReducer'; console.log(action);
switch (action.type) {
import partReducer from './partReducer';
case 'UPDATE_SELECTED_ROBOT':
return action.obj;
const globalReducer = combineReducers({
default:
robotReducer: robotReducer, return state;
partReducer: partReducer }
}); }

export default globalReducer; export default robotReducer; 61

Redux

Redux in practice (2/4)

 Use react-redux tools
 Provider to deliver service to all components
import { Provider } from 'react-redux';
…

render() {
return (
<Provider store={store} >
<div className="container-fluid">
<div className="row">
<h1> Welcome to robot shop</h1>
</div>
<div className="row">
<div className="col-md-4 col-lg-4" >
<LeftSide
robots={this.state.robot_list}
/>
…
</div>
</div>
</div>
</Provider>
);
}

62
Redux

Redux in practice (3/4)

 Use react-redux tools
 Connect to dispatch action, and subscribe to modifications
dispatch action
//load the connect tool
import { connect } from 'react-redux';
//load the custom action
import {setSelectedRobot} from '../../actions';

class Robot extends Component {

...
handleOnRobotSelected(robot_obj){
//get the store contained into props and
// 'sent' an action
this.props.dispatch(setSelectedRobot(robot_obj));
}
...
//link the Robot Component to the store provided by the Provider Tool
//No need to subscribe that's why there is no first parameter to the
// connect function connect()(Robot)
export default connect()(Robot);

63
Redux

Redux in practice (4/4)

 Use react-redux tools
 Connect to dispatch action, and subscribe to modifications
subscribe to modifications
//load the connect tool
import { connect } from 'react-redux';
class MiddleSide extends Component {
...
//render function use to update the virtual dom
render() {
return (
<div>
<Part
part={this.props.parts[0]}
/>
</div>
); } }
const mapStateToProps = (state, ownProps) => {
return {
parts: state.robotReducer.parts
} };

//connect the MiddleSide component to the store provided by the Provider Tool
// Specify a function (mapStateToProps) allowing to trig on store state modification
// when a store state is modify the mapStateToProps is launched and associate the
state.robotReducer.parts value to the local propery parts (this.props.parts)
export default connect(mapStateToProps)(MiddleSide);

64
Redux

It is your turn !
 Create 2 Actions modifying the selected
Robot obj and the selected Part obj

 Create 1 reducer ‘robotReducer’ in

charge of processing the selected Robot obj

 Create 1 reduce ‘partReducer’ in charge

of processing the selected Part obj

65
Redux

It is your turn !
 Modifying the previous project so as to
▪ Dispatch selected robot in the Robot
component
▪ Subscribe to store and update list of
parts in the MiddleSide component
Main

▪ Dispatch selected part in the Part

LeftSide MiddleSide RightSide

Robot Panel
Label

Part
Visual

Description

component Price

Visual

▪ Subscribe to store and update Part in

the RightSide component Price

66
Réferences
References

References

68
References
Réferences

References

▪ React.js and Flux

http://soat.developpez.com/tutoriels/javascript/architecture-flux-avec-react/
https://www.tutorialspoint.com/reactjs/reactjs_using_flux.htm
https://medium.com/@jetupper/hello-react-js-b87c63526e3a
DEVOX France: https://www.youtube.com/watch?v=IFM8krjbKmQ

▪ React.js and Redux

http://www.troispointzero.fr/2016/03/reactjs-redux-pour-des-lendemains-qui-chantent-
premiere-partie/
https://www.codementor.io/mz026/getting-started-with-react-redux-an-intro-8r6kurcxf
http://www.sohamkamani.com/blog/2017/03/31/react-redux-connect-explained/

▪ Tutorials
https://github.com/HurricaneJames/dex/blob/master/doc/Building%20Components%20
with%20React.js%20and%20Flux.md
https://github.com/react-bootcamp/react-workshop

▪ Course tutorial
https://github.com/jacques-saraydaryan/front-end-react.js
69
Jacques Saraydaryan
Jacques.saraydaryan@cpe.fr