React Prerequisites Cheatsheet

Pre-requisites to learn React

Good to know

• Server Side Rendering (SSR), Client Side Rendering(CSR )
• JSX
• Transpiling (Babel)
• PWA (Progressive Web App)
• Chrome V8, Node, NPM
• TypeScript (Strict syntactical superset of JavaScript)

---

• Impure Functions with Side Effects & Pure Functions
  Maintaining referential transparency

• Stateful & Stateless
  Pure functions are stateless

• Mutability & Immutability
  By design JS is mutable
Object.freeze(obj), npm deep-freeze
immutable.js, support from Lodash, underscorejs
Immutable state tree is a must in Redux

• Imperative (how: for), Declarative (what: .map)

• Higher-order Functions

---

• Functional Programming with JS
• Observables (streams) Hot & Cold
• Reactive Programming (RxJS)
  Propagating and responding to incoming events over time, declaratively

---

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 has function scope, i.e its accessible inside the function it declared

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]());
        

• let block scope
• const also block scope

---

Arrow functions

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

let square = inp => inp ** 2

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

<br>

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"
  }
}

---

Example Projects:

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