React--从基础到实战
分享
文章平均质量分 92
带领大家从基础出发逐步深入🔥React🔥开发各个环节，掌握前端常用性能体验优化思路，打造完整前端工作流，提升工程化编码能力和思维能力。【🔥订阅后可在主页添加博主微信，为你答疑解惑🔥备注React专栏订阅】
超级会员免费看
codeMak1r.小新
codemak1r直译是代码制造者，也就是码农的意思
前端码农一枚，精通react、移动端、web端
展开
-
【React实战】create-react-app整合electron打造第一个桌面app
Electron 是一个跨平台的、基于 Web 前端技术的桌面 GUI 应用程序开发框架。使用 Web 前端技术来开发一个桌面 GUI 程序是一件多么炫酷的事情，你可以使用 HTML、CSS 来绘制界面和控制布局，使用 JavaScript 来控制用户行为和业务逻辑，使用 Node.js 来通信、处理音频视频等，几乎所有的 Web 前端技术和框架（jQuery、Vue、React、Angular 等）都可以应用到桌面 GUI 开发中。原创 2022-10-28 23:45:09 · 1153 阅读 · 7 评论 -
前端实战｜React18极客园——项目打包与优化
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React/小程序。原创 2022-10-19 18:30:26 · 1595 阅读 · 15 评论 -
前端实战｜React18极客园——编辑文章模块（文案适配、回显数据）
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React/小程序。原创 2022-10-19 18:28:20 · 640 阅读 · 3 评论 -
前端实战｜React18极客园——发布文章模块（切换单/三/无图、暂存图片列表）
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React/小程序。原创 2022-10-19 18:26:59 · 613 阅读 · 1 评论 -
前端实战｜React18极客园——内容管理模块（表格筛选、频道、分页、删除、编辑跳转）
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React/小程序。原创 2022-10-19 18:02:57 · 619 阅读 · 1 评论 -
前端实战｜React18极客园——布局模块（useRoutes路由配置、处理Token失效、退出登录）
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React框架与小程序。原创 2022-09-18 07:55:11 · 3171 阅读 · 198 评论 -
前端实战｜React18极客园——登陆模块（token持久化、路由拦截、mobx、封装axios）
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React框架。原创 2022-09-05 09:44:34 · 3258 阅读 · 169 评论 -
前端实战｜React18项目启动——pc端极客园项目前置准备
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React框架。原创 2022-08-24 08:30:00 · 22711 阅读 · 76 评论 -
React+Mobx｜综合项目实践（附项目源码、地址）
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React框架。原创 2022-08-22 10:44:00 · 1556 阅读 · 193 评论 -
React+Mobx｜基本使用、模块化
一个可以和React良好配合的集中状态管理工具，和Redux解决的问题相似，都可以独立组件进行集中状态管理mobx与react的关系，相当于vuex与vue的关系。redux、dva、recoil初始化Mobx的过程是怎样的？声明数据 -> 响应式处理 -> 定义action函数 -> 实例化导出Mobx如何配合react，需要依赖什么包？mobx-react-lite作为连接包，导出observer方法，包裹组件模块化解决了什么问题？维护性问题如何实现Mobx的模块化？......原创 2022-08-18 08:30:00 · 1889 阅读 · 220 评论 -
【React Router v6】编程式路由导航（useNavigate）
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React框架本文被专栏收录🕹坚持创作✏️，一起学习📖，码出未来👨🏻💻！原创 2022-08-17 10:31:25 · 2180 阅读 · 30 评论 -
【React Router v6】这17个API，你真的都懂了吗？(建议收藏)
本文被专栏收录🕹坚持创作✏️，一起学习📖，码出未来👨🏻💻！原创 2022-08-15 08:30:00 · 1870 阅读 · 214 评论 -
React router6--路由表多级路由嵌套的默认子路由问题
最近小新在写一个基于React Hooks+Mobx+axios+react-router-dom v6+antD的前端项目，在进行二级路由配置时遇到了一些问题。path：" / " 时，重定向到Layout的子组件Home，路径为 " /home "。组件，然后再去重定向，渲染出子组件Home。，用路由表来统一管理路由，但是这个时候问题出现了。但是再一看，当点击其他的子路由，比如这个例子中的。时，他会渲染对应的子路由，但是！这个属性上，再定义一组子路由规则，但是。打开界面一看效果，嘿～还真行，......原创 2022-08-13 22:49:30 · 1427 阅读 · 9 评论 -
【React Router v6】路由组件传参params/search/state(router v6)
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React框架。原创 2022-08-14 08:30:00 · 2530 阅读 · 58 评论 -
【React Router v6】快速上手react-router-dom6（对比 router5）
React Router 以三个不同的包发布到npm上，它们分别为：react-router：路由的核心库，提供了很多的：组件、钩子react-router-dom：包含react-router所有内容，并添加了一些专门用于DOM的组件，例如等react-router-native：包括react-router所有内容，并添加一些专门用于ReactNative的API，例如等与React Router 5.x版本相比，改变了什么？内置组件的变化：移除，新增。......原创 2022-08-10 08:30:00 · 9703 阅读 · 206 评论 -
React-Hooks进阶：useContext、useState回调、useEffect发送网络请求和useRef
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React框架。原创 2022-08-09 08:30:00 · 940 阅读 · 58 评论 -
【React扩展】2、PureComponent、ErrorBoundary、render props和组件通信方式总结
父子组件兄弟组件（非嵌套组件）祖孙组件（跨级组件）原创 2022-08-05 10:35:08 · 6216 阅读 · 105 评论 -
React-Hooks用法：useState()、useEffect()、useRef()
告别难以理解的Class解决业务逻辑难以拆分的问题使状态逻辑复用变得简单可行函数组件在设计思想上，更加契合React的理念1.需求描述:自定义一个hook函数，实现获取滚动距离Yconst [ y ] = useWindowScroll() y就是滚动到顶部的距离每次都有两次控制台输出是因为：React的StrictMode严格模式，忽略第二个输出即可。import {..................原创 2022-08-08 08:30:00 · 1042 阅读 · 72 评论 -
【React扩展】1、setState的两种写法、lazyLoad懒加载、Fragment标签和createContext()
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React框架。原创 2022-08-03 08:30:00 · 2498 阅读 · 57 评论 -
【react-redux】多个组件数据共享
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React框架本文被专栏收录🕹坚持创作✏️，一起学习📖，码出未来👨🏻💻！原创 2022-08-02 00:23:17 · 11192 阅读 · 196 评论 -
集中式状态管理＜react-redux＞基本使用与优化
容器组件和UI组件整合为同一个文件无需自己给容器组件传递store，给包裹一个标签，在Provider内传递store即可；使用了react-redux后也不用再自己监测redux中状态的改变了，容器组件可以自动完成这个工作；mapDispatchToProps也可以简单的写成一个对象；一个组件要和redux“打交道”要经过哪几步？定义好UI组件——不暴露；引入connect生成一个容器组件，并暴露，写法如下connect(value}),//映射状态{keyhttpshttps。......原创 2022-07-30 08:13:59 · 2204 阅读 · 163 评论 -
【Redux】异步action与同步action
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React框架😇本文被专栏收录🕹坚持创作✏️，一起学习📖，码出未来👨🏻💻！前面我们详细介绍了redux的工作流程，本文中我们将探索异步action。......原创 2022-07-21 11:39:31 · 3630 阅读 · 121 评论 -
Redux的工作流程
😎😎欢迎来到我的博客😎😎【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏🤩React框架。原创 2022-07-18 05:46:04 · 7835 阅读 · 230 评论 -
【antd】5分钟快速完成antd样式的按需引入以及自定义主题
流行开源的React UI组件库：antd UI组件库在使用的过程中，组件是默认按需引入的：从antd @V4开始，antd配套的icons图标库不集成在antd核心库中，如果需要使用antd配套的icons图标，需要另外安装图标组件包：使用icons图标时也是默认按需引入的：但是，官方默认的组件样式却是默认全部引入，使用时需要在组件中引入全部组件样式如果我们的组件中只需要使用到ant-design一小部分的组件，那么其他组件的样式是不是就浪费了呢，这样的话，浏览器编译css样式时，会出现首屏加载比原创 2022-07-14 08:48:35 · 7043 阅读 · 118 评论 -
【React】路由组件传参（三种方案params、search、state）
示例：示例重点在于：Message组件本身是一个路由组件，其又是Detail组件的父组件，在Message组件中注册Detail子组件，点击导航栏对应链接，将对应的message消息内容传递给子路由组件Detail。然后Detail接收到父路由组件Message传递的params参数，将内容显示在页面对应位置中。接下来展示Message与Detail组件源码：Message组件源码：Detail组件源码：Home组件源码：路由组件传参——params总结：上面我们学会了向路由组件传递params原创 2022-07-12 09:36:53 · 5717 阅读 · 194 评论 -
＜路由的模糊匹配与严格匹配＞react-router-dom入门级教程2
路由重定向一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由。原创 2022-07-08 14:05:16 · 1203 阅读 · 80 评论 -
＜前端路由原理＞react-router-dom入门级教程
1. 什么是路由？2. 路由分类前端路由依靠的是浏览器的BOM对象中的history，也就是浏览器的历史记录（history）。但我们一般不直接操作BOM身上的history，而是借助history.js去操作BOM。history模式的路由：hash模式的路由：（地址栏中带有 # 号）浏览器的历史记录（history）是一个栈的结构。浏览器的历史记录（history）是一个栈的结构。浏览器的历史记录（history）是一个栈的结构。重要是事情说三遍。每当执行push操作时，都是将path推入栈顶，浏览原创 2022-07-06 10:32:34 · 3899 阅读 · 130 评论 -
【React】github搜索案例实现兄弟组件通信（axios、PubSub、fetch）
在本案例中，使用的是搭建的脚手架，外面最大的是总的App组件。在App组件中可以分为两个子组件——Search以及List。Search包含搜索功能，在Search组件中发送网络请求，返回的数据由List组件渲染到页面中。这就表示一定存在Search组件到List组件的通信。也就是兄弟组件之间的通信。下载PubSubJS导入PubSubJS下载与导入axios首先我们要先分清，是谁需要订阅消息？谁需要发布消息？Search组件发起请求，发布消息fetch + PubSubJS实现——消息订原创 2022-07-01 12:47:04 · 1079 阅读 · 133 评论 -
＜前端人自己的跨域＞React-ajax以及setupProxy配置代理
安装axios输入命令后，可以在文件中查看是否安装完成如图出现axios：版本号，代表安装完成，可以使用～例如，我们需要点击按钮向服务器发送请求：首先我们需要使用 搭建一个服务器就像这样，服务器搭建好了，并且服务一旦开启就会被use中间件监听到，打印出“有人请求服务器1了”；开启服务：（或者）服务器开启在5000端口…由于浏览器地址栏默认发送的就是get请求，我们可以在地址栏输入：按下回车键，查看服务是否可以成功返回数据：可以看出，服务器可以正常返回数据。那么现在就是发送服务获取学生数据了：在中：尝试点原创 2022-06-29 08:37:17 · 2432 阅读 · 164 评论 -
＜前端组件化＞拆分组件思想--吃饭、睡觉、打代码案例（附源码）
功能: 组件化实现此功能1.显示所有todo列表2.输入文本,点击按钮显示到列表的首位,并清除输入的文本📌App.jsx📌App.cssHeader部分🛠Header-index.cssList部分🛠List-index.cssItem部分🛠Item-index.cssFooter部分🛠Footer-index.css✅案例总结案例总结：好啦～今天的案例分享就到这里了，如果有疑问或者文章出现错误的话请一定要联系我哟😎😎～非常感谢你的阅读，...原创 2022-06-05 17:15:45 · 5258 阅读 · 88 评论 -
【React】10、react父子组件传值（通信）
2、🍎子组件向父组件传值3、🍇总结在React中父子组件的传值是必须要掌握的，react也给出了很多种组件通信的方式，比如：👬兄弟组件通信，订阅消息，redux等等…本文目前只介绍了父子组件之间的通信方式，后续会在系列专栏中更新更多的组件通信方式以及更多优质的React文章，详情请看专栏（React–从基础到实战）～😊😊冰冻三尺非一日之寒，学习也是一个持续发力的过程💪💪，希望大家能够在自己的道路上披荆斩棘！GO WARRIORS！！回见～...原创 2022-06-02 09:43:24 · 1463 阅读 · 50 评论 -
【React】9、使用create-react-app（CRA）创建react项目
第一步，全局安装：第二步，切换到想创项目的目录，使用命令：第三步，进入项目文件夹：第四步，启动项目：你当然可以选择不全局安装你可以直接执行这样可以不安装create-react-app而直接创建你的脚手架项目你还可以执行创建一个支持TS语言的react脚手架项目。当看到这个界面在你的浏览器里自动打开的时候，你的脚手架项目就已经创建好了～ ---- 静态资源文件夹src ---- 源码文件夹App.css -------- App组件的样式App.test.js ---- 用于给App做测试index.css原创 2022-06-01 13:59:01 · 1009 阅读 · 29 评论 -
【React】8、react-getSnapshotBeforeUpdate()生命周期函数详解
使用react生命周期函数getSnapshotBeforeUpdate保持滚动条位置，从React入门开始，涵盖了React的一切基础，属于是从零开始的一个系列> 🍭文章会以图文结合-动图-代码实现-解释代码的形式带领大家走进React的世界> 🍭本系列会从React v16.8 开始 => 直到React v 18.0 新版旧版一起抓> 🍭持续更新中～希望大家能够喜欢，系列文章👉...原创 2022-05-29 16:56:23 · 1259 阅读 · 11 评论 -
【React】7、react新生命周期图文详解——最新版
👏欢迎来到我的React系列文章🍭本系列文章从React入门开始，涵盖了React的一切基础，属于是从零开始的一个系列🍭文章会以图文结合-动图-代码实现-解释代码的形式带领大家走进React的世界🍭本系列会从React v16.8 开始 => 直到React v 18.0 新版旧版一起抓🍭持续更新中～希望大家能够喜欢，系列文章👉点这里🌈博客主页👉点这里👋回见～🔥React入门与概览（JSX语法）🔥面向组件编程——组件实例的三大核心属性state、prop...原创 2022-05-29 15:50:48 · 1957 阅读 · 7 评论 -
【React】6、图文详解react组件生命周期——React v16.8
系列文章目录👏欢迎来到我的React系列文章🍭本系列文章从React入门开始，涵盖了React的一切基础，属于是从零开始的一个系列🍭文章会以图文结合-动图-代码实现-解释代码的形式带领大家走进React的世界🍭本系列会从React v16.8 开始 => 直到React v 18.0 新版旧版一起抓🍭持续更新中～希望大家能够喜欢，系列文章👉点这里🌈博客主页👉点这里👋回见～🔥React入门与概览（JSX语法)🔥面向组件编程——组件实例的三大核心属性state、pr...原创 2022-05-29 10:24:21 · 933 阅读 · 14 评论 -
【React】5、四行代码让我的cpu跑上90度——走进组件生命周期
系列文章目录React入门与概览（JSX语法）面向组件编程——组件实例的三大核心属性state、props和refs超详解受控组件与非受控组件（vue和react的双向绑定分别是怎么实现的？）文章目录系列文章目录示例效果代码实现？这才是真正的代码实现——组件的生命周期解释有这么一个示例效果：示例效果需求:定义组件实现以下功能：1.让指定的文本做显示/隐藏的渐变动画2.从完全可见，到彻底消失，耗时2S3.点击“不活了”按钮从界面中卸载组件代码实现？我一看到这个小示例，我立马就从原创 2022-05-28 14:01:58 · 781 阅读 · 21 评论 -
【React函数的柯里化】4、什么？这玩意儿不仅能装x，还能优化代码？
系列文章目录React入门与概览（JSX语法）面向组件编程——组件实例的三大核心属性state、props和refs超详解受控组件与非受控组件（vue和react的双向绑定分别是怎么实现的？）文章目录系列文章目录✅==高阶函数与函数柯里化==✅==高阶函数与函数柯里化的定义==✅==高阶函数与函数柯里化的示例==✅==示例效果==✅==一般写法==✅==优化代码实现==✅==疑问1：表单事件绑定==解释✅==疑问2：哪个函数是高阶函数？==✅==疑问3：哪个函数使用了函数柯里化？==演示函数柯原创 2022-05-27 10:46:17 · 949 阅读 · 25 评论 -
【React】3、受控组件与非受控组件（vue和react的双向绑定分别是怎么实现的？）
系列文章目录React入门与概览（JSX语法）面向组件编程——组件实例的三大核心属性state、props和refs超详解受控组件与非受控组件（vue和react的双向绑定分别是怎么实现的？）文章目录系列文章目录受控组件和非受控组件理解示例效果非受控组件编码受控组件编码受控组件和非受控组件理解包含表单的组件分类受控组件非受控组件示例效果需求: 定义一个包含表单的组件输入用户名密码后,点击登录提示输入信息非受控组件编码<script type="text/babe原创 2022-05-24 23:05:01 · 912 阅读 · 11 评论 -
【React】2、面向组件编程——组件实例的三大核心属性state、props和refs超详解
React面向组件编程文章目录React面向组件编程一、使用 React 开发者工具调试二、基本理解和使用2.1 函数式组件（适用于简单组件<无状态组件>的定义）2.2 类式组件（适用于复杂组件<有状态组件>的定义）三、组件实例的三大核心属性1、状态（state）理解强烈注意示例效果state 标准写法state 简写2、props理解作用编码操作示例效果在类式组件中使用props在类式组件中使用props-简写在函数式组件中使用props3、refs理解示例效果字符串形式的ref原创 2022-05-24 13:23:46 · 1225 阅读 · 36 评论 -
【React】1、React入门与概览（JSX语法）
React入门文章目录React入门一、React全家桶1. React是什么?2. 谁开发的?3. 为什么要学?4. React的特点5. 学习React之前要掌握的JavaScript基础知识二、React 概览组件JSXVirtual DOM关于虚拟DOM：Data Flow三、React基本使用相关js库四、React JSXJSX 语法规则五、模块与组件、模块化与组件化的理解5.1 模块5.2 组件5.4 模块化5.5 组件化一、React全家桶React基础React-Router(R原创 2022-05-21 23:05:35 · 972 阅读 · 4 评论