React js t3 - es6
0 likes230 views
ES6 introduced several new features to JavaScript including classes, arrow functions, and new variable types. Classes allow for object-oriented programming with the class keyword. Methods and properties can be defined within classes. Arrow functions provide a concise syntax for writing anonymous functions. Variables can now be defined using let and const, which have block scoping, in addition to var which has function scoping.
React js t3 - es6
- 1. ReactJs : Tutorial-02 – ES6 ES6 – ECMAScript 6 Standardized JavaScript Version 6 in 2015 (ECMAScript 2015) ReactJs uses ES6 New Features: o Classes o Arrow Functions o Variables (let, const, var) ES6 – Class: A class is a type of function. Property in constructor. Example: class Car { constructor(name) { this.brand = name; } } mycar = new Car("BMW"); Method in Classes class Car { constructor(name) { this.brand = name; } present() { return 'I have a ' + this.brand; } } mycar = new Car("Ford"); mycar.present(); Output I have a Ford
- 2. ReactJs : Tutorial-02 – ES6 Class Inheritance To create a class inheritance, use the extends keyword. A class created with a class inheritance inherits all the methods from another class: Example 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();
- 3. ReactJs : Tutorial-02 – ES6 Arrow Functions Arrow functions were introduced in ES6. Arrow functions allow us to write shorter function syntax: Before: hello = function() { return "Hello World!"; } With Arrow Function: hello = () => { return "Hello World!"; } Arrow Functions Return Value by Default: hello = () => "Hello World!"; Arrow Function With Parameters: hello = (val) => "Hello " + val; Arrow Function Without Parentheses: hello = val => "Hello " + val;
- 4. ReactJs : Tutorial-02 – ES6 Variables Before ES6 there were only one way of defining your variables: with the var keyword. Now, with ES6, there are three ways of defining your variables: var, let, and const. var has a function scope, not a block scope. let has a block scope. const has a block scope. const is a variable that once it has been created, its value can never change.