前言
又到了随缘开新坑时,是的,我在复习Node时发现我学的的React也忘光了(这就是不用React写项目的后果吗),不管怎么说,下面又是复习时间
什么是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 | npm install -g create-react-app |
创建完毕后,cd进目录,运行下面的命令
1 | yarn start |
项目就会打包运行
启用Sass和Less
啊哈,说到搭建项目,就不能少了我最喜欢的CSS预处理器,原生CSS写起来实在是太难受了orz
下面来康康怎么启用它们
启用Sass
非常easy啊,安装一下node-sass
就可以了
1 | yarn add node-sass |
然后啪的一下报错了,很快啊
一看发现是node-sass的版本问题,详情看这里
然后我光速重新安装
1 | Uninstall node-sass |
get√
启用Less
Less的配置稍微复杂一点
运行下面的命令
1 | 注意:此命令会将脚手架中隐藏的配置都展示出来,此过程不可逆 |
运行完成之后,打开 config 目录下的 webpack.config.js 文件,找到 // style files regexes
注释位置,仿照其解析 sass 的规则,在下面添加两行代码
1 | // 添加 less 解析规则 |
找到 rules 属性配置,在其中添加 less 解析配置
这里有一个需要注意的地方,下面的这些
less
配置规则放在sass
的解析规则下面即可,如果放在了file-loader
的解析规则下面,less
文件解析不会生效。
1 | // Less 解析配置 |
然后安装less
和less-loader
1 | yarn add less less-loader |
然后我啪的一下又报错了
问题不大,看起来是少了解析jsx的插件,装一下就行
1 | yarn add @babel/plugin-syntax-jsx |
重新运行
启用Typescript
使用Typescript有两个办法
在创建项目时声明
1 | yarn create react-app react-ts-test --template typescript |
创建完后直接运行即可
为已有项目添加
安装相关的库
1 | yarn add typescript @types/node @types/react @types/react-dom @types/jest |
然后对相关的文件进行重命名(比如index.js改成inedx.tsx)
你要先修复文件中的一些类型错误,才能打包
如果实在懒得修,可以在文件的开头加上 // ts-nocheck
重新打包运行
后记
这篇文章介绍了怎么搭建react项目,下篇文章介绍一些react的基本使用
但我决定先去看看npm和yarn