React JS

Pre-requisite:
--------------
1) Basic knowledge of JavaScript, HTML and CSS is required
2) ES6 new features.
3) Knowledge of Angular framework is advantage (optional)

Introduction:
-------------
1) It is a JavaScript library created by Facebook in 2011.
2) Every application is basically divided into 3 parts:
a) UI/Presentation Layer
b) Business Layer
c) Data Layer
3) React JS is a library used for creating UI.
4) It is used by Instagram and Netflix.
5) React - library - Only render the view and synch the
state of component.
6) Component - Main part of React JS.
7) A component is a piece of UI.
8) when we develop an application, we create a bunch of
independent isolated and reusable components, finally
combine all the components to create complex UI.
9) Used to create Single Page Applications (SPA)
10) We can build modern, fast Single Page Applications or
websites with React.

Q. Is React JS a Library or a Framework?

Ans: React is a Library, not a Framework.

Q. What is a Library?
-- A library in programming can be explained as a collection
of codes. We use a library to write code in a much
simpler way or to import a feature from it into our
project.
-- For e.g. jQuery is a library.
-- We can write JavaScript much simpler by using jQuery, or
we can import written jQuery features to our project.
The project itself is not dependent on a library.
 Q. What is a Framework?
-- A Framework, on the other hand, is a complete package of
code with its own functionalities & libraries.
-- A framework has its own rules, you don’t have much
flexibility and the project is dependent on the framework
you use.
-- Angular is an example of a framework.

How React actually works?

-------------------------
React Virtual DOM:

• To understand the importance of React Virtual DOM, first,

you need to know what DOM (Document Object Model) is.
• DOM is basically the representation of the HTML code in a
webpage. The document is the webpage itself, the objects
are the HTML tags. And finally, the model of DOM is a tree
structure:

What is the benefit of Virtual DOM?

• Each time you make a change in the code, DOM will be

completely updated and rewritten. This is an expensive
operation and consumes lots of time. In this point, react
provides a solution: The Virtual DOM.
• So when something changes:
1. React first creates an exact copy of the DOM
 2. Then React figures out which part is new and only
updates that specific part in the Virtual DOM
3. Finally, React copies only the new parts of the
Virtual DOM to the actual DOM, rather than completely
rewriting it.
4. This approach makes a webpage much faster than a
standard webpage. That’s also one of the reasons why
React is so popular.

Software required:
-------------------

1) NodeJS
2) Visual Studio Code.

Setup development environment:

------------------------------

> npm install -g create-react-app

[We install this package to setup our react project]

> create-react-app <project-name>

> create-react-app hello-world

OR

> npx create-react-app hello-world

(npx - node package runner)

-- Once application is ready, we can run our application using:

> npm start

-- We can access our application on browser:

http://localhost:3000

Some concepts of JavaScript that you should know before learning React:
-----------------------------------------------------------------------

1) var vs let vs const

2) Objects in JavaScript
 3) this keyword
4) bind() method
5) Arrow functions
Arrow Functions and "this" keyword
6) Arrays.map() method
7) Object Destructuring
8) spread operator
9) Classes
10) Inheritance

1) let vs var vs const

-----------------------

function sayHello() {
for(var i = 0; i < 5; i++) {
console.log(i);
}
}
sayHello();

scope of variable - block in which variable is accessible.

Modify the above function

function sayHello() {
for(var i = 0; i < 5; i++) {
console.log(i);
}
console.log(i)
}
sayHello();

var - If we define variable with the var keyword, then that variable
will be accessible inside the function in which it is defined.

ES6/ES2015 - Introduced let keyword.

function sayHello() {
for(let i = 0; i < 5; i++) {
console.log(i);
}
console.log(i); //will get an error here.
}

sayHello();
 var -> scope - function
let -> scope - block

ES6 - const keyword.

const -> block scope - can't change the value.

const x = 1;
x = 2; //error here x is read-only.

2) Objects:
-----------

Objects in JavaScript are collection of key-value pairs.

const person = {
name: "Alex",
age: 34,
walk() {},
run: function() { }
}

console.log(person.name)
person.walk()
person.run()
console.log(person['age'])

3) this keyword:
----------------

const person = {
name: "Alex",
age: 31,
walk() {
console.log(this);
}
}

person.walk();
 case 2:
-------

const person = {
name: "Alex",
age: 31,
walk() {
console.log(this);
}
}

walk = person.walk; //assigning reference of walk() function.

walk();

Note: output of "this" depends on how we call the function.

• If we call a function as method in an object, this always refer
to that object.
• If we call a function as a standalone object or outside of an
object, this refers to global object i.e. window object of
browser.
• If we call, walk() function on person object, this refers to
person object.

4) bind() method:
-----------------

How we can fix the problem of "this" keyword?

• Functions are objects in JavaScript.

• One of the methods is bind() method. Use of this method is to
bind the function to an object.
• walk = person.walk.bind(person);

Complete Example
-----------------

const person = {
name: "Alex",
age: 31,
walk() {
console.log(this);
}
}
 walk = person.walk.bind(person); //assigning reference of walk()
//function.
walk();

• person.walk.bind(person) will return new instance of a walk()

function and set "this" to point to person object.

5) Arrow functions:
-------------------

const square = function(number) { // Regular function

return number * number;
}

const square = number => number * number; // Arrow function

square(5); // calling a function

const jobs = [
{id: 1, isActive: true},
{id: 2, isActive: true},
{id: 3, isActive: false}
]

Find all active jobs.

const activeJobs = jobs.filter(function(job) {

return job.isActive;
})

const activeJobs = jobs.filter(job => job.isActive);

-----------------------------------
Arrow functions and "this" keyword:
-----------------------------------

• Arrow functions don't rebind "this". Arrow functions inherit

"this".
const person = {
name: "Alex",
age: 32,
walk() {
console.log("this", this);
}
}
person.walk();

Modify the above code:

----------------------

const person = {
name: "Alex",
age: 32,
walk() {
setTimeout(function() {
console.log("this", this);
}, 1000)
}
}
person.walk(); //output: window object.

• This callback function is not a part of any object, that's why

"this" refers to window object.
• It is a standalone function.

How to solve this problem? How can I get reference to person object
in callback function?
--------------------------------------------------------------------

Old way:
--------

const person = {
name: "Alex",
age: 32,
walk() {
var self = this;
setTimeout(function() {
console.log("self", self); // this -> person object
}, 1000)
}
}
person.walk();
New way: use arrow functions
----------------------------

const person = {
name: "Alex",
age: 32,
walk() {
setTimeout(() => {
console.log("this", this); // this -> person object
}, 1000)
}
}
person.walk();

Note: Arrow functions inherit "this" keyword.

Let's summarize:
----------------

1) const person = {
name: "Alex",
age: 32,
walk() { // Regular function
console.log(this); // person object
}
}

person.walk(); // output: person object

2) const person = {
name: "Alex",
age: 32,
walk() {
setTimeout(function() {
console.log("this", this); // window object
}, 1000);

console.log(this); // this refers to person object

}
}
person.walk();
3) const person = {
name: "Alex",
age: 32,
walk() {
var self = this; // assigning this (person object)
// to self.
setTimeout(function() {
console.log("this", self); //self -> person object
}, 1000);

console.log(this); // this refers to person object

}
}
person.walk();

4) const person = {
name: "Alex",
age: 32,
walk() {
//inside walk(), this ----> person object
// person object [using arrow function]

setTimeout(() => console.log("this", this), 1000);

console.log(this); // this refers to person object

}
}
person.walk();

5) const person = {
name: "Alex",
age: 32,
walk: () => {
console.log(this); //window object
}
}
person.walk();