Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Modern frontend in react.js

1,070 views

Published on

React.js Interaction

Published in: Software
  • Be the first to comment

Modern frontend in react.js

  1. 1. Modern Frontend in React.js Abdulsattar
  2. 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. 3. Agenda ES6 Webpack React.js Flux with Redux React Router Redux DevTools
  4. 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. 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. 6. ES6 Arrow functions Classes Template Strings Block scoping Modules … and many more!
  7. 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. 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. 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. 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. 11. Babel Transpiler ES6+ to ES5 compiler Webpack Module Bundler
  12. 12. React Just the V in MVC Virtual DOM Components
  13. 13. Thinking in React
  14. 14. Thinking in React
  15. 15. Code
  16. 16. Flux Architecture Unidirectional data flow
  17. 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. 18. Code
  19. 19. What to do next? Use Immutable.js Use reselect
  20. 20. References https://github.com/abdulsattar/workshop23.git ‘complete’ branch Contact: asattar.md@gmail.com
  21. 21. Thank You!

×