react学习笔记1-react概述和项目搭建

前言

又到了随缘开新坑时，是的，我在复习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

项目就会打包运行

启用Sass和Less

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

下面来康康怎么启用它们

启用Sass

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

1	yarn add node-sass

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

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

然后我光速重新安装

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

get√

启用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 文件解析不会生效。

// 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'
    )
},