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
即可运行项目