一、React概述
1、什么是react
react的官网:React
用于构建用户界面的 JavaScript 库，它也是一个渐进式的用于构建用户界面的javascript框架
2、主要特征
-
声明式：使用原生JS编写的页面存在着开发效率低下、性能较差的情况，使用react大家就向编写HTML的一样编写页面
-
组件化：使用组件的思想编写程序是现代企业开发的一种思路、让组件达到复用效果、大大提高开发效率，让项目具有可维护性和扩展性。
-
一次学习，跨平台编写
-
使用react不仅能够编写WEB应用
-
react还可以编写移动应用（react-native）
-
react完成VR（虚拟现实）(react 360)
-
3、React框架的发展史
React主要是在为了构架Instagram,2013年5月的时候，把React框架开源了，React整个生态，可以做到编写一套代码，可以运行到多端，除了可以开发web应用之外，也可以开发移动端应用等。
二、使用CRA构建React工程化项目
1、使用CRA创建React项目
使用create-react-app脚手架来完成react项目的创建，这里使用npx命令来进行创建
npx create-react-app 项目名称2、目录结构
|-node-modules:第三方依赖包
|-public:资源文件
|-index.html:页面出口文件
|-src:源文件
|-index.js:项目入口文件
|-package.json:项目描述文件创建完成之后，我们来看package.json中相关配置
2.1、包依赖
-
react:react框架的核心包
-
react-dom:react视图渲染的核心包（通过React构建的WEB应用）
-
react-scripts:包含运行和打包react应用程序的所有脚本及配置
使用
create-react-app创建的项目默认是无法修改其内部的webpack配置的，不像vue-cli那样可以通过一个配置文件修改,这是为了让项目目录看起来干净简洁，把项目的打包规则以及相关的插件/loader等都隐藏到了node_modules目录下，react-scripts是脚手架中对打包命令的一种封装，基于它打包，会调用node_modules中的webpack等进行处理。
2.2、scripts
-
start:"react-scripts start":开发环境：在本地启动web服务
-
"build": "react-scripts build"：打包命令，打包的内容输出到dist目录下
-
"test": "react-scripts test"：单元测试命令
-
"eject": "react-scripts eject"：暴漏webpack配置规则
2.3、browserslist
浏览器兼容性规则
"browserslist": {
"production": [
">0.2%", 全球超过0.2%的人使用的浏览器
"not dead", 还存活着的
"not op_mini all" 不考虑op_mini浏览器的全部版本的兼容性
],
"development": [
"last 1 chrome version",表示兼容到谷歌的上一个版本
"last 1 firefox version",表示兼容到火狐的上一个版本
"last 1 safari version" 表示兼容到safari的上一个版本
]
}Browserslist：可以在这个网站比较方便查看目标浏览器范围百分比
三、yarn包管理器
1、简介
Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ， yarn 包管理器，和 npm 的作用一模一样。都是用来管理项目中 node_modules 目录中的所有依赖包 Yarn 是为了弥补 npm 的一些缺陷而出现的
yarn的官方： Yarn 中文文档
2、安装yarn
在终端上执行如下命令进行全局安装yarn
npm i -g yarn安装完成之后，可以执行如下命令查看yarn的版本
yarn --version3、yarn命令使用
3.1、初始化项目
yarn init3.2、安装依赖包
yarn add [package] //下载最新版本
yarn add [package]@[version] //下载具体的版本
yarn add [package] --dev //下载的是运行时的依赖
yarn global add [package] //全局下载3.3、移除依赖包
yarn remove [package]3.4、安装项目的全部依赖
yarn
或者
yarn install3.5、配置镜像
设置yarn的淘宝镜像
yarn config set registry https://registry.npm.taobao.org查看镜像源
yarn config get registry配置node-sass镜像
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass3.6、查看全局安装的位置
yarn global dir四、使用craco插件进行webpack的配置
如果要修改create-react-app脚手架的默认配置，有如下方案
-
通过执行
yarn eject命令，释放react-scripts中的所有配置到项目中，但这是一个不可逆的操作，同时也会失去CRA带来的便利和后续升级 -
通过第三方库来修改，比如@craco/craco
1、craco插件的安装
-
安装修改CRA的配置的包
yarn add -D @craco/craco-
修改packge.json中的脚本命令
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}-
在项目的根目录中创建craco的配置文件(craco.config.js),用于修改默认配置
module.exports={
}2、修改项目的端口
在craco.config.js中配置如下
process.env.PORT=30023、配置别名
-
在项目的根目录中创建craco的配置文件(craco.config.js)，并在配置中配置别名
const path=require('path')
module.exports={
webpack:{
alias:{
'@':path.resolve(__dirname,'src')
}
}
}-
在代码中，就可以通过@来表示src目录的绝对路径
-
重启项目，让配置生效
3、别名路径提示
在项目的根目录下创建jsconfig.json配置文件，并在项目中添加如下提示
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*":["src/*"]
}
}
}五、项目初始化
1、安装scss
2、安装px-to-vw插件
-
在vscode的扩展中搜索"px-to-vw"，安装
-
在vscode---->设置---->输入px-to-vw---->在里面输入设计稿宽度，即可通过插件进行单位自动转化
-
按住键盘
alt + z快捷键，可以看到px单位被自动转换为vw单位了
3、重置样式
-
在Normalize.css: Make browsers render all elements more consistently.官网上下载normalize.css
-
在assets中定义normalize.css，将下载好的normalize.css内容复制进来
-
然后在App.scss页面中引入
@import url('./assets/reset.css');
