React.js Interaction

1. Modern Frontend in React.js
Abdulsattar

2. Install Node.js (https://nodejs.org/). Stable Version is good enough.
git clone https://github.com/abdulsattar/workshop23.git (or) visit
https://github.com/abdulsattar/workshop23 and click on Download Zip
npm install
npm start
Open http://localhost:3000/. You should see an alert with “You're all set for
the workshop!”
Setup

3. Agenda
ES6
Webpack
React.js
Flux with Redux
React Router
Redux DevTools

4. Evolution of the Frontend
Javascript developed by Brendan Eich in May, 1995 at Netscape (within 10
days!)
BOM - Browser Object Model
DOM - Document Object Model
AJAX
jQuery
MV* frameworks

5. Javascript Versions
ECMAScript 1, 1997: First Edition
ECMAScript 2, 1998: Editorial Changes
ECMAScript 3, 1999: Regular Expressions, Exception Handling etc.
ECMAScript 4, Abandoned.
ECMAScript 5, 2009: Strict Mode, getters and setters, JSON etc.
ECMAScript 5.1, 2011: Editorial Changes
ECMAScript 6, June 2015

6. ES6
Arrow functions
Classes
Template Strings
Block scoping
Modules
… and many more!

7. Arrows, Template Strings, Block Scoping
var square = x => x * x
var square = function(x) { return x * x };
if(true) {
let a = 1;
console.log(`a is ${a}`);
}
console.log(a); // Error: a is not available!

8. Classes
class Employee extends Person {
constructor(name, city, state, companyName) {
super(name, city, state);
this.companyName = companyName;
}
walk() {
super.walk();
console.log("to the office");
}
}

9. Destructuring
let topic = {name: "React.js", comment: "Modern Frontend"};
let name = topic.name, comment = topic.comment;
let {name, comment} = topic;
let languages = ["Odiya", "Telugu", "Hindi", "English"];
let [first, second] = languages;
let [,,third, fourth] = languages;

10. Modules
// lib/math.js
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;
// app.js
import math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));
// ^ It's Unicode!
// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));

11. Babel Transpiler
ES6+ to ES5 compiler
Webpack
Module Bundler

12. React
Just the V in MVC
Virtual DOM
Components

13. Thinking in React

14. Thinking in React

15. Code

16. Flux Architecture
Unidirectional data flow

17. Redux
State Container
Actions & Reducers
Initial State State 2Reducer 1 State 3Reducer 2 ... State 100
Initial State State 2Reducer 1 State 3Reducer 2 ... State 100

18. Code

19. What to do next?
Use Immutable.js
Use reselect

20. References
https://github.com/abdulsattar/workshop23.git
‘complete’ branch
Contact: asattar.md@gmail.com

21. Thank You!