ReactJs Tutorials
what is React 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.
ES6 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.
File name : index.php
<!DOCTYPE html>
<html>
<body>
<script>
class Car {
constructor(name) {
this.brand = name;
}
}
const mycar = new Car("Sana");
document.write(mycar.brand);
</script>
</body>
</html>
Note: The constructor function is called automatically when the object is initialized.
Method in Classes
File name : index.php
<!DOCTYPE html>
<html>
<body>
<script>
class Car {
constructor(name) {
this.brand = name;
}
present() {
return 'I have a ' + this.brand;
}
}
const mycar = new Car("Ford");
document.write(mycar.present());
</script>
</body>
</html>
Class Inheritance
To create a class inheritance, use the extends keyword.
File name : index.php
<!DOCTYPE html>
<html>
<body>
<script>
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
}
}
const mycar = new Model("Ford", "Mustang");
document.write(mycar.show());
</script>
</body>
</html>
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
Arrow functions allow us to write shorter function syntax:
File name :
<!DOCTYPE html>
<html>
<body>
<h1>Arrow Function</h1>
<p>A demonstration of a simple arrow function.</p>
<p id="demo"></p>
<script>
hello = () => {
return "Hello World!";
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
If the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword:
Arrow Functions Return Value by Default:
File name :
<!DOCTYPE html>
<html>
<body>
<h1>Arrow Function</h1>
<h2>Implicit Return</h2>
<p>The arrow function expects a return value, and returns the value by default, without the <strong>return</strong> keyword.</p>
<p id="demo"></p>
<script>
hello = () => "Hello World!";
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
Arrow Function With Parameters:
File name :
<!DOCTYPE html>
<html>
<body>
<h1>Arrow Function</h1>
<p>A demonstration of an arrow function in one line, with parameters.</p>
<p id="demo"></p>
<script>
hello = (val) => "Hello " + val;
document.getElementById("demo").innerHTML = hello("World");
</script>
</body>
</html>
In fact, if you have only one parameter, you can skip the parentheses as well:
.Arrow Function Without Parentheses:
File name :
<!DOCTYPE html>
<html>
<body>
<h1>Arrow Function</h1>
<p>As you can see in this example, you can skip the parentheses when you have only one parameter.</p>
<p id="demo"></p>
<script>
hello = val => "Hello " + val;
document.getElementById("demo").innerHTML = hello("World");
</script>
</body>
</html>
File name :
File name :
File name :
File name :
File name :