Component

React 组件开发 使用 component 来创建一个组件,然后像插入普通 HTML 标签一样,在网页中插入这个组件。

react 提供了两个接口来开发组件,其一是 componet, 其二是 createClass
前者使用 es6 中的 class 来继承,后者是是使用对象的方式创建组件

示例 1

import { Component } from 'react';
import { render } from 'react-dom';

// 使用 es6 语法,定义一个类,然后继承 react.Component 组件
// react.Component 是定义组件的接口类
class Header extends Component {
	render(){
		//返回组件的视图
		return (
			<div> Header </div>
		);
	}
}

render(
  	</Header>, //向平时写 html 一样使用自定义的组件
  	document.querySelector("#app")
);

示例 2

import { createClass } from 'react';
import { render } from 'react-dom';

//使用 react.createClass 对象创建一个组件
//与上面的效果一样,没有区别,两者只是语法上有差别
const Footer = createClass({
  render: function(){
    return <footer> 网页底部 </footer>;
  }
});

render(
  	</Footer>, //向平时写 html 一样使用自定义的组件
  	document.querySelector("#app")
);