其实我就是想知道React是干嘛用的，有什么用，和其他的比起来好用在哪？

既然要学就先看下官网是如何介绍的，Google或者百度React 然后出现了官网，（英语太烂就先看中文网）
第一句话就是“用于构建用户界面的javascript库”，好吧还是不太了解到底是干嘛的。（罗里吧嗦的没什么有用的，这就是自己没事瞎写的，感觉这样好玩才这样记）
先不着急开始，先看看首页都有啥东西
出现了三个说明文字那就先读一读说的啥

声明式

React可以非常轻松的创建用户交互界面。（哪里轻松一会要试试）为你应用的每一个状态设计简洁的视图（就是封装了一堆常用交互类库呗，和jquery啥区别？）在数据改变时，React也可以高效的更新渲染界面（同步更新？）。以声明式编写UI（啥是声明式），可以让你的代码更加可靠，且方便调试。（更加可靠什么鬼？）

组件化

创建好拥有各自状态的组件（就是模块分类呗），再由组件构成更加复杂的界面。（然后模块整合）无需再用模板代码（那就是替代html界面咯）通过使用javascript编写的组件你可以更好的传递数据，将应用状态和DOM拆分开了（这个好处到底在哪？）

一次学习，随处编写

无论你现在正在使用什么技术栈（啥是技术栈，jquery算不），你都可以随时引入React开发新特性。（具体啥特性我现在还不知道呢？）React也可以用作开发原生应用框架ReactNative

看完了后虽然还是不了解，但是却有一些想要知道了解的地方，那就继续往下看吧。开始有使用例子了

组件

React组件使用一个名为render()的方法,接收数据作为输出（我已经偷偷的用笔记下了render这个单词‘给予’，英语这么烂为什么还要学编程。。我愿意管得着吗）输出页面中对应展示的内容。（就和js中write()差不多）下面示例中类似XML的写法被称为JSX。输入的数据通过this.props传入render()方法。

class helloWorld extends React.Component {
  render() {
    return (
      <div>
        Hello  {this.props.name}
      </div>
    )
  }
}

ReactDOM.render(
  <HelloWorld name="duxian" />,
  mountNode
);

使用React的时候也可以不使用JSX语法，你可以在Babel REPL 查看JSX是如何被渲染成原生javascript代码的

有状态组件

除了使用外部传入的数据以外（通过this.props访问传入数据），组件还可以拥有其内部的状态数据（通过this.state访问状态数据）。当组件的状态数据改变时，组件会调用render()方法重新渲染。

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {jishi : 0};
  }

  tick() {
    this.setState(prevState => ({
      jishi: prevState.jishi + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000); 
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>计时开始：{this.state.jishi}</div>
    );
  }
}

ReactDOM.render(
  <Timer />,mountNode
);

应用

使用props和state,我们可以创建一个简易的TODO应用，下面这个示例中，我们使用state来保存现有的待办事项列表及用户的输入。与此同时，我们也使用了内联的方法添加了事件处理函数，他们将通过事件代理被收集和调用。

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {items:[],text:''};
    this.handleSubmit=this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  render() {
    return (
      <div>
        <h3>Todo</h3>
        <TodoList items={this.state.items} / >
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.handleChange} value={this.state.text} />
          <button>Add #{this.state.items.length + 1}</button>
        </form>
      </div>
    );
  }
  
  handleChange(e){
    this.setState({text:e.target.value})
  }

  handleSubmit(e){
    e.preventDefault();
    if(!this.state.text.length){
      return;
    }
    const newItem={
      text:this.state.text,
      id:Date.now()
    }
    this.setState(prevState => ({
      items:prevState.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component{
  render(){
    return (
      <ul>
        {this.props.items.map(item =>(
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    )
  }
}

ReactDOM.render(<TodoApp />, mountNode);

在组件中使用第三方库

React 是使用非常灵活，并且提供了可以调用其他第三方框架或库的接口。下面这个示例就使用了一个用来渲染Markdown语法，名为remarkable的库。它可以实时转换渲染<textarea>里的内容。

class MarkdownEditor extends React.Component{
  constructor(props){
    super(props);
    this.state = {value: '# React提供了第三方框架接口。'}
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e){
    this.setState({value:e.target.value});
  }
  
  getRawMarkup() {
    const md = new Remarkable();
    return { __html: md.render(this.state.value)}
  }

  render(){
    return(
      <div className="MarkdownEditor">
        <h3>输入框</h3>
        <textarea onChange={this.handleChange} defaultValue={this.state.value}/>
        <h3>输出</h3>
        <div className="content" dangerouslySetInnerHTML={this.getRawMarkup()}>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<MarkdownEditor />, mountNode);

*注意方法名的大小写书写格式。