React in the field

Next.js 使用本地自定义字体十分简单，只需要指定好字体文件的加载路径，然后通过 className 设置给需要自定义字体的元素即可。

Framer Motion 是一个强大的动画库，它提供了简单、强大和可扩展的 API用于创建各种类型的动画效果。 本文介绍Framer Motion 的基本使用和如何使用其提供的 API 实现滚动动画

这篇文章简单介绍了如何制作一个搜索组件的 UI，使用了Tailwind CSS + shadcn/ui

获取滚动距离是页面中常见的操作， 在原生 DOM 操作中一般是通过添加 scroll 事件监听可以获取到滚动位置，在 React 应用中，如何将这一部分逻辑封装成一个 hook方便使用、维护和复用代码

使用 react-countup 组件实现数值滚动特效。基于CoumtI[.js 实现的 React 组件

在 React 中，如果使用的是类组件可以通过 this.ref.current.state 直接获取绑定 ref 后子组件中的状态。但是函数组件无法这样直接获取子组件中的状态。

输入组件一般都是字符串类型，在一些场景中需要输入多行数据，比如网址、名称等，封装一个支持多行输入的组件可以方便快速创建数据。 本文介绍如何基于 input 输入框组件封装一个多行输入组件

cron 是最常见的类 Unix 系统下的基于时间的任务管理系统，在实现定时任务场景中较常使用。 本文介绍如何实现一个前端时间选择组件，其中绑定的值使用 cron 的时间格式，方便传递给后端存储使用。

后台系统中使用模块较多时，一般都会通过一级菜单二级菜单来组织模块。一级菜单通常都是作为模块导航和入口，跳转到第一个二级菜单。 如果实现了权限控制之后，就需要根据当前用户拥有的权限判断一级菜单跳转

页面权限是后台系统中非常常见的需求，在前端实现页面权限和按钮权限是为了确保用户只能访问其有权访问的页面，并执行其有权执行的操作。本文介绍前端实现页面权限和按钮权限控制的流程和逻辑。

React 中父组件通过 ref 属性可以操作子组件中暴露的实际 DOM 元素或者暴露的自定义函数。本文介绍如何使用 forwardRef 这一 API 实现父组件获取和操作子组件

React Router 是 React 应用中最常用的路由库之一，路由鉴权是确保应用安全性和数据保护的关键部分。本文将介绍如何使用 React Router 实现路由鉴权以及如何限制用户访问特定页面

React 提供了一系列 Hook 来帮助我们组织代码逻辑，如 useState, useEffect 等。 我们也可以实现一些自定义 Hook，将逻辑封装复用，让代码更加可读和更易维护。

页面中为一些元素加入适当的动画效果可以对带来非常不错的用户体验，本文介绍如何使用 Headless UI 的 Transition 组件实现简单的动画组件。

本文介绍在 Next.js 项目中如何正确配置ESLint, Prettier, huskyt + lint-staged 和使用这些工具，帮助我们提升开发效率和团队内的统一代码风格、规范。

使用 next-themes 两行代码为 Next.js 项目添加暗黑模式。Perfect Next.js dark mode in 2 lines of code

头部导航栏几乎是每个网站必备的元素，可以提供快速的页面跳转和主要信息展示。本文介绍以 Next.js 框架，结合 Tailwind CSS, Headless UI 如何制作一个响应式头部导航栏组件。

在为项目国际化时，根据不同语言选择切换对应语言文案都已经有了成熟的解决方案。但是如果遇到需要根据不同语言展示不同国家名称时，需要如何处理呢？ 本文介绍这一场景的几种处理方案。

侧边栏是网站中的重要导航组件，尤其在后台系统中，提供了方便的菜单导航。本文介绍通过 Media Query 和 Drawer 组件配合，实现一个兼容移动端的响应式侧边栏。

搭建 React 项目的几种方案介绍。以及 React 生态圈内会常用到的一些技术方案选择，如：样式方案、CSS-in-JS、路由、网络请求、全局状态管理、项目开发体验和工程化