创建项目
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组件模板)