react组件基础之react组件

组件是react的一个主要特性

import React from 'react';
import ReactDOM from 'react-dom';
export default class ComponentHeader extends React.Component{  //这里必须加，否则外部访问不到这个组件
  render(){
    return (
      <header>
        <h1>这里是头部</h1>
      </header>
    )
  }
}

var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';
class Index extends React.Component {
	render() {
		return (
			<div>
				<ComponentHeader/>    //直接当成一个组件来使用
				<h2>页面的主体内容</h2> 
			</div>       //return里面只能返回一个节点
		);
	}
}
ReactDOM.render(
	<Index/>, document.getElementById('example'));    //绑定组件

小结

组件的return函数里返回的HTML节点必须是一个

可以给外部使用的组件定义：export default class ComponentHeader extends React.Component{}

入口的定义：ReactDom.render( 要绑定的组件 , document.getElementById(‘example’));

####

###