前端开发React常用开发框架

时间：2023-03-28 15:31:45 HTML

使用React，实际开发中常用的框架UI框架antd.design路由管理（SPA）react-router-dom状态管理redux,mobx,dvaUI框架antd.designnpm安装antd//（没有版本，安装最新版本）npminstallreact-app-rewiredcustomize-cra//自定义默认配置/package.json/"scripts":{"start":"react-scriptsstart","start":"react-app-rewiredstart","build":"react-scriptsbuild","build":"react-app-rewiredbuild","test":"react-scriptstest","test":"react-app-rewiredtest",}在项目根目录下创建config-overrides.js，修改默认配置。npminstallbabel-plugin-import//按需加载antd组件样式替换moment.js使用day.jsnpminstallantd-dayjs-webpack-plugindayjs使用的完整配置const{override,fixBabelImports,addLessLoader,addWebpackPlugin,}=require("customize-cra");constAntdDayjsWebpackPlugin=require("antd-dayjs-webpack-plugin");module.exports=override(//按需加载antd组件库fixBabelImports("import",{libraryName:"antd",libraryDirectory:"es",style:"true",}),//antd时间组件替换moment.jsuseday.jsaddWebpackPlugin(newAntdDayjsWebpackPlugin()),//使用less样式预处理，自定义主题样式addLessLoader({javascriptEnabled:true,modifyVars:{"@primary-color":"#1DA57A"},}));npmstart查看效果单页面应用SPA（单页面应用）集成react-router-domnpminstallreact-router-dom集成react-router-domreact-router-dom公共组件，在APIHashRouter路径中添加/#/BrowserRouterBuiltonH5HistoryAPI，操作路由跳转更方便BrowserRouter，HashRouter包裹所有路由Switch区分BrowserRouter，HashRouter包裹路由跳转Routehangs加载不同的路由显示界面Link跳转，类似标签代码方式跳转import{useHistory}来自“反应路由器做m";history.push("/home");调整目录结构创建components目录存放组件创建ClassComponent和FunctionComponent文件夹，移动到components目录创建pages目录存放不同页面home.jsxconstHome=()=>{return

Home

;};exportdefaultHome;component.jsximport{Divider}from"antd";importClassComponentfrom"../components/ClassComponent";importFunctionComponentfrom"../components/FunctionComponent";constComponent=()=>{return(

);};exportdefaultComponent;创建组件和首页组件修改App.js，让前端训练使用antd组件进行界面布局{Layout,Menu}from"antd";importHomefrom"./pages/home";importComponentfrom"./pages/component";import"./App.css";const{Header,Content,Footer}=Layout;constApp=()=>{return(;

HomeComponent

全栈技术部?2021CreatedbyTaohua

);};导出默认App;运行效果Router参数传递参数通过定义来传递和获取参数使用withRouter构造HOC，可以从props913代码方法中获取传递的参数使用withRouter构造HOC,可以从props获取传入的参数import{useParams}来自“react-router-dom”；让{id}=useParams();更多参考https://reactrouter.com/web/g...dva状态管理为什么要用dva做状态管理？dva封装了redux，暴露了易用的API（同步、异步），并结合umi.js+antd.design+antd.ddesign-pro开箱即用的中端前端/设计解决方案dva使用栗子：用dva搭建用户管理的用户界面安装dva依赖npminstalldva修改index.js使用dva管理状态//importReactfrom"react";//importReactDOMfrom"react-dom";import"./index.css";从“./App”导入App；从“./reportWebVitals”导入reportWebVitals；从“dva”导入dva；从“history”导入{createBrowserHistoryascreateHistory}；从“./models/user”导入userModel；constapp=dva({history:createHistory(),onError:(err,dispatch)=>{console.log("onError===>",err,dispatch);},});app.model(userModel);app.router(App);app.start(document.getElementById("root"));//ReactDOM.render(//////,//文档.getElementById("root")//);reportWebVitals();创建用户模型，管理使用rstatemodels/user.jsconstuserModel={//namespacenamespace:"user",//初始化状态数据state:{userList:[{id:1,name:"PeachBlossom",},],},effect:{//异步请求可以是网络请求，延迟操作*submit(action,{put,call,select}){},},reducers:{//adduseradd(state,{payload:{user}}){let{userList=[]}=state;consttemp=userList.concat();temp.push({id:userList.length+1,...user});return{...state,userList:temp,};},//删除用户delete(state,{payload:id}){let{userList=[]}=state;return{...state,userList:userList.filter((item)=>item.id!==id),};},},//监听路由变化subscriptions:{setup({dispatch,history}){//history.listen(location=>{});},},};exportdefaultuserModel;namespacenaming空间可以用来区分不同的业务数据，这样dispatch可以触发不同类型的action(redux)dispatch({type:"user/add",payload:{/datatransfer/}})effect触发异步action，与redux-sagareducers同步动作订阅一样，可以监听路由变化，获取参数，进行鉴权操作，构建一个用户界面。在页面目录中创建user.jsx。使用antd组件进行UI界面布局。使用connect进行数据订阅。绑定import{connect}from"dva";import{Form,Input,Button,Table}from"antd";constUser=({user,dispatch})=>{const{userList}=user;const[form]=Form.useForm();console.log(user);constonFinish=(values)=>{dispatch({type:"user/add",payload:{user:values,},});form.resetFields();};constonDelete=(id)=>{dispatch({type:"user/delete",payload:id,});};constcolumns=[{title:"ID",dataIndex:"id",key:"id",},{title:"姓名",dataIndex:"name",key:"name",},{title:"操作",key:"action",render:(text,record)=>(onDelete(record.id)}>删除),},];return(

添加record.id}columns={columns}dataSource={userList}/>

);};exportdefaultconnect(({user})=>({user,}))(User);效果原作者：桃花