react 插件安装

创建项目

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

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

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

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

(支持装饰器配置)

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组件模板)

上一篇:react antd二次封装自动去除首尾空格input


下一篇:React学习day13--antd组件:Grid栅格