JSX语法、事件绑定与列表渲染

1.JSX函数与render函数

class App extends Component {
    const hello="hello jsx";	
	render() {
	    return (
           <div className="app">
              <h1>Todos</h1>
              <h2>running</h2>
              <h2>{hello}</h2>
           </div>
	)}}

上面代码就是JSX语法，由render作为它的入口函数，并且最外围的容器是唯一的。在15.x版本以下render函数只能包含一个容器。其他所有的结构都放在<div>中。

在JSX中访问变量，需要加大括号，如访问hello变量。

在JSX中插入JavaScript表达式也一样，直接在JSX中将JS表达式用大括号括起来即可

{this.handleKeyUp.bind(this)}

JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 {  开头），就用 JavaScript 规则解析。

JSX的编译过程：有如下JSX语法

<div className=