react的学习

ReactDOM.render()

    ReactDOM.render(
          
Hello,world
,
          document.getElementById('example')
    );

  取到某一个dom，然后把上面的html放至dom中

JSX语法

  var names = ['Alice', 'Emily', 'Kate'];
  ReactDOM.render(
          

           {
                     names.map(function (name) {
                              return 
Hello, {name}
                     });
            }
          
,
          document.getElementById('example')
  );

JSX允许直接在模板中插入JS变量，如果这个变量是一个数组，则会展开这个数组的所有成员

  var  arr = [
          
Hello world
          
React is awesome
  ];

  ReactDOM.render(
          
{arr}
          document.getElementById('example');
  );

组件

React允许将代码封装成组件(componet), 像插入普通的HTML标签一样，在网页中插入这个组件，React.createClass 方法就用于生成一个组件类

    var HelloMessage = React.createClass({
            render: function () {
                  return 
Hello {this.props.name}
          }
    });

    ReactDOM.render(
            
            document.getElementById('example')
    );

注意： 组件一个字母必须大写，组件只能包含一个顶层标签

组件的属性可以再组件类的this.props对象上获取，比如name属性就可以通过this.props.name 读取。

注意

添加属性的时候
class属性需要改成 className
for属性要改成 htmlFor

this.props.children

this.props对象的属性与组件的属性一一对应，但是有个例外，就是this.props.children 属性，他表示组件的所有子节点

    var NoteList = React.createClass({
          render: function () {
                return (
                        React.Children.map(this.props.children, function (child) {
                                return 
{child}
                        })
                );
         }
    });

    ReactDOM.render(
            
                    HELLO
                    world
            
    );


    this.props.children 的值有三种可能：
    1、当前组件没有节点  就是 undefined
    2、当前组件只有一个节点，数据类型就是 object
    3、如果有多个子节点，       数据类型就是array

对于这种情况，React提供了一个方法， React.Children 来处理 this.props.children => 可以用React.Children.map来遍历子节点，不需要担心 this.props.children 的数据类型是哪种

PropTypes

var MyTitle = React.createClass({
    propTypes: {
            title: React.PropTypes.string.isRequired,
    },
    render: function () {
            return 
{this.props.title}
     }
  });

组件类的propTypes属性，就是用来验证组件实例的属性是否符合要求

var data = 123;
     ReactDOM.render(
            
             document.body
      );

getDefaultProps 可以设置组件属性的默认值

获取真正的DOM节点

var MyComponent = React.createClass({
    handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
      return (
        

            
            
      
    );
  }
});

ReactDOM.render(
    ,
      document.getElementById('example')
);

React.Component

ES6

    class Greeting extends React.component {
              render () {
                  return 
Hello, {this.props.name}
              }
    }


  var CommentList = React.createClass({
          render: function () {
                  return (
                          

                                  Hello
                          
                  );
          }
  });


HTML组件是正常的React组件，就和定义的一样，JSX编译器会自动重写HTML标签为 React.createElement(tagName);