React Prerequisites


Terminology




Javascript versions

Version Year Version Features added
5 2009 ECMAScript 5 strict mode, JSON support
6 2015 ECMAScript 2015 (ES 6) let, const, Modules, Promises, Classes & Inheritance, Template Literals, Object destructing, Generators, Map and Set, default parameter values
7 2016 ECMAScript 2016 Array.includes(), **
8 2017 ECMAScript 2017 Async Functions, Object.entries
9 2018 ECMAScript 2018 Spread operator

JSON Support

const userObj = {
	name: "Foo",
	age : 27,
	roles : ["admin", "user"]
};

const userObjString = JSON.stringify(userObj);
const userObjFromString = JSON.parse(userObjString);


let, const


var arr = [ "zero", "one", "two" ];
var functions = [];

for(var i=0; i<arr.length-1; i++) {
	functions.push(function() {
		return arr[i];
	});
}
console.log('0:', functions[0](), '1:', functions[1]());
        

Arrow functions

let square = function(inp){
	return inp ** 3
}

let square = inp => inp ** 3

example

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

const squaresOfEvenNumbers = numbers
.filter(ele => ele % 2 == 0)
.map(ele => ele ** 2);
.reduce((acc, ele) => acc + ele);

console.log(squaresOfEvenNumbers);



String templating


let name = 'foo';
console.log(`hello ${name} 2+2 is ${2+2}`);


Object Destructuring

let user = { firstName: "foo", lastName: "bar", 
	     age: 27, junk: "bla"};

// Assigning to variables
let {firstName, age} = user;
let {firstName : f, age : a} = user;

// Using methods
function displayUserAge({firstName, age}){
	console.log(`${firstName}'s age: ${age}`)
}

Default Values

function setName(name = "NA"){
	return name;
};
console.log(setName()); // NA
console.log(setName("foo")); // foo

func = function({x = 10,y = 11,z = 12} = {x:1,y:2,z:3}) {
    console.log(x,y,z);
};

func(); // ?
func({}); // ?


Default Values

function setName(name = "NA"){
	return name;
};
console.log(setName()); // NA
console.log(setName("foo")); // foo

func = function({x = 10,y = 11,z = 12} = {x:1,y:2,z:3}) {
    console.log(x,y,z);
};

func(); //1 2 3  (hits the object literal default)
func({}); //10 11 12   (hits the value defaults)


Spread Operators

const naturalNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const wholeNumbers = [0, ...naturalNumbers];

const negativeNumbers = naturalNumbers.map(ele => -ele);

const integers = [...negativeNumbers, ...wholeNumbers];

Example

let obj = {a: 1, b:2, c:3, d:4, e: 5, f:6, g: 7};

let{a, b, ...others} = obj;


Fetch API

//GET
fetch('https://jsonplaceholder.typicode.com/todos')
      .then(res => res.json())
      .then(json => console.log(json))

//FORM POST
const userObj = {name: "Foo"}

fetch([url], { method: 'POST',
		body: Json.stringify(userObj)})
		.then(res => res.text())
		.then(text => console.log(text))


Flow Generators, Promise, Async & Await

async getTodos(userObj){
	const res = await fetch([url]);
	const data = await res.json()    
	return data;
}

let data = await getTodos({fn: "foo"});


Classes

Classes are Functions (Functions are Objects)

class User{

	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
    
	sayHello(){
		return `Hi ${this.name}`
	}
}

const user1 = new User('foo', 27);
const user2 = new User('bar', 28);


Module system

\utils.js
--------

const username = "foo";
const password = "bar";

const config = { maxConn: 10, delay: 30000 };

function connect(username, password){
	return connection;
}

export { username, password };
export config;
export default connect; // at most one


\index.js
---------
import connect, {username as foo, config} from './utils.js';


Classes with module system

user.js
-------
class User{

	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
    
	sayHello(){
		return `Hi ${this.name}`
	}
}
export default User;

index.js
--------
import User from './user.js';

const user1 = new User('foo', 27);
const user2 = new User('bar', 28);


NPM

{
  "name": "my_package",
  "version": "1.0.0",
  "dependencies": {
    "my_dep_1": "2.1.0",
	"my_dep_2": "~version", // allows patch 
	"my_dep_3": "^version", // allows patch and minor updates
	"my_dep_4": "=version", // "my_dep_4": "version",
	"my_dep_5": ">version",
	"my_dep_6": ">=version",
	"my_dep_7": "<version",
	"my_dep_8": "<=version",
	"my_dep_9": "*",
	"my_dep_10": "latest",
  },
  "devDependencies" : {
    "my_test_framework": "3.1.0"
  }
}

Sample Code

https://codesandbox.io/s/4xx659x11x

https://github.com/karthikdivi/spring-react-material-boilerplate