几个月前，就开始耕耘react了。网上七七八八的教程老又杂，包括一些react的一些书籍也都是很早之前的。虽说一些原理还是相通的，但是不建议新手学习(特别是0.14之前的版本简直是误人子弟)。踩了太多的坑了，拿出来先分享一下，我们学习之前，其实可以来分析分析react或者说框架什么的。
首先，作为一个新时代的web前端高级工程师，记住是高级。那么多的框架和技术，学习是很有必要的，但是别跟风学。所有的框架都是为了简化开发难度的，也不用害怕。并且像angular、react、vue。被说成是mvc、v、mvvm什么乱七八糟的想怎么定义都行，一句话解释就是为了简化DOM操作。其中，react并不是一套完整的解决方案，以至于常在口边念叨的react其实是一套全家桶，建厂生产加工包装销售的一条龙服务。react、redux\flux、react-dom、jsx\babel、react-router、webpack、Sass\Less、ES6\ES5、node\npm等一些列解决方案来构建react app。
这么多东西，我们当然是需要些基础的，但是呢，没必要一个个学，如果你不知道是否需要它，那就是不需要它，这里我们用的技术全都是最新的。
第一、react
参考资源：react官网
创建一个虚拟DOM有很多种方法，但是我们结合es6最新的语法class，所以如果我们自己在网上看到的些，都是官方不推荐的做法，比如createElement()、React.createClass()、更有甚者用React.render()输出虚拟DOM到页面，这都是0.14之前的版本，太老了会误导我们。0.14的版本把react分成了react和react-dom两个部分
//ES6的语法导入react import React from “react”; //React.Component这个React内置的构造函数上继承一些有用的方法。比如钩子函数等。 //class里面的方法与方法之间千万别加 ‘ , ’ class App extends React.Component { //render方法是必须的 render() { //为了避免JavaScript自动添加分号的机制给我们带来麻烦，在换行的JSX外面添加一对小括号 return ( …JSX… ) } } //以下写法和上面是等价的 import React,{ Component } from “react”; class App extends Component { render() { return ( …JSX… ) } }
react的生命周期，创建期getInitialState初始化状态、getDefaultProp设置默认属性在es6里面都就没必要这么麻烦了，
//初始化默认状态 class Counter extends Component { //构造函数，组件实例化的时候会首先执行。 constructor(props) { // ES6中类的constructor函数可以通过super访问其父类的构造函数 super(props); this.state = { count: props.initialCount }; } render() { // … } } //设置默认属性 Counter.defaultProps = { initialCount: 0 };
第二、jsx/babel
使用jsx很容易就创建虚拟DOM，babel是可以把es6转成es5，编译jsx，甚至可以吧es6转成es7。官方推荐的语法糖。
import React,{ Component } from “react”; class App extends Component { render() { var class=’box’; return ( //jsx只有一个顶级元素,所以在两个div最外面再套一个div。 //HTML怎么写，jsx就怎么写。 //{} 里面写js <div className={class} style={ {color:red}}>{/这里是注释/}