React组件(上)

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(

h1>这里是表头

);
}
}
index.js如下
var React = require('react');
var ReactDOM = require('react-dom');
import CompomentHeader from './components/header';

class Index extends React.Component {
render() {
return (

h1>页面主题内容

);
}
}

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