2022即将到来，前端发展非常迅速，现在的前端已经不再是写写简单的页面了，伴随着web大前端，工程化越来越火，也出现了很多框架。很多公司也不单单是使用单一的框架了，作为前端开发国内最火的两大框架，都是必须要掌握的。所以，我决定在这疫情肆虐的年底把React学习一下，也为自己将来找工作多一分竞争力...

学习阶段，如有不对之处，欢迎评论区留言，我及时更正

本文已连载，其它章节传送门⬇️

第一章-jsx语法认识

函数组件和class类组件

React中定义组件有两种方式，一种是函数类型的组件，它接收一个props对象返回一个react元素；一种是使用es6 class关键字定义的类组件，继承自React.Component并且创建render函数返回react元素

注意：函数组件没有生命周期和state状态

函数组件

function Welcome(props) { 
    return <h1>Hello, {props.name}</h1>; 
}

class类组件

class Tigger extends React.Component{
  constructor(props) {
    super(props)
  }
  render() {
    return(
      <button>
	       按钮
      </button>
    )
  }
}

开发中，我们常使用class类组件，因为它的功能更强大，并且类组件可以有自己的state，方便维护自己的数据。不过react更新了hook，函数组件搭配hook开发解决了react中很多代码繁琐的问题，后面会介绍到。

无论哪种组件，我们都需要调用 ReactDOM.render 去渲染组件。此方法接收两个参数，第一个参数是组件或者标签，第二个参数接收一个DOM节点，也就是我们具体要渲染到哪个元素中

ReactDOM.render(<Tigger/>, document.querySelector('#root'))

掌握React基础知识第二章-函数组件和class类组件

函数组件和class类组件

函数组件

class类组件