react训练营

完善布局菜单（三） 接着上篇的内容继续。规划界面布局。界面分为三个部分，左边为菜单部分，右边上部有个 80 px 高度左右的功能区，下面是主内容区。 依据这个设计，我们进行下面的步骤： 在 SMenu

完善布局菜单（二） 我们继续未完的课程。 我们已经设计完所有theme的有关逻辑和代码了。接下来就是菜单部分，首先，菜单分为菜单头和菜单列表，还有收缩模式和缩略模式。为配置能用化的考虑，我们在菜单配置

完善布局菜单（一） 今天我们来用所学的知识来做一个布局菜单的组件, 针对这个组件我之前写过一个教程 ，那个呢比较基础，这节课算是对那个教程的一个扩展和补充。这个实例讲完，这个系列就算告一段落了。先看效

路由 Router 下 我们书接上回，继续我们的React Router 路由之路： 我们到目前为止都没有用到 state、useEffect、redux等状态管理器。但也达到了我们的设计目的。 lo

router 什么叫路由呢，说白了就是如何处理页面的跳转。在传统的网站中，我们都是向服务器请求页面及相应的css和js代码。自从前后端分离的相思提出后，一堆基于js虚拟Dom的框架应运而生。React

Redux 这个 React 基础章节基本结束了。大家有不明白的可以留言问我，我一定竭尽所能的帮助你。后面几节课就 React 常用的几款第三方插件进行详细的讲解。本系列课程以 React Redux

细说Hooks及其应用 由于这段时间琐事较多，写出的文章质量也不高。关于上次写的函数组件的内容有点乱，很多都是直接参考了官方文档，今天再对相关的知识作个补充。请大家谅解。 Context 由于状态是封

函数的高级特性 经过四节课的洗礼，你应该已经对Ract的用法有了一个比较好的理解，这节课我们来全面的聊一聊函数组件的高级特性 Hooks , Hook是函数组件所特有的功能。 请在src目录下创建目录

模态框的优化及异常修复 经过一段时间的应用，前面的模态框设计在单体应用上没什么问题，但也暴露出了不少的问题，比如，在多模态框弹出的时候会出现context的数据污染的问题，比如在多模态的情况下注目动画

话说前面，这一系统的教程文章其实我早就写好了，放在语雀上，那玩意实不好用，就把资料给导出来了，导出来后由于格式问题，可能有的些异常，请大家见谅。现在我自己开发了个编辑器，格式什么的都统一和标准化了，架

一个弹窗是不是也挺复杂的，是的，往往看似简单的东西真正做起来很复杂。只有多试验才能出真知。光看不练肯定是不行的。下面我们来把前几节的内容整合一下就大功告成了。 _Model.jsx 相关的内容前几节已

前一节课中漏了一个知识点，当内容很长时需要滚动，这个滚动条是很影响美观的。在MacOS下的还能忍，win系统下简直不能看。如何让长内容能滚动又不显示滚动条呢，我尝试过很多办法，最终下面这个方法目前来说

最近忙的不可开交，每天恨不得把时间掰开使用，挣不到钱还没时间，有时候我在想我怎么混得这个样子。题外话不多说，从这节课开始，我把这个模态框的教程写完整。请看效果： 这个模态框功能相对比较完整，应该能满足

这个模态框功能相对比较完整，应该能满足大部分的使用场景了，相信看完这个系统的文章后，你应该就能开发出一个自己的模态框了。 其实看似简单，其实比较复杂的，react 有其天生的缺陷，如何绕开它的缺点，我

我在上次的Draggable组件的设计中给了一个简化的方法，今天我来完善一下这个组件，可用于任何可移动组件的包裹。完善后的效果如下所示： 这个优化中，增加了一个注目的效果，还增加了触发可拖动区域的指定

春节终结束了，忙得我头疼。终于有时间弄自己的东西了。今天来写一个关于拖动的实例讲解。先看效果： 这是一个简单的组件设计，如果用原生的js设计就很简单，但在React中有些事件必须要多考虑一些。这是一个

自定义组件是每个前端开发者必备的技能。我们在使用现有框架时难免有一些超乎框架以处的特别的需求，比如关于弹窗，每个应用都会用到，但是有时我们使用的框架中提供的弹窗功能也是功能有限，无法满足我们的应用需求

前言 兄弟们点个关注点点赞，有什么建议在评论里留言说一下，一定要和我多多互动啊，这样我才有动力创作出更有品质的文章。 这节课我们用前两节课的知识做一个实践，在实战中巩固我们所学。本来我想借用官方的示例

有了上一节的铺垫，基础环境我们已经创建好了，再次运行它 在浏览器中打开地址：http://localhost:5173, 并在浏览器中右击，选择检查菜单项，打开控制台，如下图所示 这是我们上节课操作的

前言 随着JS的发展，基于JS应用几乎是无处不在，于是乎，众多框架应运而生。react就是众多优秀框架中不可多得的之一。框架这东西，每个程序员心里都有一个不同的排名。各见所爱了。我写这个一系列的教程一