文章介绍了Vue和React两个JavaScript框架的特点和使用。Vue提供一套完善的业务解决方案，而React是核心库，依赖于周边生态。React由Facebook维护，支持Web和移动端开发。文章详细讲述了React的搭建过程，包括直接引入和使用create-react-app脚手架，以及Vite的使用。此外，还讨论了yarn包管理器的优势和安装使用方法。
Vue这种框架借鉴很多优秀的框架，设计出来一套比较完善框架（有一套业务完美解决方案）
React框架，官方提供核心的一些内容，需要靠周边生态支持它的运行。
React起源于facebook内部项目。
思想：
1、解决UI层面的设计
2、React有两个分支：
- Web端（React-Dom）
- 移动端（React-Native）
官方：
中文：
React是JavaScript库，类似于jquery的使用
React框架：官方只提供核心库，可以依赖与第三方插件完成项目开发，将第三方资源和核心库结合起来。统称React全家桶桶项目。
三、React特点
1、组件化开发思想：SPA、组件需求、JSX
2、社区完善，适合大型的web应用开发：
3、facebook团队维护，版本稳定，持续更新
4、开发适用于多个场景
5、虚拟DOM
四、搭建React环境
1、React当成库来使用，只需要在html项目中引入react.js可以开始开发
npm init-y初始化项目，在项目中创建package.json
依赖包下载
npmireact--save
npminstallreact-dom--save
npminstallbabel-standlone--save
在项目中引入这三个包，开始写React代码
<html>
<head>
<scriptsrc='../node_modules/react/xxx/react.js'></script>
<scriptsrc='../node_modules/react/xxx/react-dom.js'></script>
<scriptsrc='../node_modules/react/xxx/bebal.js'></script>
</head>
</html>
项目有很多html页面，跳转页面window.location.assign( )
2、基于React脚手架搭建前端工程化项目
搭建流程：
推荐使用npx搭建React项目：要求最低的Node版本14，不能太高（尽量不要使用18版本）
npxcreate-react-app项目名字
总结：
1、npx 这个命令无需安装，node安装npx命令自动就有
2、create-react-app脚手架名字，本地安装临时脚手架，项目创建完毕后，销毁。
3、项目名字要求：不能有大写字母，多个单词用-，连字符_
npxcreate-react-appmy-project
4、项目创建完毕后，启动项目
npmstart
Startsthedevelopmentserver.
npmrunbuild
Bundlestheappintostaticfilesforproduction.
npmtest
Startsthetestrunner.
npmruneject
Removesthistoolandcopiesbuilddependencies, configurationfiles
andscriptsintotheappdirectory. Ifyoudothis, youcan’tgoback!
Wesuggestthatyoubeginbytyping:
cdmy-project
npmstart
create-react-app 这个是React官方脚手架
通过脚手架搭建项目，对Node版本有要求，要求14以上
基于webpack搭建前端工程化
五、Vite创建React项目
vite是Vue团队开发的一款打包工具，竞争就是webpack
1、使用vite搭建项目
npmcreatevite@latest
2、输入项目名字
可以自己取名字，也可以默认vite-project
3、选择vite搭建那个项目
vue react 项目
4、下载依赖
npminstall
5、启动项目
npmrundev
六、目录结构
src：存放开发的资源
--components：代表组件
--pages/views：代表页面（一般跟路由相关的页面）
index.js：代表项目入口文件，启动项目首先加载这个文件
App.js这个文件代表项目根组件，默认在index.js被加载
React中组件有两种后缀：以js结尾的文件，jsx结尾的文件（推荐）
下载插件:
七、yarn包管理器
yarn包管理器的特点：
1、快速性：通过yarn包管理器下载的每个包，在本地都会缓存起来，如果下一次使用，直接默认本地缓存中获取
2、安全性：至少能保证每个包完整性
3、安装版本统一：npm下载包的时候，版本会产生浮动~3.0.1下次在npm i 下载依赖包的时候，小版本可以浮动，导致项目启动报错
4、yarn管理工具，将使用包的版本锁定，这样每个用户，每个时间下载包版本都一致。
1、安装和使用
（1）yarn安装：
npminstall-gyarn
yarn--version
(2)查看yarn的配置项
yarnconfiglist
查看config一般都是查看镜像的位置，默认情况下还是国外镜像
国内有淘宝镜像，需要将淘宝镜像设置一下
yarnconfigsetregistryhttps://registry.npm.taobao.org -g
配置完成后，我们下载依赖就可以使用淘宝镜像
（3）使用常见的命令
初始化项目：项目下面会产生一个package.json文件
yarninit-y
下载依赖包
yarnadd [package]
yarnadd [package]@[version]
yarnadd [package]@[tag] --dev//代表生产依赖
删除依赖包
yarnremove
更新包
yarnupgrade [package]
yarnupgrade [package]@[version]
yarnupgrade [package]@[tag]
下载所有依赖
yarn
yarninstall
扫一扫
1230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
