react-组件的创建以及使用

ES6相关语法我就不多解释了

import React, { Component } from 'react'

export default class MyComponent extends Component {
  render() {
    return (
      <div>
        <span>hello,world!</span>
      </div>
    )
  }
}

import React, { Component } from 'react' 首先看看第一行代码 引入React是为了使用jsx语法
Component 是为了让组件使用生命周期函数等玩意(个人理解不知道对不对) 先不追究用起来再说

render(){}这是react组件渲染的方法,每次渲染的时候都会自动调用,在里面可以使用jsx语法来编写HTML

补充一句组件开头必须大写字母

组件的使用方式

1.png

最后效果图

2.png