View
751
Download
0
Category
Preview:
Citation preview
Modern Frontend in React.jsAbdulsattar
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
AgendaES6
Webpack
React.js
Flux with Redux
React Router
Redux DevTools
Evolution of the FrontendJavascript developed by Brendan Eich in May, 1995 at Netscape
(within 10 days!)
BOM - Browser Object Model
DOM - Document Object Model
AJAX
jQuery
MV* frameworks
Javascript VersionsECMAScript 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
ECMAScript 7, WIP: Promises, Async Await etc.
ES6Arrow functions
Classes
Template Strings
Block scoping
Modules
… and many more!
Arrows, Template Strings, Block Scopingvar square = x => x * xvar square = function(x) { return x * x };
if(true) { let a = 1; console.log(`a is ${a}`);}console.log(a); // Error: a is not available!
Classesclass Employee extends Person { constructor(name, city, state, companyName) { super(name, city, state); this.companyName = companyName; }
walk() { super.walk(); console.log("to the office"); }}
Destructuringlet 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;
Modules// lib/math.jsexport function sum(x, y) { return x + y;}export var pi = 3.141593;
// app.jsimport math from "lib/math";alert("2π = " + math.sum(math.pi, math.pi));// ^ It's Unicode!
// otherApp.jsimport {sum, pi} from "lib/math";alert("2π = " + sum(pi, pi));
Babel TranspilerES6+ to ES5 compiler
Webpack
Module Bundler
ReactJust the V in MVC
Virtual DOM
Components
Thinking in React
Thinking in React
Code
Flux ArchitectureUnidirectional data flow
ReduxState Container
Actions & Reducers
Initial State State 2Reducer 1 State 3Reducer 2 ... State 100
Initial State State 2Reducer 1 State 3Reducer 2 ... State 100
Code
What to do next?Use Immutable.js
Use reselect
Referenceshttps://github.com/abdulsattar/workshop23.git
‘complete’ branch
Contact: asattar.md@gmail.com
Thank You!
Recommended