react.js从入门到精通（四）——组件的基本使用

web端三大框架react、vue和angular，本篇教程介绍react的从入门到精通。

七、组件使用的场景

（1）一个.js文件中代码量过大，不好维护。

（2）某些功能或样式在项目中大范围使用，组件起到了封装代码的作用。

1、组件的基本用法

（1）未使用组件时

代码如下：

demo2代码

import React,{ Component } from 'react'
class Demo2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  render() {
    return (
      <div style={
   {width:"100%",height:"300px",fontSize:"20px",textAlign:"center",backgroundColor:"#ccc"}}>
      Demo2
      </div>
    )
  }
}
export default Demo2

效果如下：