What are react and es6

react is a declarative, efficient and flexible JavaScript development framework launched by Facebook for building user interfaces; it provides programmers with a model in which sub-components cannot directly affect outer components. When data changes Efficient updates to HTML documents and clean separation between components in modern single-page applications. es6 is the next version standard of JavaScript. Its goal is to make the JavaScript language can be used to write complex large-scale applications and become an enterprise-level development language.

The operating environment of this tutorial: windows7 system, ECMAScript 6&&react18 version, Dell G3 computer.

What is react

react.js is a JavaScript development framework launched by Facebook for building user interfaces.

React is a declarative, efficient and flexible JavaScript library for building user interfaces. React allows you to combine short, independent code snippets into complex UI interfaces. These code snippets are called "components".

Because the design idea of ​​React is extremely unique, it is a revolutionary innovation, has outstanding performance, and the code logic is very simple. Therefore, more and more people are beginning to pay attention to and use it, thinking that it may be the mainstream tool for web development in the future.

#React is an open source JavaScript library that provides views of data rendered into HTML. React views are typically rendered using components that contain other components specified in custom HTML tags. React provides programmers with a model in which child components cannot directly affect outer components, efficient updates to HTML documents when data changes, and clean separation between components in modern single-page applications.

The advantages of React are:

• More suitable for large applications and better testability

• Web and mobile native APP take all

• A larger ecosystem, more support and easy-to-use tools

• More suitable for medium and large projects

What is es6

es6 full name is ECMAScript6 (the 6th version of ECMAScript), which was released in 2015 The JavaScript language standard officially released in June 2015 is officially called ECMAScript 2015 (ES2015).

ECMAScript 6 has basically become the industry standard, and its popularity is much faster than ES5. The main reason is that modern browsers support ES6 very quickly, especially Chrome and Firefox browsers, which already support Most features in ES6.

Since then, ECMA Script has released a major version every year to add some important features, which we call ES6.

Understand the relationship between ES and JS

ES = ECMAScript is a 'standard' for dynamic scripting languages, JS = JavaScript is the standard, default, and mainstream 'implementation' of ES. Due to trademark rights issues, the language standard formulated by the European Computer Association cannot be called JS, but can only be called ES;

The purpose of the new ES6 standard is: JS can be used to develop large-scale web applications and become an enterprise-level development language. The enterprise-level development language is: suitable for modular development and has good dependency management;

Why should you learn ES6? What is ES6 used for?

ES5 cannot meet the current situation where the front-end is becoming more and more complex and huge. It can be said to be outdated. ES6 is an enhancement and upgrade to ES5.

1. Mainstream browsers have fully supported ES6

2. Newer front-end frameworks in the industry have fully used ES6 syntax

3. WeChat applet , uni-app, etc. are all based on ES6 syntax

4. Starting from employment, small and medium-sized companies, full stack, one more skill on the resume, and the trial period can also get started faster.

Variable

• let
  Only one let variable can be declared in a scope. If the child If a let variable is also declared in the scope, it will not affect the let variable in the parent scope.
• var
  Multiple var variables can be declared in one scope. If a var variable is also declared in the child scope, it will also affect the var variable in the parent scope.
• const
  Constant, equivalent to final, cannot be modified.
• global
  Variables that do not declare a variable type default to global variables (window attributes).

Object-oriented

• Principle
  The object-oriented features of JavaScript are based on prototypes and constructors, which are different from the common ones based on classes. JavaScript does not provide language-level features of object inheritance, but does so through prototype copying.
• Three methods of creating objects

  1. {pojo}（实例变量、实例方法、get、set） 
  2. function（实例变量、实例方法、prototype、apply、call） 
  3. class（实例变量、实例方法、prototype、extends、super）

prototype

Only functions and classes Only prototypes exist, and their significance lies in dynamically adding instance variables and instance methods and implementing inheritance.

Inheritance

• ##call/apply In the inheritance relationship, the subclass applies to the parent This keyword should be used when passing parameters in a class
  
• extends Used in inheritance relationships, A extends B, then A is the parent class of B
  
• super ## This method of calling the parent class in the sub -category uses the keywords
  
## ES5 inheritance method
• # Next (prototype inheritance) constructor inheritance (inherited properties)). This method can avoid the disadvantages of being unable to implement multiple inheritance in prototype chain inheritance, being unable to pass parameters to the parent class constructor when creating a subclass instance, and also avoiding the disadvantages of being unable to inherit prototype properties/methods in constructor inheritance.
  

  function Person(name,age){                                             /* 父类 */
      this.name = name || 'father';                            //实例变量
      this.namesonF = this.nameson;
      this.age = age;
      this.talk = function(){alert("talk");};                 //实例方法
  };
  function Son(name){                                                     /* 子类 */
      this.nameson = name || 'son';
      // Person.call(this,'name',18);                          //继承：构造继承，复制父类的实例属性给子类，不能继承原型属性/方法
      Person.apply(this,['name',18]);                          //继承：构造继承，复制父类的实例属性给子类，不能继承原型属性/方法
  }
  // Son.prototype = new Person("zhangsan",19);                   //继承：原型链继承，父类的实例作为子类的原型，拷贝属性两次，不合理
  Son.prototype = Person.prototype;                            //继承：原型链继承，父类的实例作为子类的原型
  
  Person.prototype.publicParam="param1";                       //动态添加实例变量
  Person.prototype.talk=function(){alert("talk");}            //动态添加实例方法
  
  var son = new Son();                                         //实例化对象，调用构造函数(constructor)

ES6 inheritance method
• ES6 inheritance creates a new way of writing, which is very similar to Java, Scala and other languages, and uses combined inheritance by default ( Prototype chain inheritance (inheriting prototypes) construct inheritance (inheriting properties)).
  

  class Point {
      constructor(x, y) {
          this.x = x;                                           //实例变量
          this.y = y;
      }
  }
  class Son extends Point {
      constructor(z, w) {
          super(z,w);
          this.z = z;                                           //实例变量
          this.w = w;
      }
  }
  var son = new Son(1,2);

arrow functions Arrow function is a new syntax added in ES6, which is similar to Java's lambda and scala's functional expression. The syntax is very similar

code

• var single = a => console.log(a);
  var single = (a) => (console.log(a));
  var single = (a, b) => {console.log(a + b)};
  var single = (a, b) => {return a + b};

template string Template String, new syntax for string concatenation

Code

• var templateStr = () => {
      var str1 = "adsf\nsdfa";
  
      var template1 = `
  first
   
  second
  `;
  
      var x = 1;
      var y = 2;
      var template2 = `${x} + ${y} = ${x + y}`;
  
      var template3 = `${lettest4()}`;
      console.log(str1)
      console.log(template1)
      console.log(template2)
      console.log(template3)
  }

destructuring Reconstruction/deconstruction, syntax for variable interaction

Code

• var destructuring = () => {
      var [a,b,...c]=[1,2,3,4,5,6,7,8,9,10];
      let [temp="replaceString"] = ["tempString"];
      let [age2, [{name: fname},{age: fname2="replaceString"}]] = [20, [{name: 'qc'},{}]];
      const [aa,bb,cc,dd,ee,ff]="hello";
  
      let {name="replaceName",age,id}={name:'cursor',age:19,id:'vc6dfuoc91vpdfoi87s'};
      let {type:tipType,min:minNumber}={type:'message',min:20};
      let {sin,cos,tan,log}=Math;
  
      var fun = function({x,y}={}){return [x,y];}
      fun({x:100,y:2});
  
      [a,b]=[b,a];                                        //交换
  
      var map = [1,2,3]
      var map=new Map();
      map.set("id","007");
      map.set("name","cursor");
      for(let [key,value] of map){}
      for(let [key] of map){}
      for(let [,value] of map){}
  
      var arr = [1,2,3,4]
      for(let val of arr){val}
  
  }

arguments Actual parameters, variables added in ES6 to directly read parameters

Code

• function argumentsTest(a,b) { 
  	for(let val of arguments)
  		{console.log(val)
  	}
  }

[Related recommendations :

, programming video】

The above is the detailed content of What are react and es6. For more information, please follow other related articles on the PHP Chinese website!