Reactjs

Shadcn UI 现代 UI 组件库 前言 不知道大家是否使用过 Shadcn UI，它在Github 上拥有了 35k star，它与大多数 UI 组件库(如 Ant desgin 和 Chakr

上周 Next.js 14 发布了，该版本相较于 13，没有任何 API 变更，主要更新点是 Turbopack 带来了大幅的性能提升以及 Server Actions 功能进入稳定版本。

本文介绍了 openai 的 api 使用方法，以及如何使用 openai 的 playground 生成需要的 messages 信息。并且通过一个 Next.js 实战例子，结合 ChatGPT

习惯使用 markdown 写作的朋友，肯定会有自己的图床，七牛云的对象存储对于个人用户每月免费 10GB，可谓是白嫖的上上之选，只需要注册后，绑定一个域名就可以使用了。

本文例举创建 react 应用的常见 7 种方式，首先，我们第一个是想到的是 react 官方团队提供的脚手架工具 Create React App(cra) 项目是零配置。

阅读本文，你将收获： 学会使用 Monaco Editor 开发多文件编辑器；学会使用 mdx 在线编译 ；实现剪切板的劫持；学会使用云函数和云数据写接口；

有时候我们使用了useMemo useCallback 来优化性能，这些函数与外围的 state 形成闭包，导致缓存函数中获取到的 state 不是最新的值，这就是闭包陷阱。

本文，我们从零开始，使用 Next.js 和 pnpm 搭建了一个组件库文档，主要使用 Next.js 动态导入功能解决了开发服务缓慢的问题，使用 Next.js 的 SSG 模式来生成静态文档。

今天我们就聊一聊权限系统的设计与实现，要在网站中实现复杂的权限管理对应新手来说，这可能会是比较困难的，但权限系统是软件中不可或缺的部分，我们只要掌握一个套路，就会变得非常简单，一起来看看吧！

Next.js 提供了 CSR、SSR、SSG、ISR、 Streaming 这么多渲染方式，本文就从渲染方式方面来讲解，让我们可以更好地理解 Next.js 以及使用 Next.js。

上周发布了 Next.js 的一个全新的版本 13，它带来了全新的理念（server component），作为一名 Next.js 的爱好者，我们有必要重新学习和认识下它。

在本文中我们给 Next.js 应用配置了 vitest 和 React-testing-library 测试环境，这套配置同样适用于其他 react 项目，只需要依照步骤配置即可。

在上一篇文章中，我们使用 prisma 和 Next.js，创建了一个视频网站，本文将继续开发视频网站，实现邮箱登录、 Github 授权登录，以及密码登录。

本文将以实现一个视频网站为例，介绍 Next.js 和 Prisma 开发的全过程，prisma 对于 Next.js 来说，可谓是如虎添翼，有了它们，我们前端工程师轻松步入了全栈开发。

今天我就得带大家来白嫖一下 Notion 数据库，让我们的个人应用轻松上线，本文记录了利用 Next.js 和 Notion API 编写了一个前端刷题网站的全过程。

本文主要介绍了使用 strapi 和 Next.js 实现了一个简易的微博，我们不必写后端，只需要后台配置便可以创建 api 接口，通过本文，我相信你对 strapi 有了一定了解。

在本文中，我将分享我的方法，通过掘金 API 打造个性博客，只要在掘金发表文章，就会自动同步到自己的博客中。

本文基于我之前写的一篇文章《Markdown 写 PPT 是如何实现的？》，我们要在此之上实现视频录制的功能。

在开发过程中，我们经常需要用到代码对比，对比下代码是否一致，有哪些改动，方便我们可以查看问题，今天我们就来说实现下，其实很简单。

在 web 开发中，少不了用户系统，开发者需要开发注册登录这些重复的功能，而对于用户来说，要要注册才可以使用，往往会不愿意，因为我们有太多的账号和密码了，而现在可以使用小程序来实现扫码登录。

大多情况下，我们不必上传自己的图标，只需要在 iconfont.cn 便捷的搜索，就可以将图标加入到自己的项目图标库中，但最近工作中却遇到了比较严重的问题。

所以我写了一个油猴脚本，可以在 iconfont.cn 上直接复制 React component 代码，本文讲述改脚本的实现原理。

Vite 充分利用了浏览器的加载机制和缓存机制等，大大提示了研发效率，vite 虽然快，但不是所有的项目react 项目都可以迁移成功

前段时间在掘金 app 多了一个推广中心，分享课程链接，若有其他用户从你分享的链接购买，你就可以获得佣金，本篇介绍下全民分销功能实现原理。

在 web 应用中，模拟编辑器的输入效果，往往能够吸引人们的眼球，让用户的注意力聚焦在输入的内容上，其实使用的是 web 动画模拟打字机效果，本文将和大家探讨打字机效果的实现方式以及应用。

这两天公司一位妹子问我，“我这边调试的时候本地显示没问题，到手机端就有问题，该怎么办呢？” 测试环境没问题到线上就有问题了？对此我也很纳闷。

我写了一个微信排版编辑器，使用 MDX，可自定义组件、样式、生成二维码、代码 diff 高亮，可导出 markdown 和 PDF。

本文介绍了生成缩略图的方式，包含客户端生成，和服务端生成，并简要分析了阿里云、腾讯云和 vercel 生成浏览器截图的方式。

前段时间掘金上线了一个新功能 Code pen，可以在线写代码，笔者对这种在线实时编辑的功能充满了好奇，所以打算开发一个简易的 Code pen。

Monaco Editor 是 VS Code 中使用的开源代码编辑器， 拥有代码高亮和代码自动补全的功能，本文介绍 Monaco Editor 的加载方式和 React 组件封装

在上文中，我们使用 monaco-editor 结合 Next.js，打造了编辑器的功能，在本文中，我们将继续优化 monaco-editor， 使它拥有代码格式化的功能。

前面的文章中，我们配置好了编辑器，实现了 css、html、js 的编辑，现在我们需要做代码实时运行的功能了，并且可以直接写 less、scss、JavaScript、typescript。

本篇主要介绍如何使用 uniapp 中的云函数和云数据库，并且通过云函数 URL 化，来给外部应用访问。

通常我们在开发博客网站或者技术社区（类似掘金）这类网站的时候，就会有需求“对代码进行语法高亮”，本文主要记录笔者在开发的时候遇到的问题以及解决方案。

在 webpack 5 中推出了 experiments 配置，目的是为了给用户赋能去开启并试用一些实验的特性。Lazy Compilation 是只有在用户访问时才编译。

上周 react 官网 发布了react@rc 版本，该版本是候选版本(Release Candidate)，这意味API已经基本稳定，跟最终版本不会有太大差别，官网也发布博客《如何升级到 react18 RC 版本》，鼓励大家尝试升级，所以我们可以在项目组中使用了！下面内容来自是官方文档的翻译。

在本文中，我将介绍如何在 react 项目中使用 react-three-fiber 创建的一个3D 软件程序，配置3D 参数(如 Blender 或 Maya ) 。在本文结束时，您将能够在您的网站上渲染一个3D模型 (gltf / glb)。

我们在上网的时候经常会看到一些优秀的博客顶部有个进度条，这个进度条有助于读者衡量阅读进度，我认为这个功能可以带来良好的用户体验，所以，应该将其添加到我个人博客上的文章中。

MDX 是一种书写格式，允许你在 Markdown 文档中无缝地插入 JSX 代码。 你还可以导入（import）组件，例如交互式图表或弹框，并将它们嵌入到内容当中。

本文推荐 HTML 转为 markdown 的工具和实现方式，并找到了一个快捷技巧，收藏等于学会。

在本文中，我将对比 Next.js 和 Remix 的一些重要特性，来帮助您选择最佳的React 服务端渲染框架。

React PDF 是一个使用 React 创建 PDF 文件的工具，支持在浏览器、移动设备和服务器上创建PDF文件。

前两天我准备用 create-react-app 创建一个新项目，然后遇到了一个问题，涉及到 npx

现在大部分网站也加入了暗黑模式，包括 Tailwindcss、antd design 等都支持了暗黑模式，因此我们的网站也要适配系统皮肤。

老板买了一个抽奖程序，我使用 react 来实现一版与公司年会一模一样的功能，并且还可以设置内定名额。

本文承接上文 如何测试 React 异步组件？，这次我将继续使用 @testing-library/react 来测试我们的 React 应用，并简要简要说明如何测试路由系统。

前言 2016年起，低代码概念开始在国内兴起，当年该行业总共有 10 起融资事件，之后低代码行业融资笔数整体呈上升趋势，并在2020年增长至14起，其中亿元以上融资有13起。

前言 https://beta.reactjs.org React 的新的文档已经 完成了 70 % 并且呼吁社区进行翻译工作。 新的文档采用了全新的架构 next.js + Tailwind CSS

esbuild 是一个非常快的 Javascript 打包工具，本文结合 react 对 esbuid 这个打包工具进行了简单使用。

React 进阶 、Vue 转 React、优质的 React 开源项目，React 源码解读、react hooks 总结。

前言 本文承接上文 如何测试驱动开发 React 组件？，这次我将继续使用 @testing-library/react 来测试我们的 React 应用，并简要简要说明如何测试异步组件。

这是笔者第三次重构博客应用。本文主要是笔者记录重构博客所用的知识和记录，希望以后每周或者每两周能够有一篇文章，记录和总结知识。

- 当处理量很大时，应该使用 useMemo - 从什么时候 useMemo 变得有用以避免额外处理，阈值在很大程度上取决于您的应用程序 - 数据在处理非常低的情况下使用 useMemo

​ 首先我们就回顾一下，我们到底是怎么告别了使用 php/jsp 做服务器端渲染，进入前后端分离的客户端渲染时代，又为什么重新回到了服务端渲染。