一. React 介绍
1.React 起源与发展
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在 2013 年 5 月开源了。
2.React 与传统 MVC 的关系 11
轻量级的视图层库
React 不是一个完整的 MVC 框架,最多可以认为是 MVC 中的 V(View),甚至 React 并不非常认可 MVC 开发模式;React 构建页面 UI 的库。可以简单地理解为,React 将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页面
3.React 的特性
特点:
1.声明式设计-React采用声明范式,可以轻松描述应用。
2.高效-React通过对DOM的模拟(虚拟dom),最大限度地减少与DOM的交互。
3.灵活-React可以与已知的库或框架很好地配合。
4.JSX-JSX是JavaScript 语法的扩展。
5.组件-通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中6.单向响应的数据流-React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单
4.虚拟 DOM
DOM 操作非常昂贵。我们都知道在前端开发中,性能消耗最大的就是 DOM 操作,而且这部分代码会让整体项目的代码变得难以维护。React 把直实 DOM 树转换成JavaScript 对象树,也就是 VirtualDOM
二. create-react-app
npm install -g create -react-app
创建一个项目
create-react-app your-app 注意命名方式
如果不想全局安装,可以直接使用npx
npx create-react-app myapp 也可以实现相同的效果
这需要等待一段时间,这个过程实际上会安装三个东西
- react: react的顶级库
- react-dom: 因为react有很多的运行环境,比如app端的react-native, 我们要在web上运行就使用react-dom
- react-scripts: 包含运行和打包react应用程序的所有脚本及配置
常见问题:
- npm安装失败
- 切换为npm镜像为淘宝镜像
- 使用yarn,如果本来使用yarn还要失败,还得把yarn的源切换到国内
- 如果还没有办法解决,请删除node_modules及package-lock.json然后重新执行 npm install命令
- 再不能解决就删除node_modules及package-lock.json的同时清除npm缓存 npm cache clean --force 之后再执行 npm install 命令