React入门（1）

1.html模版

引入react.js,react-dom.js,browser.min.js

注意：script标签的type属性为text/babel（因为react独有的jsx语法，和js不兼容；使用jsx语法的地方都要加type=“text/babel”）。

react.js:react核心库

react-dom.js ：提供与dom相关的功能

browser.js :将jsx语法转为js语法，最好放在服务器。

$babel src --out-dir build

将src下的js进行语法转换，转码后放在build子目录中。

2.ReactDOM.render(),用于将模版转化为html，并插入到制定节点的DOM 中。

ReactDOM.render(<h1>hello</h1>);

document.getElementById('example');

将h1标题插入example节点

3.　JSX语法

html直接写在js中，不需要加任何符号----jsx语法。

var name = ['aa','bb','cc'];

ReactDOM.render(

　　<div>

　　　　{

　　　　　　names.map(function(name){

　　　　　　　　return <div>hello ,{name}</div>

　　　　　　});

　　　　}

　　</div>,

);

 遇见html以中<开头，代码块以{开头。

jsx允许在模版插入js变量。

4.组件

react允许将代码封装成组件，然后在网页中插入组件。

生成组件类的方法：React.createClass.

var HelloMessage = React.createClass({

　　render:function(){

　　　　return <h1>hello {this.props.name}</h1>;

　　}

});

ReactDOM.render(

　　<HelloMessage name="lily"/>

　　document.getElementById('example');

);

注意：1.所有组件类必须有render方法，用于输出组件，组件类第一个字母必须大写。

组件类指南包含一个顶层标签。

2.class属性需要写成className,for属性需要写成htmlFor ,因为class和for是JavaScript保留字。

5.this.props.children

this.props对象的属性和组件属性一一对应，除了this.props.children属性。

它表示组件的所有子节点。

 this.props.children 的值有三种可能：

（1）当前组件没有子节点，它就是undefined。

（2）有一个子节点，数据类型object。

（3）有多个子节点，数据类型 array。

React提供了一个工具方法React.Children来处理this.props.children，可以使用React.Children.map来遍历子节点。

var NotesList = React.createClass({
  render: function() {
    return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }
});

ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);

6.PropTypes

组件类的PropTypes属性，用来验证组件市里的属性是否符合要求

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

　

var data = 'string';

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

　　更多的PropTypes设置，可以查看官方文档。

getDefaultProps 方法可以用来设置组件属性的默认值。

　

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

ReactDOM.render(
  <MyTitle />,
  document.body
);

7.获取真实DOM节点

组件不是真正的DOM,react的操作通常是在虚拟的节点上，只有插入文档后才变成真正的DOM了，极大的提高了网页性能。

那么，如果从组件中获取真正的DOM节点，需要使用ref属性。

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')
);