前言

又到了随缘开新坑时,是的,我在复习Node时发现我学的的React也忘光了(这就是不用React写项目的后果吗),不管怎么说,下面又是复习时间

官网:https://react.docschina.org/

什么是React

React是由Facebook研发的、用于解决UI复杂度的开源JavaScript库,目前由React联合社区维护。

它有下面的特点

  • 轻量:React的开发版所有源码(包含注释)仅3000多行
  • 原生:所有的React的代码都是用原生JS书写而成的,不依赖其他任何库
  • 易扩展:React对代码的封装程度较低,也没有过多的使用魔法,所以React中的很多功能都可以扩展。
  • 不依赖宿主环境:React只依赖原生JS语言,不依赖任何其他东西,包括运行环境。因此,它可以被轻松的移植到浏览器、桌面应用、移动端。
  • 渐近式:React并非框架,对整个工程没有强制约束力。这对与那些已存在的工程,可以逐步的将其改造为React,而不需要全盘重写。
  • 单向数据流:所有的数据自顶而下的流动
  • 用JS代码声明界面
  • 组件化

和Vue的对比如下

对比项 Vue React
全球使用量
国内使用量
性能
易上手
灵活度
大型企业
中小型企业
生态

搭建项目

这里我们使用官方的react脚手架进行搭建,另外请确保你安装了yarn

安装yarn:https://yarnpkg.com/getting-started/install

create-react-app文档:https://create-react-app.dev/docs/getting-started

安装脚手架并创建项目

1
yarn create react-app react-test

当然你也可以分两步

1
2
npm install -g create-react-app
create-react-app react-test

创建完毕后,cd进目录,运行下面的命令

1
yarn start

项目就会打包运行

image-20210128132514259

启用Sass和Less

啊哈,说到搭建项目,就不能少了我最喜欢的CSS预处理器,原生CSS写起来实在是太难受了orz

下面来康康怎么启用它们

启用Sass

非常easy啊,安装一下node-sass就可以了

1
yarn add node-sass

然后啪的一下报错了,很快啊

image-20210128135416695

一看发现是node-sass的版本问题,详情看这里

然后我光速重新安装

1
2
3
4
# Uninstall node-sass
npm uninstall node-sass
# Then install the latest version (before 5.0)
npm install node-sass@4.14.1

get√

image-20210128140547586

启用Less

Less的配置稍微复杂一点

运行下面的命令

1
2
# 注意:此命令会将脚手架中隐藏的配置都展示出来,此过程不可逆
yarn run eject

运行完成之后,打开 config 目录下的 webpack.config.js 文件,找到 // style files regexes 注释位置,仿照其解析 sass 的规则,在下面添加两行代码

1
2
3
// 添加 less 解析规则
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

找到 rules 属性配置,在其中添加 less 解析配置

这里有一个需要注意的地方,下面的这些 less 配置规则放在 sass 的解析规则下面即可,如果放在了 file-loader 的解析规则下面,less 文件解析不会生效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// Less 解析配置
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
)
},

然后安装lessless-loader

1
yarn add less less-loader

然后我啪的一下又报错了

image-20210128142953849

问题不大,看起来是少了解析jsx的插件,装一下就行

1
yarn add @babel/plugin-syntax-jsx

重新运行

image-20210128143135564

启用Typescript

使用Typescript有两个办法

在创建项目时声明

1
yarn create react-app react-ts-test --template typescript

创建完后直接运行即可

image-20210128150447784

为已有项目添加

安装相关的库

1
yarn add typescript @types/node @types/react @types/react-dom @types/jest

然后对相关的文件进行重命名(比如index.js改成inedx.tsx)

你要先修复文件中的一些类型错误,才能打包

如果实在懒得修,可以在文件的开头加上 // ts-nocheck

重新打包运行

image-20210128151253645

后记

这篇文章介绍了怎么搭建react项目,下篇文章介绍一些react的基本使用

但我决定先去看看npm和yarn

FAQ

给yarn换源

yrm 永远的神

create-react-app