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!