Modern frontend in react.js
-
Upload
abdulsattar-mohammed -
Category
Software
-
view
739 -
download
0
Transcript of Modern frontend in react.js
![Page 1: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/1.jpg)
Modern Frontend in React.jsAbdulsattar
![Page 2: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/2.jpg)
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
![Page 3: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/3.jpg)
AgendaES6
Webpack
React.js
Flux with Redux
React Router
Redux DevTools
![Page 4: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/4.jpg)
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
![Page 5: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/5.jpg)
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.
![Page 6: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/6.jpg)
ES6Arrow functions
Classes
Template Strings
Block scoping
Modules
… and many more!
![Page 7: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/7.jpg)
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!
![Page 8: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/8.jpg)
Classesclass Employee extends Person { constructor(name, city, state, companyName) { super(name, city, state); this.companyName = companyName; }
walk() { super.walk(); console.log("to the office"); }}
![Page 9: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/9.jpg)
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;
![Page 10: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/10.jpg)
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));
![Page 11: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/11.jpg)
Babel TranspilerES6+ to ES5 compiler
Webpack
Module Bundler
![Page 12: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/12.jpg)
ReactJust the V in MVC
Virtual DOM
Components
![Page 13: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/13.jpg)
Thinking in React
![Page 14: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/14.jpg)
Thinking in React
![Page 15: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/15.jpg)
Code
![Page 16: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/16.jpg)
Flux ArchitectureUnidirectional data flow
![Page 17: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/17.jpg)
ReduxState Container
Actions & Reducers
Initial State State 2Reducer 1 State 3Reducer 2 ... State 100
Initial State State 2Reducer 1 State 3Reducer 2 ... State 100
![Page 18: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/18.jpg)
Code
![Page 19: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/19.jpg)
What to do next?Use Immutable.js
Use reselect
![Page 20: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/20.jpg)
Referenceshttps://github.com/abdulsattar/workshop23.git
‘complete’ branch
Contact: [email protected]
![Page 21: Modern frontend in react.js](https://reader035.fdocuments.us/reader035/viewer/2022062400/588a0dea1a28ab132f8b525f/html5/thumbnails/21.jpg)
Thank You!