react的学习

ReactDOM.render()

    ReactDOM.render(
          <h1>Hello,world</h1>,
          document.getElementById('example')
    );

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

JSX语法

  var names = ['Alice', 'Emily', 'Kate'];
  ReactDOM.render(
          <div>
           {
                     names.map(function (name) {
                              return <div>Hello, {name}</div>
                     });
            }
          <div>,
          document.getElementById('example')
  );

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

  var  arr = [
          <h1>Hello world</h1>
          <h2>React is awesome</h2>
  ];

  ReactDOM.render(
          <div>{arr}</div>
          document.getElementById('example');
  );

组件

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

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

    ReactDOM.render(
            <HelloMessage name="John" />
            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 <li>{child}</li>
                        })
                );
         }
    });

    ReactDOM.render(
            <NoteList>
                    <span>HELLO</span>
                    <span>world</span>
            </NoteList>
    );


    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 <h1>{this.props.title}</h1>
     }
  });

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

var data = 123;
     ReactDOM.render(
            <MyTitle title={data} />
             document.body
      );

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

获取真正的DOM节点

var MyComponent = React.createClass({
    handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
      return (
        <div>
            <input type="text" ref="myTextInput" />
            <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});

ReactDOM.render(
    <MyComponent />,
      document.getElementById('example')
);

React.Component

ES6

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


  var CommentList = React.createClass({
          render: function () {
                  return (
                          <div className="commentList">
                                  Hello
                          </div>
                  );
          }
  });


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