React简介

react作为前端主流框架之一，因其语法接近原生JavaScript语法而广受欢迎。其生态丰富，常用的就有react-router、react-redux等插件，还有与其匹配的UI组件库antd。而且其还有用于移动端开发的react-native库，因此，react值得我们学习。

react是什么

react是一个由facebook开发，并且开源的，适用于构建用户界面的JavaScript框架。是一个把数据渲染成html页面的JavaScript框架。

为什么要学

1. 原生JavaScript操作DOM繁琐，效率低。
2. 使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排
3. 原生JavaScript没有组件化编码方案，代码复用率低

react的特点

1. 采用组件化模式、声明式编码，提高开发效率及组件复用率
2. 在React Native中可以使用React语法进行移动端开发
3. 使用虚拟DOM和优秀的Diffing算法，尽量减少与真实DOM的交互

jsx

jsx是一种模板语法，它允许在JavaScript中插入html模板。在react中它为程序提供视图元素。

为什么使用jsx

使用JavaScript创建虚拟DOM繁琐，jsx减少创建虚拟DOM的繁琐程度。

jsx全称是JavaScript XML，是React定义的一种语法规则，其本质是React.createNode(ele,prop,children)的语法糖。

jsx语法规则

1. 定义虚拟DOM不能使用’’
2. 标签中混入js表达式时使用{}
3. 使用样式的类名使用className
4. 使用内联样式使用对象中写样式
5. 虚拟DOM必须只有一个根标签
6. 标签必须闭合
7. 如果小写字母开头，则将改标签转为HTML中同名元素；如果HTML中无同名元素则报错
8. 如果大写字母开头，React就渲染对应的组件，如果组件没有定义则报错
9. 列表中的每个元素必须有一个key

起步

1. 创建react项目

npx create-next-app@latest

这时我们已经有了一个新的项目，使用编辑器打开之后，在终端中输入 npm rrun start即可运行项目