React笔记（一）初识React

一、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 --version

3、yarn命令使用

3.1、初始化项目

yarn init

3.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 install

3.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-sass

3.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=3002

3、配置别名

• 在项目的根目录中创建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');