react基础知识

ReactDOM.render将模板转换为HTML语言，并插入指定的DOM节点。

ReactDOM.render(
  
hello
,
  documnet.getElementById('example')
);

运行结果

hello

React.createClass将代码封装成组件的形式，生成组件类，需要注意return中只能包含一个顶层标签，组件名第一个字母要大写。

运行结果

hello
everyone

propTypes验证别人所提供的组件是否符合要求，在component可以接收任意值包括数字、字符串函数等

var data=123;
var MyTitle=React.createClass({
  propTypes:{React.PropTypes.string.isRequired},//定义类型为字符串
  render:function(){
    
{this.props.title}
  }
});
ReactDOM.render(
  ,
  document.getElementById("example")
);
*------------------------------------*
使用getDefaultProps设置初始化值
var MyTitle=React.createClass({
  getDefaultProps:function(){
    return {
      title：'welcome'
    };
  },
  render:function(){
    
{this.props.title}
  }
});
ReactDOM.render(
  ,
  document.getElementById("example")
);

运行结果：

123
welcome

ref属性可以从component组件中获取真实的的DOM节点

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

        
        
    
    ) ; 
  }
});
ReactDOM.render(
  ,
  document.getElementById("example");
)

运行结果：

Paste_Image.png