前端react技术积累
文章平均质量分 92
本文以js为前题,讲解各种前端框架。
码蚁先生
无个性,不签名
展开
-
React实例之完善布局菜单(三)
接着上篇的内容继续。规划界面布局。界面分为三个部分,左边为菜单部分,右边上部有个80 px高度左右的功能区,下面是主内容区。依据这个设计,我们进行下面的步骤:在 SMenu项目中创建一个目录:SLayout, 这个目录里我们存储各种布局,我们先来示例一种,其它的我们根据需要可以自行设计。在这个目录中创建文件这个没什么好说的,就是主要就是利用Flex的特殊用Bootstrap对界面进行布局,没什么难度。现在我们利用这个布局把所用的元素添加进来。原创 2024-02-04 17:22:59 · 1183 阅读 · 0 评论 -
React实例之完善布局菜单(二)
我们继续未完的课程。我们已经设计完所有theme的有关逻辑和代码了。接下来就是菜单部分,首先,菜单分为菜单头和菜单列表,还有收缩模式和缩略模式。为配置能用化的考虑,我们在菜单配置方面采用了Json数组。而菜单本身的数据状态和App的业务逻辑是没有关联的。所以我们尽可能的把两者隔离开。组件间的状态共享一般通过 Props 、state、 及Reducer 这么种方式。对于单层状态的上下传递我们采用 Props 和 state 就可以,但对于多层级的状传递这种方式就很不合适了。原创 2024-02-04 12:07:08 · 1372 阅读 · 0 评论 -
React实例之完善布局菜单(一)
自定义颜色模式就有点技术含量了。也是最繁琐的一环。首先我们要定义的每种颜色要有两个模式下的颜色值。这就要一个标准,由于我没有采用 TS 设计模式,所以就要用其它的办法来约束定义的行为,比如一个函数就是一个很好的办法。我们在STheme目录中创建一个工具函数库,把所有的我们自定义的工具函数放到其中统一导出就好了。// 生成基本颜色,lightColor为浅色,darkColor为深色return {/*** 生成主题模型* @returns*//*** 生成MUI系统主题。原创 2024-02-03 17:30:53 · 1477 阅读 · 0 评论 -
React Router 完美教程(下)
关于路由的主要应用技术我已经讲完了,根据这些应用方法,配置 React的状态管理,会使我们的应用更加灵活,设计更加方便。只要多练习,多思考,就一定能开发出非常完美的产品。原创 2024-02-01 06:35:22 · 1207 阅读 · 1 评论 -
React Router 完美教程(上)
什么叫路由呢,说白了就是如何处理页面的跳转。在传统的网站中,我们都是向服务器请求页面及相应的css和js代码。自从前后端分离的相思提出后,一堆基于js虚拟Dom的框架应运而生。React就是其中优秀的代表作之一。这种方式极大的优化了开发体验。从些,我们前端开发也可以向开发桌面软件一样那么的优雅,这在开发中后端产品中优势特别明显。那么,既然已经分离了,在浏览器中如何处理跳转关系呢,这就离不开路由这个话题了。在React中借助 Router 这个第三方包可以优雅的处理这种操作,让我们的界面实现丝滑的转换。原创 2024-01-31 14:47:32 · 1367 阅读 · 0 评论 -
React一学就会(7): 细说redux及其应用
不知不觉一个星期结束了,很快就要过年了,中间休息了两天,小孩生病,我也有点感冒了,还好,我的这个 React 基础教学课程也基本结束了。大家有不明白的可以留言问我,我一定竭尽所能的帮助你。后面几节课就 React 常用的几款第三方插件进行详细的讲解。本系列课程以Axios等插件主题进行讲解。都非常重要,可以说是学习React绕不过去的知识内容。这节课是Redux的内容。原创 2024-01-29 16:03:45 · 1302 阅读 · 0 评论 -
React一学就会(6): 细说Hooks及其应用
这几天小孩生病发烧,天天跑医院,搞得精力实在跟不上。写作的时间大大减少,写出的质量也不高。关于昨天写的函数组件的内容有点乱,很多都是直接参考了官方文档,今天再对相关的知识作个补充。请大家谅解。原创 2024-01-26 18:28:14 · 944 阅读 · 1 评论 -
React一学就会(5): 函数组件的高级特性
有时,我们希望在组件之间重用一些有状态逻辑。以上面的示例为例,假设我们还想在另一个组件中重用订阅逻辑,我们也许会将这个逻辑提到到一个名为:useFriendStatus。});它根据参数friendID,返回我们的好友是否在线的一个功能。return (每个组件的状态是完全独立的。Hooks是一种重用状态逻辑的方法,而不是状态本身。事实上,对Hook的每次调用都有一个完全隔离的状态,因此我们甚至可以在一个组件多次使用相同的自定义Hook。自定义Hook。原创 2024-01-25 19:09:40 · 806 阅读 · 0 评论 -
React一学就会(4): 强化练习二
书接上回,是不是感觉已经有点入门了。不过别急,码哥我准备了很多干货,等我们把这些基本几个章节的学完,码哥带着你一起装逼一起飞。我不大可能只是带着你们入门,那不是我的风格。码哥会教你如何开发一个完整中后台。前端后端如何匹配,什么安全什么策略都会教给你。如果你还有其它兴趣,我还可以教你许多网络知识,Android开发、IOS开发,Mac开发、c#开发等等。总之,一年的时间你肯定学不完。根本学不完。原创 2024-01-24 17:40:30 · 525 阅读 · 0 评论 -
React一学就会(3): 强化练习一
这节课我们用前两节课的知识做一个实践,在实战中巩固我们所学。本来我想借用官方的示例翻译一下,再补充一点就完事了,当写好了后仔细审核一翻后感觉不行,有点乱。官方那个示例真不适合用来做基础教程,就没有发,已经删了。白瞎了我一个下午的时间。本着`老码出品必属精品`的原则,今天自己亲手撸一个,咱要么不做,做就要做好。开撸。原创 2024-01-23 18:05:06 · 1021 阅读 · 1 评论 -
React一学就会(2): 快速上手
有了上一节的铺垫,基础环境我们已经创建好了,再次运行它, 并在浏览器中右击,选择检查菜单项,打开控制台,如下图所示这是我们上节课操作的结果。到目前为止,你只要你跟着我一步一步的做,就行了。或许你已经懂得并了解了一react的基础结构了,也或许你还一头雾水,不过不用担心,开胃菜还没开始。react以状态化构建组件的方式极大的优化了我们的开发成本,一但掌握你就爱不释手。原创 2024-01-21 15:55:21 · 892 阅读 · 1 评论 -
React一学就会(1): 项目的创建
随着JS的发展,基于JS应用几乎是无处不在,于是乎,众多框架应运而生。react就是众多优秀框架中不可多得的之一。框架这东西,每个程序员心里都有一个不同的排名。各见所爱了。我写这个一系列的教程一是想给刚学的朋友一点参考。二是自我总结一下经验,做点笔记。这将是一个超完整超详细的一个系列教程,跟着学,可以快速打通你的任督二脉。本系列教程参考了大量的资料,有官方的,也有网友的,但每一个实例都是经过精心fj雕琢后再验证的,确保不会误人子弟。原创 2024-01-20 13:45:16 · 989 阅读 · 0 评论 -
React之布局菜单
基于这篇文章,你应该首先已经了解了如何创建`react`项目,用`create-react-app`也好,用`vite`也罢。首先你要会创建项目。我的组件UI采用的是MUI, 所以要安装MUI,当然你也可以使用其它的UI组件。当你学习完这个小节并且充分理解后,你就可以随心所欲的做出修改。原创 2024-01-19 14:53:35 · 1075 阅读 · 1 评论