React Study Note1

jsx语法

前端MVVM主流框架都有一套自己的模板处理方法，react则使用它独特的jsx语法。在组件中插入html类似的语法，简化创建view的流程。

原生元素

ReactDOM.render((
  <div>
    <h1>标题</h1>
  </div>
), document.getElementById('root'))

通过简单的语法页面就会被插入一个div+一个h1标签。原生的html元素可以被直接使用。以上的语法并不是js支持的语法，需要被转换之后才能运行。

自定义元素

react强大之处就在于可以组件的自定义，实现组件的复用。如果我们创建了一个组件。我们也可以通过jsx语法调用。
import * as React from ‘react’

class Page extends React.Component {
  render() {
    return (<div>
      home111 &copy;
    </div>)
  }
}

ReactDOM.render((
  <div>
    <Page/>
  </div>
), document.getElementById('root'))

我们定义了一个Page组件，可以在jsx里面像调用html一样直接调用。