React 系列

一. 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 命令