环境准备
node v16.15.0 npm 8.5.5
Ant Design of React:
https://ant.design/docs/react/introduce-cn
一,创建项目
npm init vite
√ Project name: ... vite-project-react
√ Select a framework: » React
√ Select a variant: » TypeScript
然后使用vscode 打开项目,由于后续需要使用到redux(状态管理)、router(路由),所以先手动添加到package.json中
"dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "8.1.2", "react-router-dom": "6.15.0", "redux": "4.2.1" },
打开终端
npm install
启动项目
npm run dev
启动脚本根据需要可以稍作调整
与在vite.config.ts中配置server是一样的 :
二,样式初始化
使用reset-css
npm i reset-css
在main.tsx 中引入 reset-css
注意:样式的引入顺序为:
//初始化样式
//UI框架样式
//组件样式
三,安装sass
npm i --save-dev sass
四,路径别名的配置
一版情况 @ 符号表示src文件夹,但初始的vite不认,需要进行路径别名的配置。
import path from "path" resolve:{ alias:{ "@":path.resolve(__dirname,"./src") } }
此时“path”会报红,需要安装node库的ts声明配置。(其实path是有的,已经安装了node,path肯定是有的,只是缺少配置)
npm i -D @types/node
配置路径别名的提示:输入@后,自动跟出目录。在tsconfig.json中
"compilerOptions": { ...... "baseUrl": "./", "paths": { "@/*":[ "src/*" ] } },
五,样式的模块化引入
样式命名为xxx.module.scss。注意使用的时候使用 { }
//此种方式为全局引入,组件内部不能使用 //import "./comp1.scss" //模块化引入(样式文件重命名为comp1.module.scss) import styles from "./comp1.module.scss" function Comp(){ return ( <div className={styles.box}> <p>这事Comp1的内容</p> </div> ) } export default Comp;
六,ant design 引入 (此时 antd 使用的是5.85的版本)
官网连接:https://ant.design/docs/react/introduce-cn
安装
npm install antd --save
使用
此版本已不再需要引入antd.css了,直接引入组件,使用组件即可,比如在App.tsx组件中引入一个button:
import { Button, Space } from 'antd'; function App() { return ( <> 顶级目录 <Button>test</Button> </> ) } export default App
icon图标需要单独安装
npm install @ant-design/icons --save
使用
import { HomeOutlined, LoadingOutlined } from '@ant-design/icons'; function App() { const [count, setCount] = useState(0) return ( <> 顶级目录 <HomeOutlined /> <LoadingOutlined/> </> ) } export default App
七,路由的封装
重定向 使用:Navigate
懒加载 使用:lazy,且需要包在loading提示组件中。
路由文件中代码如下:
import {Navigate} from "react-router-dom" import React,{lazy} from "react" import Home from "../views/Home" const About= lazy(()=>import("../views/About")); //懒加载模式的组件写法,外面需要套一层loading 的提示加载组件 const withLoadingComponent=(comp:JSX.Element)=>{ return <React.Suspense fallback={<div>loading...</div>}> {comp} </React.Suspense> } const routes=[ { path:"/", element:<Navigate to="/home"/> }, { path:"/home", element:<Home/> }, { path:"/about", element:withLoadingComponent(<About/>) } ] export default routes;
使用方法:
1,main.ts中:要使用 BrowserRouter
import React from 'react' import ReactDOM from 'react-dom/client' import {BrowserRouter} from "react-router-dom" //初始化样式 import "reset-css" import App from './App.tsx' ReactDOM.createRoot(document.getElementById('root')!).render( <React.StrictMode> <BrowserRouter> <App /> </BrowserRouter> </React.StrictMode>, )
2,App组件中:
使用 useRoutes
import {useRoutes, Link} from "react-router-dom" import router from "./router" function App() { const outlet = useRoutes(router); return ( <>{/* 此处的link只是为了做菜单直观点击,其实不是路由实现的必须,在url中直接改变路由已经可以实现切换啦 */}
<Link to="/home">Home</Link> <Link to="about">About</Link>
{/* 有这句即可 */} {outlet} </> ) } export default App
八,状态管理 react-redux 的使用
1,浏览器安装reduxdevtools
下载地址:https://www.chajian5.com/download?pid=3034。安装包中有方法说明。
2.项目中的应用
1)安装 redux 和 react-redux。
2)src下创建store 文件夹,store文件夹下创建index.ts 文件。内容如下:
import {legacy_createStore} from "redux"; import reducer from "./reducer.ts"; //创建数据仓库,后两个参数目的是为了在浏览器中使用redux
const store =legacy_createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()); export default store;
为了让浏览器正常使用reduxdevtools,增加window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()参数,
浏览器中效果如下
3)store文件夹下创建reducer.ts 文件,内容如下:
const defaultState={ num:20, num3:20, } //action 中参数,type 是字符串,固定参数,val 是自定义参数,可以起其它名字 let reducer = (state=defaultState,action:{type:string,val:number})=>{ //当执行dispatch时,就走此方法 let newState=JSON.parse(JSON.stringify(state)); switch (action.type) { case "add": newState.num++; break; case "add1": newState.num3+=action.val; break; default: break; } return newState; } export default reducer;
4)main.tsx下引入状态管理
//状态管理 import {Provider} from "react-redux"; import store from "@/store"; ReactDOM.createRoot(document.getElementById('root')!).render( {/*状态管理包裹在外层 */} <Provider store={store}> <BrowserRouter> <App /> </BrowserRouter> </Provider> )
5)具体组件中获取,比如Page1.tsx中
获取参数数据使用useSelector 这个hook函数。改变参数数据使用useDispatch这个hook函数
import {useSelector,useDispatch} from "react-redux"; import {Button} from "antd" function Comp(){ //获取仓库数据 const {num,num3} =useSelector((state)=>({ num:state.num, num3:state.num3 })) const dispatch=useDispatch(); const numChange=()=>{ dispatch({type:"add"}); } const numChange3=()=>{ dispatch({type:"add1",val:3}); } return ( <div> <p>Page1</p> <p>仓库数据num:{num}</p> <p><Button onClick={numChange}>num + 1</Button></p> <p>仓库数据num3:{num3}</p> <p><Button onClick={numChange3}>num + 3</Button></p> </div> ) } export default Comp;
标签:插件,const,App,reduxdevtools,react,num,跳转,import,redux From: https://www.cnblogs.com/nanamiao/p/17657575.html