本教程操作环境：windows7系统、ecmascript 6&&react18版、dell g3电脑。
react是什么react.js是 facebook 推出的一个用来构建用户界面的 javascript 开发框架。
react 是一个声明式，高效且灵活的用于构建用户界面的 javascript 库。使用 react 可以将一些简短、独立的代码片段组合成复杂的 ui 界面，这些代码片段被称作“组件”。
由于 react的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 web 开发的主流工具。
react 是一个为数据提供渲染为 html 视图的开源 javascript 库。react 视图通常采用包含以自定义 html 标记规定的其他组件的组件渲染。react 为程序员提供了一种子组件不能直接影响外层组件的模型，数据改变时对 html 文档的有效更新，和现代单页应用中组件之间干净的分离。
react的优势是：
更适合大型应用和更好的可测试性
web端和移动端原生app通吃
更大的生态系统，更多的支持和好用的工具
比较适合中大型项目
es6是什么es6全称ecmascript6（ecmascript的第6个版本），是于2015年6月正式发布的javascript语言的标准，正式名为ecmascript 2015（es2015）。
ecmascript 6 目前基本成为业界标准，它的普及速度比 es5 要快很多，主要原因是现代浏览器对 es6 的支持相当迅速，尤其是 chrome 和 firefox 浏览器，已经支持 es6 中绝大多数的特性。
在此后ecma script每年发布一个大版本新增加一些重要特性，我们称之为es6+。
了解es和js之间的关系
es = ecmascript 是一个动态脚本语言的‘标准’，js = javascript是对es的标准，默认，主流的‘实现’，由于商标权的问题，欧洲计算机协会制定的语言标准不能叫做js，只能叫es；
es6新标准的目的是：使得js可以用来开发大型的web应用，成为企业级开发语言。而企业级开发语言就是：适合模块化开发，拥有良好的依赖管理；
为什么要学es6？es6的用处是什么？
es5不能满足目前前端越来越复杂，庞大的现状，可以说已经过时了，es6是对es5的增强和升级。
1.主流的浏览器都已经全面支持es6
2.行业内较新的前端框架都已经全面使用es6的语法
3.微信小程序,uni-app等都是基于es6的语法
4.从就业出发，中小型公司，全栈，简历上多一个技能，试用期也能更快的上手。
变量
let
一个作用域中只能声明一个let变量，若子作用域中也声明了let变量，则不影响父作用域中的let变量。var
一个作用域中可以声明多个var变量，若子作用域中也声明了var变量，也在影响父作用域中的var变量。const
常量，相当于final，不可被修改。global
不声明变量类型的变量默认为全局变量(window属性)。面向对象
原理
javascript 的面向对象特性是基于原型和构造函数的，与常见的基于类的不同。javascript 没有 提供对象继承的语言级别特性，而是通过原型复制来实现的。三种创建对象方法 1. {pojo}（实例变量、实例方法、get、set） 2. function（实例变量、实例方法、prototype、apply、call） 3. class（实例变量、实例方法、prototype、extends、super）
prototype
只有函数、class才有原型，意义在于动态添加实例变量和实例方法及实现继承。
继承
call/apply
应用在继承关系中，子类向父类传参时应用此关键字extends
继承关系中使用，a extends b，则a是b的父类super
在子类中调用父类的方法时应用次关键字es5继承方式
接下来我们手写一套组合继承（原型链继承（继承原型） + 构造继承（继承属性））。这种方式即可避免原型链继承中无法实现多继承，创建子类实例时，无法向父类构造函数传参的弊端，也可避免构造继承中不能继承原型属性/方法的弊端。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继承方式
es6的继承创造了一种新的写法，与java、scala等语言非常类似，默认使用组合继承（原型链继承（继承原型） + 构造继承（继承属性））的方式。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
箭头函数，是es6中新加入的语法，于java的lambda，scala的函数式语法非常相似
代码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
模版字符串，字符串拼接的新语法
代码var templatestr = () => { var str1 = "adsf\nsdfa"; var template1 = `<ul><li>first</li> <li>second</li></ul>`; 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
重构/解构，变量交互的语法
代码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
实参，es6中加入的直接读取参数的变量
代码function argumentstest(a,b) { for(let val of arguments) {console.log(val) }}
【相关推荐：javascript视频教程、编程视频】
以上就是react和es6是什么的详细内容。