react 学习初始篇

最新推荐文章于 2020-12-29 22:56:39 发布

czp555

最新推荐文章于 2020-12-29 22:56:39 发布

阅读量258

点赞数 1

分类专栏： react

本文链接：https://blog.csdn.net/czp555/article/details/89606523

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.搭建react框架首先需要有node环境（http://nodejs.cn/直接下载最新版本，傻瓜式安装就可以）

验证node环境是否安装成功 win + R 键输入cmd，在命令行输入node -v 查看node版本，npm -v查看npm包管理器的版本

有版本号说明安装成功，此时电脑有node环境，否则安装失败。

2.安装create-react-app脚手架（若npm安装时比较慢，就使用淘宝镜像cnpm）

npm install -g create-react-app

3.使用脚手架初始化一个项目

create-react-app my-project (注意项目名称小写)

4.进去项目文件夹并启动

cd my-project (此处补充一点，切换盘符的话盘符加冒号回车，eg: f: 回车)

npm start 运行

5.安装yarn (快速、可靠、安全的依赖管理工具跟npm一样包管理工具但是比npm更友好)

npm install yarn -g

yarn -v 查看yarn版本

yarn start //与npm start 一样，运行项目测试yarn是否安装成功

6.手动安装react-router和axios,less-loader，脚手架初始化的新项目不会自动安装react-router等项目必须的一些插件。

yarn add react-router-dom axios less-loader 回车（react-router-dom是4.x以上路由跟html结合混合使用所以要这样安装，同时安装react-router也可以，但是项目中使用到得是react-router-dom）

注：若在使用yarn期间出现一种情况，命令行运行一半之后卡住，一直运行不下去时，此时就需要安装yarn镜像，将下面两句分别复制到命令行运行，然后在安装其他插件

yarn config get registry

yarn config set registry http://registry.npm.taobao.org/

7.暴露webpack配置文件

yarn eject 只能用一次，用完即止，多出一些文件在目录里（package.json中会看到很多隐藏的配置，新增config文件夹，script文件夹），我们要在config文件夹下的webapck.config.js里配置

8.webapck.config.js修改配置

修改less配置（初始的新项目是不支持less的，antd是基于less的，后面需要更改antd的主题，需要我们配置下less）,配置方法与webapck.config.js中的css、sass类似，copy 一份跟 sassRegex,sassModuleRegex 一样的声明即可,

const lessRegex = /.less/

const lessModuleRegex = /.module.less$/

在sass的配置下新增less配置

{ test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'), }, { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, modules: true, getLocalIdent: getCSSModuleLocalIdent, }, 'less-loader' ), },

关掉服务，重新yarn start 在 App.js中导入less文件一切正常 (切记：修改配置文件后一定要重启服务)

运行后，会发现报错了，按照提示安装less模块就好了（若安装比较慢，卡住，就是用上面步骤6中的注）

9.安装Antd(支付宝公司的，antd 是基于 Ant Design 设计体系的 React UI 组件库)

yarn add antd

在页面中就可以使用 eg:Button组件的使用

import {Button} from 'antd'; //antd中暴露的是很多组件,Button只是其中的一个组件，需要解构赋值使用花括号来解构获取

import 'antd/dist/antd.css'; (安装 babel-plugin-import 可以实现文件的按需加载，就不需要整体引入antd.css)

10.按需加载（ babel-plugin-import（推荐））

yarn add babel-plugin-import

方法一：修改webpack.config.js配置复制下面代码（antd官网有说明）

["import", {

"libraryName": "antd",

"libraryDirectory": "es",

"style": true //"style": "css", `style: true` 会加载 less 文件

}]

放在哪个位置耶^_^ 对比下图

方法二：修改package.json里面的配置也可以实现（复制下面代码）

"plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": true
        }
      ]
    ]

放在哪个位置耶^_^ 对比下图

修改配置文件后记住重新运行代码（如果你的pageage.json中的less版本大于3.*，此时运行可能会报错如下错误提示：）

此时就需要你对less降级处理(安装2.7.3及3.*一下版本都可以) 然后重启项目

yarn add less@^2.7.3

11.修改主题色（上面的配置完成之后就可以修改ant的主题色了）

如果上面步骤完成后运行项目时出现什么发现不了less-loader等什么的提示错误，就需要在安装下yarn add less-loader,我遇到过这个问题，之前安装过，但是提示找不到，从新安装就好了

在webpack.config.js中找到getStyleLoaders函数照下面修改即可

// if (preProcessor) {
    //   loaders.push({
    //     loader: require.resolve(preProcessor),
    //     options: {
    //       sourceMap: isEnvProduction && shouldUseSourceMap,
    //     },
    //   });
    // }

    //用下面的if替换上面的即可
    if (preProcessor) {
      let loader = {
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: shouldUseSourceMap,
        },
      }
      if (preProcessor === "less-loader") {
        loader.options.modifyVars = {
          'primary-color': '#000000',
          'link-color': '#1DA57A',
          'border-radius-base': '2px',
        }
        loader.options.javascriptEnabled = true
      }
      loaders.push(loader);
  
    }

看效果（默认是蓝色的）