React
在NextJS中为rehype代码块添加复制按钮
ReactTypeScript本文介绍了作者在博客中使用rehype-pretty-code和shiki来美化代码块时,如何通过React Server Components和自定义MDX组件,解决在NextJS中使用带复制按钮的代码块时遇到的问题,并在不同的格式(MDX和Org-mode)下实现了功能的具体方法。
关于TypeScript结合React开发的一些技巧
ReactTypeScript这篇文章介绍了作者在前端项目中使用 TypeScript 与 React 的一些经验。文章首先推荐使用 TypeScript 的自动推断功能,这样可以减少一些类型标注的工作。然后介绍了一些 TypeScript 的工具类型,如 Omit 和 Pick,这些工具类型可以帮助我们重用类型定义,避免重复工作。接着,文章讨论了在 TypeScript 中引入不明确性的问题,并推荐使用 declare 全局声明和声明合并来解决这个问题。此外,文章还介绍了 useRef 的类型,以及如何使用类型收窄和条件渲染来实现更简洁的代码。最后,文章给出了如何解决项目中大量的条件渲染问题的一些建议,例如使用组件工厂或组合。
TypeScript实现互斥参数
ReactTypeScript作者想通过 typeScript 的类型定义来限制一个函数的两个参数只能取其一。但是按照 TypeScript 的类型系统,直接将参数定义为两个 interface 的联合类型是没有用的,因为联合类型允许同时存在两个类型的值。而 `never` 类型可以表示一个只会抛出异常或者内部死循环的函数的返回值,并且任何其他类型的值都不能赋值给这个类型的变量,作者利用这个性质来限制了参数的取值范围,从而保证用户只会使用两个互斥属性中的一个。
Django+React全栈开发:前言
ReactRESTDjango这篇文章主要介绍了如何使用Django和React进行开发。它首先列出了开发环境,包括后端的后端Django、DRF,前端的React、NextJS、TailwindCSS,以及操作系统Manjaro Linux。然后,它介绍了阅读本系列文章需要具备的前置基础,例如Python和JavaScript语法基础,以及一台可用的电脑。最后,它介绍了该系列文章的许可协议和问题交流方式。
论博客的进化与前端发展史
ReactDjango这篇文章描述了作者使用NextJS重新构建个人博客的技术栈变更历程。作者一开始使用Django和MySQL搭建了博客,但随着对前端技术的学习,他逐渐将博客的后端部分提取出来,使用RESTful风格的API和Docker来部署。为了解决SPA单页应用的SEO问题,作者使用了NextJS框架,它采用约定式路由和服务端渲染的方式来实现更好的搜索引擎优化。NextJS还提供了Link组件和Shallow Routing等功能,可以在不重新加载整个页面的时候更新部分内容,从而提高页面的切换速度。作者还使用了GraphQL和Serverless技术来进一步优化博客的性能和部署方式。最后,作者表达了对未来使用Blazor框架来构建SPA后台的计划。
Django+React全栈开发:代码组织
React这篇文章讨论了在 JavaScript 中使用 ES6 模块组织代码的方法,包括导入和导出模块、模块的命名和别名、以及如何将代码组织成不同的模块。文章还介绍了在 React 中如何将组件拆分成不同的模块,以及如何使用默认导出的文件。
Ant Design Pro页面内切换组件问题
React这篇文章主要讨论了在`Ant Design Pro`中使用`Tab`组件切换不同详情内容的实现方法。作者首先介绍了遇到的问题,然后提出了几种可能的解决方案,最终采用结合`React`的`Suspense`和`React.lazy`实现动态引入子组件的方法。文章还讨论了在工程实践中权衡项目进度与代码优化的重要性。