How does React Work?
React creates a VIRTUAL DOM in memory.
Instead of manipulating the browser's DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM.
React only changes what needs to be changed!
React finds out what changes have been made, and changes only what needs to be changed.
What is ES6?
ES6 stands for ECMAScript 6.
ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was published in 2015, and is also known as ECMAScript 2015.
Why Should I Learn ES6?
React uses ES6, and you should be familiar with some of the new features like:
Classes
ES6 introduced classes.
A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class, and the properties are assigned inside a constructor() method.
Example
A simple class constructor:
class Car {
constructor(name) {
this.brand = name;
}
}
Now you can create objects using the Car class:
Example
Create an object called "mycar" based on the Car class:
class Car {
constructor(name) {
this.brand = name;
}
}
mycar = new Car("Ford");
Note: The constructor function is called automatically when the object is initialized.
You can add your own methods in a class:
Create a method named "present":
class Car { constructor(name) { this.brand = name; } present() { return 'I have a ' + this.brand; }} mycar = new Car("Ford");mycar.present();
As you can see in the example above, you call the method by referring to the object's method name followed by parentheses (parameters would go inside the parentheses).
To create a class inheritance, use the extends keyword.
A class created with a class inheritance inherits all the methods from another class:
Create a class named "Model" which will inherit the methods from the "Car" class:
class Car { constructor(name) { this.brand = name; } present() { return 'I have a ' + this.brand; }} class Model extends Car { constructor(name, mod) { super(name); this.model = mod; } show() { return this.present() + ', it is a ' + this.model }}mycar = new Model("Ford", "Mustang");mycar.show();
The super() method refers to the parent class.
By calling the super() method in the constructor method, we call the parent's constructor method and gets access to the parent's properties and methods.
Arrow functions were introduced in ES6.
Arrow functions allow us to write shorter function syntax:
hello = function() { return "Hello World!";}
hello = () => { return "Hello World!";}
It gets shorter! If the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword:
hello = () => "Hello World!";
Note: This works only if the function has only one statement.
If you have parameters, you pass them inside the parentheses:
hello = (val) => "Hello " + val;
In fact, if you have only one parameter, you can skip the parentheses as well:
hello = val => "Hello " + val;
The handling of this is also different in arrow functions compared to regular functions.
In short, with arrow functions there are no binding of this.
In regular functions the this keyword represented the object that called the function, which could be the window, the document, a button or whatever.
With arrow functions, the this keyword always represents the object that defined the arrow function.
Let us take a look at two examples to understand the difference.
Both examples call a method twice, first when the page loads, and once again when the user clicks a button.
The first example uses a regular function, and the second example uses an arrow function.
The result shows that the first example returns two different objects (window and button), and the second example returns the Header object twice.
With a regular function, this represents the object that called the function:
class Header { constructor() { this.color = "Red"; } //Regular function: changeColor = function() { document.getElementById("demo").innerHTML += this; }} myheader = new Header(); //The window object calls the function:window.addEventListener("load", myheader.changeColor); //A button object calls the function:document.getElementById("btn").addEventListener("click", myheader.changeColor);
With an arrow function, this represents the Header object no matter who called the function:
class Header { constructor() { this.color = "Red"; } //Arrow function: changeColor = () => { document.getElementById("demo").innerHTML += this; }} myheader = new Header(); //The window object calls the function:window.addEventListener("load", myheader.changeColor); //A button object calls the function:document.getElementById("btn").addEventListener("click", myheader.changeColor);
Remember these differences when you are working with functions. Sometimes the behavior of regular functions is what you want, if not, use arrow functions.
Before ES6 there were only one way of defining your variables: with the var keyword. If you did not define them, they would be assigned to the global object. Unless you were in strict mode, then you would get an error if your variables were undefined.
Now, with ES6, there are three ways of defining your variables: var, let, and const.
var x = 5.6;
If you use var outside of a function, it belongs to the global scope.
If you use var inside of a function, it belongs to that function.
If you use var inside of a block, i.e. a for loop, the variable is still available outside of that block.
var has a function scope, not a block scope.
let x = 5.6;
let has a block scope.
let is the block scoped version of var, and is limited to the block (or expression) where it is defined.
If you use let inside of a block, i.e. a for loop, the variable is only available inside of that loop.
const x = 5.6;
const is a variable that once it has been created, its value can never change.
const has a block scope.
The ReactDOM.render() function takes two arguments, HTML code and an HTML element.
The purpose of the function is to display the specified HTML code inside the specified HTML element.
Display a paragraph inside the "root" element:
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));
The result is displayed in the <div id="root"> element:
<body> <div id="root"></div> </body>
Systems