Modern frontend in react.js
Download as PPTX, PDF4 likes1,324 views
This document outlines an agenda for a workshop on modern frontend development with React.js. It begins with setup instructions for installing Node.js and cloning a GitHub repository. The agenda then covers ES6 features like arrow functions, classes, and modules. It discusses tools like Babel, Webpack, and React. It introduces Flux architecture and Redux for unidirectional data flow and state management. Finally, it suggests next steps and provides references to sample code and the workshop presenter's contact information.
![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;](https://image.slidesharecdn.com/modernfrontendinreact-151121083123-lva1-app6892/85/Modern-frontend-in-react-js-9-320.jpg)
Modern frontend in react.js
- 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
- 15. Code
- 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
- 21. Thank You!