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

  

 

posted @ 2016-11-09 17:05  耐心_bunny  阅读(194)  评论(0编辑  收藏  举报