![Page 1: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/1.jpg)
1
Introduction to
React.js (and Redux!)
![Page 2: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/2.jpg)
React.js
What is a Front-End
Framework ?
2
![Page 3: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/3.jpg)
React.js
3
FRONT END
BACK ENDWeb Dynamic
Web Dynamic Server
Web Service Server
DATA
Dabase requests
HTTP
HTTP HTTP
HTTP
Javascript
WEB Browser Beach
WEB Server Ocean
USER
AJAX
Framework
![Page 4: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/4.jpg)
React.js
4
Front End
Everything running on the web browser !!
Basic languages
▪ HTML
▪ CSS
▪ JAVASCRIPT
Lots of toolboxes !!
▪ Jquery
▪ AJAX
▪ Canvas
▪ WebGL
▪ …
![Page 5: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/5.jpg)
React.js
5
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 !)
![Page 6: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/6.jpg)
React.js
6
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
![Page 7: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/8.jpg)
What is a front end FrameWork ?
Frond-End Solutions Comparison
http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html
![Page 9: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/9.jpg)
What is a front end FrameWork ?
Frond-End Solutions Comparison
http://stateofjs.com/2016/frontend/
![Page 10: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/10.jpg)
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
![Page 11: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/11.jpg)
What is a front end FrameWork ?
Frond-End Solutions Comparison
![Page 12: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/12.jpg)
React.js
Flux and react.js
Concepts
12
![Page 13: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/13.jpg)
Flux and React.js Concepts
13
Why current approaches
are not sufficient ?
https://www.youtube.com/watch?v=Bic_sFiaNDI
![Page 14: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/14.jpg)
Flux and React.js Concepts
14
Current State: MVC
https://developer.apple.com/library/content/documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html
![Page 15: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/15.jpg)
Flux and React.js Concepts
15
Current State: MVC
Model A
Model B
ModelC
ModelD
Model B needs (depends on) model A
Model A needs to be updated first
and then model B
Idem if Model C and Model D needs model A
Model A
Model B
ModelC
ModelD
Model B may needs also on model C
Model A needs to be updated first,
then model C and finally Model B
Update needs to be propagated and we need
to manage that
![Page 16: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/16.jpg)
Flux and React.js Concepts
16
Current State: MVC
Model Model
Model Model
Model Model
Model Model
Model
Model
Model
Model
Model
Model
Model
Model
Model
Model
Model
Model
Model
Model
Model
Model
What happen when we scale up ?
Model
Model
Model
Model
![Page 17: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/17.jpg)
Flux and React.js Concepts
17
Current State: MVCWhat happen when we scale up ?
![Page 18: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/18.jpg)
Flux and React.js Concepts
18
Current State: MVVM (Model View ViewModel)
Angular.js data binding
No more controller for managing model update events instead
![Page 19: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/19.jpg)
Flux and React.js Concepts
19
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
![Page 20: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/20.jpg)
Flux and React.js Concepts
20
Proposition: Flux Single direction data flow: FLUX
https://facebook.github.io/flux/docs/in-depth-overview.html#content
![Page 21: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/21.jpg)
Flux and React.js Concepts
21
Proposition: Flux Details information and explanation here
https://facebook.github.io/flux/docs/in-depth-overview.html#content
![Page 22: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/22.jpg)
Flux and React.js Concepts
22
UI update Issue How updating web page efficiency after data modification ?
{ text: 'message 1'}
{ text: 'message 2'}
<li>
<div>message 1</div>
<div>message 2</div>
<li>
{ text: 'message 3'}
+
Append
<div>message 2</div>
![Page 23: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/23.jpg)
Flux and React.js Concepts
23
UI update Issue How updating web page efficiency after data modifications ?
{ text: 'message 1'}
{ text: 'message 2'}
{ text: 'message 3'}
<li>
<div>message 1</div>
<div>message 2</div>
<div>message 3</div>
<li>
We want to always re-render!
![Page 24: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/24.jpg)
Flux and React.js Concepts
24
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
![Page 25: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/25.jpg)
Flux and React.js Concepts
25
React.js : Virtual DOM
Ref: http://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/
Web Page
Virtual DOM
DOM▪ Hierarchical component view▪ Could update and navigate slowly▪ Browser specific
▪ Light copy of the DOM▪ Quick navigation and update▪ Detached from Browser specific
Initial States
![Page 26: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/26.jpg)
Flux and React.js Concepts
26
Web Page
DOM
Virtual DOM
Initial State of DOM and Virtual DOM
A state changes on the Virtual DOM
A diff is computed between old
Virtual Dom and new Virtual DOM
The DOM and web page are re-render according the computed diff
React.js : Virtual DOM
![Page 27: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/27.jpg)
Flux and React.js Concepts
27
Web Page
Virtual DOM
DOM
ReactElement
▪ Lowest type of virtual dom
ReactNode
▪ Hierachical Element of the virtual dom
▪ ReactElement, string, number
▪ Array of virtual nodes
ReactComponent
▪ Specification of how to build react
elements
React.js objects
![Page 28: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/28.jpg)
Flux and React.js Concepts
28
In react.js everything (mostly) is a component
React.js Component
COMPONENT
RENDER
SPECIFICATION
Data(state)
UI events for the current component
Init Data (props)
onValidate
onClick
onDataReceived
VIRTUAL DOM(for the current
component)
![Page 29: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/29.jpg)
Flux and React.js Concepts
30
React.js Componentimport React from 'react';import ReactDOM from 'react-dom';import App from './App';
ReactDOM.render(<App />,document.getElementById('root'));
import React, { Component } from 'react';class App extends Component {
constructor(props) {super(props);this.state = { title:this.props.title, };this.handleChangeTitle=this.handleChangeTitle.bind(this);}
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;
Index.jsApp.js
![Page 30: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/30.jpg)
Flux and React.js Concepts
31
React.js Componentimport React, { Component } from 'react';class App extends Component {
constructor(props) {super(props);this.state = { title:this.props.title, };this.handleChangeTitle=this.handleChangeTitle.bind(this);}
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;
App.js
COMPONENT
RENDER
SPECIFICATION
Data(state)
UI events for the current component
Init Data (props)
onValidate
onClick
onDataReceived
VIRTUAL DOM(for the current
component)
![Page 31: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/31.jpg)
Flux and React.js Concepts
32
React.js From JSX to JS
RENDER
var profile = <div><img src="avatar.png" className="profile" /><h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;
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/
![Page 32: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/32.jpg)
Flux and React.js Concepts
33
React.js Component
<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>
Application DOM
![Page 33: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/33.jpg)
34
Syntax
Javascript based on the ES6 standard
Object syntactic sugar
New symbols usage (generator, arrow, functions)
Set of libraries (promises, new collections, types arrays)
Flux and React.js Concepts
![Page 34: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/34.jpg)
35
Syntax ES6From http://slidedeck.io/DonaldWhyte/isomorphic-react-workshop
CLASSESclass Point {
constructor(x, y) { this.x = x; this.y = y;
} toString() { return `(${this.x}, ${this.y})`; }
}
INHERITENCEclass ColorPoint extends Point {
constructor(x, y, color) { super(x, y); this.color = color;
} toString() { return super.toString() + ' in ' + this.color; }
} IMPORTING OTHER MODULESModules are JavaScript files.// import foo.js in same dir as current file import foo from './foo'; foo.foobar(42);
// import specific variables/functions from a module import { foobar } from './foo'; foobar(42);
EXPORTING SYMBOLSfoo.js:export function foobar(num) { console.log('FOOBAR:', num); }
EXPORTING ENTIRE OBJECTSperson.js:export default { name: 'Donald', age: 24 }; another_file.jsimport person as './person'; console.log(person.name); // outputs 'Donald'
LET and CONSTconst x_constLet x_var
x_var = x_var +1x_const = x_const +50 // error
FUNCTION()=>{return ‘hello’;}
Flux and React.js Concepts
![Page 35: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/35.jpg)
36
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
![Page 36: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/36.jpg)
React.js
React.js : Let’s go!
37
![Page 37: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/37.jpg)
Let’s go!
38
Nodes.js
Npm
Installation
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
npm run build
https://facebook.github.io/react/docs/installation.html
![Page 38: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/38.jpg)
39
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 ’
Let’s go!
![Page 39: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/39.jpg)
40
It is your turn !
Update the number of mouse over the
printed title
Let’s go!
![Page 40: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/40.jpg)
41
Best practices
Divide your application into components
Let’s go!
![Page 41: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/41.jpg)
42
Best practices
Divide your application into components
Let’s go!
![Page 42: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/42.jpg)
43
Best practices
Displaying (presentational Component) Vs Processing (container Component)
Let’s go!
VS
![Page 43: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/43.jpg)
44
Best practices
Let’s go!
Displaying Vs Processing
![Page 44: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/44.jpg)
45
Best practices
Let’s go!
Robot Part
Label Properties Visual
Process Data
Display Data
Displaying Vs Processing
![Page 45: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/45.jpg)
46
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
Let’s go!
All steps available at:https://github.com/jacques-saraydaryan/front-end-react.js.git
![Page 46: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/46.jpg)
47
It is your turn !
Let’s go!
Main
LeftSideRobot
Visual
Label
![Page 47: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/47.jpg)
48
It is your turn !
Same as previously but with a list of
robots
Some robot can have a visual as a video
Let’s go!
![Page 48: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/48.jpg)
49
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
Let’s go!
![Page 49: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/49.jpg)
50
It is your turn !
Let’s go!
Main
LeftSideRobot
Visual
Label
MiddleSide
Part
Description
Price
![Page 50: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/50.jpg)
51
It is your turn !
Let’s go!
{"robots":[{
"id":1,"title":"robotA","visual_type":"img","visual_src":"https://www.robot-advance.com/EN/ori-wowwee-
mip-white-robot-1281_1613.jpg","parts":["A1","A1","A1","A1","A4"]
},{
"id":2,"title":"robotB","visual_type":"video","visual_src":"https://www.youtube.com/embed/ePINYZK4p5Y","parts":["A2","A2","A4"]
},],
"parts":[{
"id":"A1","title":"WheelA","price":10
},{
"id":"A2","title":"WheelB","price":15
},{
"id":"A3","title":"WheelC","price":150
},{
"id":"A4","title":"Contrôleur de Servomoteurs USB SSC-32U Lynxmotion","price":57
} ]}
Robots_parts.json
Npm install json-loader
![Page 51: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/51.jpg)
52
It is your turn !
Add a RightSide Component using
Panel Component displaying
selected part
Let’s go!
![Page 52: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/52.jpg)
53
It is your turn !
Let’s go!
MainLeftSide MiddleSide RightSideRobot
PartDescription
Visual
Label
Visual
Price
Price
Panel
![Page 53: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/53.jpg)
React.js
React.js :
Our current State
Redux as enhancement
54
![Page 54: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/54.jpg)
55
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 !
Redux
![Page 55: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/55.jpg)
56
Redux
Can be view as an
implementation of Flux
Redux
![Page 56: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/56.jpg)
57
Redux
https://www.slideshare.net/JonasOhlsson/using-redux
Redux
![Page 57: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/57.jpg)
58
Redux
REDUCER A
REDUCER B
OLD STATE
ACTION
NEW STATE
SUBSCRIBERS
STORE
ACTION
COMPONENT
COMPONENT
COMPONENT
Redux
![Page 58: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/58.jpg)
59
Redux
Create A Store with the Reducer
3import { createStore } from 'redux';
const store = createStore(app);
Define a Reducer2
Define actions1
ACTIONexport const myAction =
() => {return { type: ‘A', value: 2 };
}
function app(state = 0, action) { switch (action.type) {
case ‘A': return state + action.valuecase ‘B': return 0 default: return state
} }REDUCER A
OLD STATE
ACTION
NEW STATE
Component register to the Store
4
STORE
REDUCER A
OLD STATE
ACTION
STORE
REDUCER A
OLD STATE
ACTION
SUBSCRIBERS
store.subscribe(() => console.log(store.getState()) )
Redux
![Page 59: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/59.jpg)
60
Redux in practice (1/4)
Install reduce components
Create actions and reducers into dedicated files and
directories
Use Global reducers merging several reducers
const robotReducer= (state={},action) => {
console.log(action);
switch (action.type) {
case 'UPDATE_SELECTED_ROBOT':
return action.obj;
default:
return state;
}
}
export default robotReducer;
import { combineReducers } from 'redux';
import robotReducer from './robotReducer';
import partReducer from './partReducer';
const globalReducer = combineReducers({
robotReducer: robotReducer,
partReducer: partReducer
});
export default globalReducer;
index.js robotReducer.js
npm install redux
npm install react-redux
Redux
![Page 60: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/60.jpg)
61
Redux in practice (1/4)
Install reduce components
Create actions and reduces into dedicated files and
directory
Use Global reducers merging several reducers
const robotReducer= (state={},action) => {
console.log(action);
switch (action.type) {
case 'UPDATE_SELECTED_ROBOT':
return action.obj;
default:
return state;
}
}
export default robotReducer;
import { combineReducers } from 'redux';
import robotReducer from './robotReducer';
import partReducer from './partReducer';
const globalReducer = combineReducers({
robotReducer: robotReducer,
partReducer: partReducer
});
export default globalReducer;
index.js robotReducer.js
npm install redux
npm install react-redux
Redux
http://redux.js.org/docs/Troubleshooting.html
![Page 61: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/61.jpg)
62
Redux in practice (2/4)
Use react-redux tools
Provider to deliver service to all components
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>
);
}
import { Provider } from 'react-redux';
…
Redux
![Page 62: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/62.jpg)
63
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);
Redux
![Page 63: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/63.jpg)
64
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 domrender() {
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);
Redux
![Page 64: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/64.jpg)
65
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
Redux
![Page 65: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/65.jpg)
66
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
▪ Dispatch selected part in the Part
component
▪ Subscribe to store and update Part in
the RightSide component
Main
LeftSide MiddleSide RightSide
Robot
Part
Description
Visual
Label
Visual
Price
Price
Panel
Redux
![Page 66: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/66.jpg)
Réferences
68
References
References
![Page 67: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/67.jpg)
69
References
▪ React.js and Fluxhttp://soat.developpez.com/tutoriels/javascript/architecture-flux-avec-react/https://www.tutorialspoint.com/reactjs/reactjs_using_flux.htmhttps://medium.com/@jetupper/hello-react-js-b87c63526e3aDEVOX France: https://www.youtube.com/watch?v=IFM8krjbKmQ
▪ React.js and Reduxhttp://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-8r6kurcxfhttp://www.sohamkamani.com/blog/2017/03/31/react-redux-connect-explained/
▪ Tutorialshttps://github.com/HurricaneJames/dex/blob/master/doc/Building%20Components%20with%20React.js%20and%20Flux.mdhttps://github.com/react-bootcamp/react-workshop
▪ Course tutorialhttps://github.com/jacques-saraydaryan/front-end-react.js
RéferencesReferences
![Page 68: Introduction to React · Everything can be done through pure JAVASCRIPT ! right but hard! Front End Framework Help to organize front end development Provide lots of predefined components](https://reader030.vdocument.in/reader030/viewer/2022040409/5ec56861668468537156f3d7/html5/thumbnails/68.jpg)
Jacques [email protected]