Modern frontend in react.js

Modern frontend in react.js

• 1.
  Modern Frontend inReact.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 ReactRouter Redux DevTools
• 4.
  Evolution of theFrontend 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 Blockscoping 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 extendsPerson { 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 functionsum(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+ toES5 compiler Webpack Module Bundler
• 12.
  React Just the Vin MVC Virtual DOM Components
• 13.
  Thinking in React
• 14.
  Thinking in React
• 15.
  Code
• 16.
  Flux Architecture Unidirectional dataflow
• 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 donext? Use Immutable.js Use reselect
• 20.
  References https://github.com/abdulsattar/workshop23.git ‘complete’ branch Contact: [email protected]
• 21.
  Thank You!