react 插件安装

2021-07-13 10:32:10 阅读：190 来源： 互联网

创建项目

1、安装cra

npm install -g create-react-app

2、创建项目 “react-lesson” 为文件名

create-react-app react-lesson

3、启动项目

npm start

使用第三方组件

1、antd：

npm install antd --save

使用：

import Button from 'antd/lib/button'
import 'antd/dist/antd.css'

很明显，引用时过长，不利于使用

下面来进行按需加载配置：

安装 react-app-rewired 取代 react-scripts，可以扩展 webpack 配置，类似 vue.config.js

npm install react-app-rewired customize-cra babel-plugin-import -D

安装完成后，执行下面操作

// 根目录创建 config-overrides.js
const { override, fixBabelImports, addDecoratorsLegacy } = require("customize-cra")

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd", // antd按需加载
    libraryDirectory: "es",
    style: "css"
  }),
  addDecoratorsLegacy() // 配置装饰器，如果不用装饰器，可以不要这一步，如果需要用装饰，还需要安装下面的插件
)

（支持装饰器配置）

npm install -D @babel/plugin-proposal-decorator

修改package.json

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-app-rewired eject"
}

Redux

异步：Redux只是个纯粹的状态管理器，默认只支持同步，实现异步任务比如延迟、网络请求，需要中间件的支持，比如我们使用最简单的 redux-thunk 和 redux-logger

npm install redux-thunk redux-logger --save

vscode插件

格式化插件：Prettier - Code formatter --如果这个不能用，可以尝试把node_modules删掉，用npm再装一次，cnpm好像跟这个插件有点冲突

自动导入插件：Auto Import

快捷创建react模板：ES7 React/Redux/GraphQL/React-Native snippets （使用rcc创建class组件模板，使用rcf创建function组件模板）

标签：npm,插件,app,react,antd,安装,rewired
来源： https://www.cnblogs.com/fyh0912/p/15005301.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react 插件安装

创建项目

使用第三方组件

vscode插件