长春建站公众号2345导航网址
react作为前端主流框架之一，因其语法接近原生JavaScript语法而广受欢迎。其生态丰富，常用的就有react-router、react-redux等插件，还有与其匹配的UI组件库antd。而且其还有用于移动端开发的react-native库，因此，react值得我们学习。
react是什么
react是一个由facebook开发，并且开源的，适用于构建用户界面的JavaScript框架。是一个把数据渲染成html页面的JavaScript框架。
为什么要学
- 原生JavaScript操作DOM繁琐，效率低。
- 使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排
- 原生JavaScript没有组件化编码方案，代码复用率低
react的特点
- 采用组件化模式、声明式编码，提高开发效率及组件复用率
- 在React Native中可以使用React语法进行移动端开发
- 使用虚拟DOM和优秀的Diffing算法，尽量减少与真实DOM的交互
jsx
jsx是一种模板语法，它允许在JavaScript中插入html模板。在react中它为程序提供视图元素。
为什么使用jsx
使用JavaScript创建虚拟DOM繁琐，jsx减少创建虚拟DOM的繁琐程度。
jsx全称是JavaScript XML，是React定义的一种语法规则，其本质是React.createNode(ele,prop,children)的语法糖。
jsx语法规则
- 定义虚拟DOM不能使用’’
- 标签中混入js表达式时使用{}
- 使用样式的类名使用className
- 使用内联样式使用对象中写样式
- 虚拟DOM必须只有一个根标签
- 标签必须闭合
- 如果小写字母开头，则将改标签转为HTML中同名元素；如果HTML中无同名元素则报错
- 如果大写字母开头，React就渲染对应的组件，如果组件没有定义则报错
- 列表中的每个元素必须有一个key
起步
- 创建react项目
npx create-next-app@latest
这时我们已经有了一个新的项目，使用编辑器打开之后，在终端中输入 npm rrun start即可运行项目