React组件

• 组件是React的基石，所有的React应用程序都是基于组件的。
• 之前React组件，使用React.createClass来进行声明

var List = React.createClass({
  getInitialState: function(){
    return['a','b','c']
  },
  render: function(){
    return(...);
  }
});

• React官方第一时间就支持了ES6 class 的方法，这种写法可读性更强，一个直观的表现就是不用写getInitialState方法了，可以直接在constructor里面定义this.state的值。所以以后代码采用以下格式。

import React from 'react';

class List extends React.components{
  constructor(){
    super();
    this.state = ['a','b','c'];
  }
  render(){
    return(...);
  }
}

• 这一节里测试一下React的组件
• 在src/js/下创建文件夹components创建一个header.js
• header.js如下

import React from 'react';
import ReactDOM from 'react-dom';
export default class CompomentHeader extends React.Component{
  render(){
    return(
      <header>
      <h1>这里是表头</h1>
      </header>
    );
  }
}

• index.js如下

var React = require('react');
var ReactDOM = require('react-dom');
import CompomentHeader from './components/header';

class Index extends React.Component {
  render() {
    return (
      <div>
      <CompomentHeader/>
      <h1>页面主题内容</h1>
      </div>
    );
  }
}

// 入口
ReactDOM.render( < Index / > , document.getElementById('example'));

HTML标签与React组件

• React可以直接渲染HTML类型的标签，也可以渲染React的组件
• HTML类型的标签第一个字母用小写来写表示。

import React from 'react';
//当一个标签里面为空的时候，可以直接使用自闭和标签
//注意class是一个JavaScript保留字，所以如果class应该替换成className
let divElement = <div className="foo"/>;
//等同于
let divElement = React.createElement('div',{className:'foo'});

• React组件标签第一个字母大写。

import React from 'react';
class Headline extends React.component{
  ...
  render(){
    //直接return JSX语法
    return <h1>Hello React</h1>
  }
}
let Headline = <Headline />;
let headline = React.createElement(Headline);

• JSX语法使用第一个字母大小写来区分是一个普通的HTML标签还是一个React组件
• 注意：因为JSX本身是JavaScript语法，所以一些JavaScript中的保留字要用其他的方式书写，比如第一个例子中class要写成className