目录
一、前言
因为最近即将接手一个react的项目，所以想着在下班时间了解学习下react框架的使用。
那么最近我会把react学习的知识点逐一做个梳理，也请大家看看理解是否准确，希望与各位一起进步。
二、初识React
1、什么是React
首先，什么是react呢？它同vue一样，也是一个用于构建用户界面的js框架，这里将react的官方文档放入
https://react.docschina.org/docs/state-and-lifecycle.html
（可参照学习）。
2、如何创建一个React项目
那么，既然是一个框架，现阶段大部分项目都是使用脚手架去搭建的，而并非当作一个库去引入使用。而react脚手架创建项目则有两种方式：
（1）直接在本地临时安装一个脚手架；
npx create-react-app my-app // 注意：my-app为项目名称
npx是npm v5.2版本新添加的命令，无需额外下载（2）全局安装脚手架，并执行脚手架创建项目的命令。
1、npm i -g create-react-app
2、create-react-app my-app // my-app为项目名称创建成功后，可通过切入项目根目录执行npm start来启动项目，启动成功后可看到一个旋转的React的logo界面。
3、React的基本使用
// 1.导入react和react-dom两个包
import React from "react"; // 创建
import ReactDOM from 'react-dom' //渲染内容时使用
// 2.创建React元素
// 第一个参数：表示要创建的标签名称
// 第二个参数：表示自身的属性，如果没有，写null，有就传入一个对象
// 第三个参数：表示元素的子节点
const h1= React.createElement('h1', {
title:'我是标题'
},'hello react')
// 3.渲染React元素
// 第一个参数表示你要渲染谁,第二个表示挂载到哪里(如下图所示可在html页面中找到id为root的标签)
ReactDOM.render(h1,document.querySelector('#root'))
注意：在react中添加样式需要使用className属性，而不是class
如上述代码所示，如此便可以创建一个react元素，但是这样的写法未免过于繁琐，不利于查阅，接下来的JSX就可以解决这一问题。
4、JSX的简单了解
（1）JSX是JavaScript XML的简写，表示了在Javascript代码中写XML(HTML)格式的代码,这就是声明式的写法；
import ReactDOM from 'react-dom'
// 使用JSX创建
const h1 = <h1>Hello React</h1>
ReactDOM.render(h1,document.querySelector('#root'))（2）JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置的 @babel/plugin-transform-react-jsx 包，用来解析该语法（就如同babel可以将es6箭头函数的语法解析为普通函数）；
（3）JSX必须要有一个根节点，如果没有根节点，可以使用`<></>`（幽灵节点）或者`<React.Fragment></React.Fragment>`；
const h1 = (
<>
<div>Hello World</div>
<div>Hello JSX</div>
</>
);（4）通过{}来使用js中的数据；
function Hello(params) {
return <h1>Hello，{params.name}</h1>
}
function App() {
return (<>
<Hello name="React"></Hello>
<Hello name="JSX"></Hello>
<Hello name="函数式组件"></Hello>
<Hello name="类组件"></Hello>
</>)
}
ReactDOM.render(<App />,document.querySelector('#root'))（5）JSX本身也是一个js表达式。
5、函数式组件
使用JS的函数或者箭头函数创建的组件
（1）函数名称必须以大写字母开头，React 据此区分组件和普通的 HTML标签；
（2）函数组件必须有返回值，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null
（3）示例：
function Hello(params) {
return <h1>Hello，函数式组件</h1>
}
ReactDOM.render(<Hello />, document.querySelector('#root'))
6、类组件
使用 ES6 的 class 创建的组件，叫做类（class）组件
（1）类名称也必须以大写字母开头；
（2）类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性；
（3）类组件必须提供 render 方法；
（4）render 方法必须有返回值，表示该组件的 UI 结构
（5）示例：
import React from "react";
// 注意：因为下面类组件需要使用，所以需引入React，如不想，可按需导入Component
import ReactDOM from "react-dom";
class Welcome extends React.Component {
render() {
return <h1>Hello,类组件</h1>
}
}
ReactDOM.render(<Welcome />, document.querySelector('#root'))
三、总结
好了，此次总结的内容大概就是这些，后续也会在学习React框架过程中继续总结的知识点，梳理完成后进行不定期发布，如有不当之处，欢迎各位大佬交流指正。