react和react jsx基础

本文是个人学习笔记，例子都是来自React Native官网。之前不是做前端的，没有使用过react，要学习react native做混合开发，react，包括react jsx还是得补补。

react和react jsx

react是一个js库。有很多可以用的方法，react jsx是对javascript进行封装，提供一种类似于xml格式的语句，跟html也类似，使得在js中创建、修改元素，建立元素之间的层级关系变得更加直观方便。jsx在执行的时候会被转换为js语句。
例如：
<input type=“button"/>;
这样就相当于调用了
React.createElement()方法来创建一个button
在jsx中可以使用js语句，但是要用花括号括起来，比如：
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
jsx中，元素可以直接嵌套，这个和html、xml都是一样的。
jsx中，布尔值用{true}和{false}表示。
jsx中，插入注释，就是用/* 注释 */

react和jsx混合起来，数据绑定的实现

假如有一个这样的数据（js定义的数据）

var data = [
  {
  id: 1, author: "Pete Hunt", text: "This is one comment"},
  {
  id: 2, author: "Jordan Walke", text: "This is *another* comment"}
];

希望建立一个列表，其中每一项，展示以上data中的一条数据：
于是定义一个CommentList的组件，其中每一项是一个Comment对象（假设之前已经定义好了Comment组件）。

var CommentList = React.createClass({
  //创建一个组件，或者理解成创建一个类也可以
  render: function() {
   //render函数是在组件声明周期中会被自动调用的方法之一，作用是返回组件的内容
    var commentNodes = this.props.data.map(function(comment) {
   
//这个comment参数对于data中的一条记录，map函数会为this.props.data的每一条记录调用一次这个function(comment)方法。每次调用都返回一个Comment组件对象，最终返回一个包含多个Comment的数组。
      return (
        <Comment author={comment.author} key={comment.id}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}//包含CommentNodes，由于是js，所以用花括号括