一系列关于 React 生态系统的精彩内容。

• React
  • React 通用资源
  • React教程
  • React 开发工具
  • React框架
  • React组件库
  • React状态管理和数据获取
  • React 样式
  • React路由
  • React 库
  • React 测试
  • React 超棒组件
  • React 组件沙箱
  • React 表单
  • React 表格​​和网格
  • React 地图
  • React 图表
  • React渲染器
  • React国际化
  • React图形和动画
  • React 集成
  • React 真实应用
• React Native
  • React Native 通用资源
  • React Native 导航
  • React Native 超棒组件
  • React Native 库
• 贡献

• React 官方网站
• React GitHub
• Reactiflux Discord频道
• React社区
• React 大会
• React CodeSandbox Playground

• React官方教程
• 在 Visual Studio Code 中使用 React
• React面试题及答案
• 用于构建强大 Web 应用程序的设计模式和组件模式
• 一个简单、可扩展且功能强大的架构，用于构建可用于生产环境的 React 应用程序
• 面向经验丰富的 React 开发人员的入门速查表……

📚 一本免费书籍，讨论了在使用React进行开发时使用的设计模式/技术。

• GitBook
• 网站
• PDF
• 移动端
• ePub

• 简体中文

• 简而言之

• 沟通
  • 输入
  • 输出
• 事件处理程序
• 作品
  • 使用 React 的 children API
  • 将儿童当作道具
  • 高阶分量
  • 作为子对象，渲染属性
• 受控输入和不受控输入
• 展示和容器组件

• 单向数据流
• 通量
  • Flux架构及其主要特征
  • 实现 Flux 架构
• 重制版
  • Redux架构及其主要特点
  • 使用 Redux 的简单计数器应用程序

• 依赖注入
  • 使用 React 的上下文（16.3 版本之前）
  • 使用 React 的上下文（版本 16.3 及以上）
  • 使用模块化系统
• 造型
  • 经典的 CSS 类
  • 内联样式
  • CSS模块
  • 样式组件
• 集成第三方库
• React 和关注点分离

本书中使用的代码示例可在此处获取。

• React 设计原则
• …

30 天 React 学习计划

_{作者：Asabeneh Yetayeh
，2020 年 10 月}

第一天 >>

🧡🧡🧡 编程愉快 🧡🧡🧡

支持作者创作更多教育材料

• 介绍
• 要求
• 如何使用仓库
  • 点赞并 Fork 此仓库
  • 克隆你的分支
  • 创建新分支
  • 结构练习解决方案
  • 承诺练习……

真实的 React 应用及其开源代码库，供开发者学习。

向经验丰富的开发者编写的 React 应用学习。

您可以在子目录中找到应用程序的源代码apps/。

感谢所有参与过此仓库所链接项目的开发者，你们的工作正在帮助开发者学习 React。

# Clone this git repo:
git clone git@github.com:jeromedalbert/real-world-react-apps.git

cd real-world-react-apps/

# The apps are linked to as git submodules.
# This will take some time... (see comment below for possible speedup)
git submodule update --init

# OR if you've got git 2.9+ installed try to run updates in parallel:
# git submodule update --init --jobs 4

下面的一些示例使用了ag，但也可以使用 grep 或等效命令。

# Look for

React模式、技巧、提示和窍门的汇编。

Gitbook 格式：https://vasanthk.gitbooks.io/react-bits

Github仓库：https://github.com/vasanthk/react-bits

您的贡献我们衷心欢迎♡。(✿◠‿◠)

社区翻译：

• 中文版（Chinese）：react-bits-cn
• 한국어（韩语）：react-bits-ko

• 设计模式与技巧
  • JSX 中的条件语句
  • setState() 的异步特性
  • 依赖注入
  • 上下文包装器
  • 事件处理程序
  • 通量模式
  • 单向数据流
  • 展示形式与容器形式
  • 第三方集成
  • 将函数传递给 setState()
  • 装饰师
  • 功能标志
  • 组件开关
  • 深入组件
  • 列表组件
  • 通过组件格式化文本
  • 分享跟踪逻辑
• 反模式
  • 介绍
  • 初始状态下的道具
  • findDOMNode()
  • 混合料
  • 组件WillMount()中的setState()
  • 变异状态
  • 使用索引作为键
  • 将属性传播到 DOM 元素
• 处理用户体验差异
  • 介绍
  • 编写用户体验变体
  • 切换用户界面元素
  • 用于功能切换的高阶组件
  • HOC属性代理
  • 包装组件
  • 显示顺序变化
• 穿孔技巧
  • 介绍
  • shouldComponentUpdate() 检查
  • 使用纯组分
  • 使用重新选择
• 造型
  • 介绍
  • 无状态 UI 组件
  • 样式模块
  • 样式函数
  • NPM ……

TypeScript 中的 React 和 Redux - 完整指南

“本指南是一部不断更新的汇编，记录了使用TypeScript以函数式风格使用React（及其生态系统）的最重要模式和方法。它将帮助你编写完全类型安全的代码，同时专注于从实现中推断类型，从而减少因过多类型注解而产生的噪音，并使编写和维护正确的类型变得更加容易。”

觉得有用吗？想了解更多更新内容？

点赞⭐以示支持

---

什么是新的？

🎉现已更新，支持TypeScript v4.6 🎉 🚀 _已更新至typesafe-actions@5.x🚀

---

• 完全的类型安全（带--strict标志），不会在应用程序的所有层级中丢失类型信息（例如，不使用类型断言或any类型修改）。
• 利用 TypeScript 语言的高级特性（例如类型推断等），消除类型中的冗余，使类型注解更加简洁。

这是一份超棒的组件列表。注意，它并非囊括所有 React 组件的完整列表。那么，“超棒”究竟意味着什么呢？嗯：

• 它解决了一个实际问题。
• 它以一种独特、美丽或卓越的方式做到这一点。（而且它并不十分流行或广为人知……所以就不一一列举了。）
• 它有最新的代码提交记录！

留意带有🚀标记的优秀项目。在一些值得关注的项目列表中，还可以查看维护者在列表末尾（斜体括号内）提供的简要评论和评价。

维护者：

• @petebray ， Fluxguard的作者——监控生产网站的变化。
• @brillout ， vite-plugin-ssr（类似于 Next.js / Nuxt，但作为专注于做好一件事的 Vite 插件）和Telefunc（远程函数而不是 API）的作者。

请阅读我们的贡献指南。为了保持列表的更新，我们要求所有 PR 都必须从列表中删除一个或多个不优秀的条目……

• 英语
• 中文

• 易于学习和使用
• 支持 SSR
• 针对特定功能进行特殊处理，避免闭合问题
• 包含大量根据业务场景优化的高级钩子
• 包含一系列基础钩子
• 使用 TypeScript 编写，具有可预测的静态类型

$ npm install --save ahooks
# or
$ yarn add ahooks
# or
$ pnpm add ahooks
# or
$ bun add ahooks

import { useRequest } from 'ahooks';

$ git clone git@github.com:alibaba/hooks.git
$ cd hooks
$ pnpm run init
$ pnpm start

打开浏览器并访问http://127.0.0.1:8000

我们欢迎所有贡献，请先阅读我们的CONTRIBUTING.MD文件，让我们一起构建一个更好的 hooks 库。

感谢所有贡献者：

🇬🇧 英语 | 🇨🇳 简体中文| 🇮🇹 意大利语| 🇪🇸 西班牙语| 🇺🇦 乌克兰语| 🇧🇷 巴西葡萄牙语| 🇵🇱 波兰| 🇯🇵 日本语| 🇹🇷 土耳其

自定义 React Hooks 允许开发者将组件的业务逻辑抽象成单个可复用的函数。
我注意到，我创建并与其他项目共享的许多 Hooks 都涉及回调、引用、事件以及组件生命周期管理。
因此，我创建了 [此处应填写具体项目名称]，这是一个实用的React Hooksbeautiful-react-hooks集合，可以帮助其他开发者加快开发流程。 此外，我致力于创建一个简洁实用的 API，强调代码可读性，同时尽可能降低学习难度，使其适合大型团队使用和共享。——请在使用前阅读……

👍
react-use

^{精选React Hooks移植 版 ：🇨🇳 汉语libreact}

npm i react-use

• 传感器
  • useBattery— 跟踪设备电池状态。
  • useGeolocation— 跟踪用户设备的地理位置状态。
  • useHover并且useHoverDirty— 跟踪鼠标悬停在某个元素上的状态。
  • useHash— 跟踪位置哈希值。
  • useIdle— 跟踪用户是否处于不活跃状态。
  • useIntersection— 跟踪 HTML 元素的交点。
  • useKey，，，useKeyPress和useKeyboardJs—useKeyPressEvent轨道键。
  • useLocation并useSearchParam跟踪页面导航栏位置状态。
  • useLongPress— 跟踪某个元素的长按手势。
  • useMedia— 跟踪 CSS 媒体查询的状态。
  • useMediaDevices— 跟踪已连接硬件设备的状态。
  • useMotion— 跟踪设备运动传感器的状态。
  • useMouse并useMouseHovered跟踪鼠标位置状态。
  • useMouseWheel— 跟踪鼠标滚轮滚动的Y轴偏移量。
  • useNetworkState— 跟踪浏览器的网络连接状态。
  • useOrientation— 曲目…

ui.dev团队出品的一系列现代化的、服务器安全的 React hooks 。

兼容 React v18.0.0+。

npm i @uidotdev/usehooks

• 使用电池
• 使用ClickAway
• 使用复制到剪贴板
• 使用计数器
• 使用防抖
• 使用默认值
• 使用文档标题
• 使用网站图标
• 使用地理位置
• 使用历史状态
• 使用鼠标悬停
• useIdle
• 使用交叉观察器
• 使用 IsClient
• 使用 IsFirstRender
• 使用列表
• 使用本地存储
• 使用锁定身体滚动
• 使用长按
• 使用地图
• 使用测量
• 使用媒体查询
• 使用鼠标
• 使用网络状态
• 使用对象状态
• 使用方向
• 使用首选语言
• 使用上一个
• 使用队列
• 使用渲染计数
• 使用渲染信息
• 使用脚本
• 使用会话存储
• 使用集
• useThrottle
• 使用切换
• 使用可见性更改
• 使用窗口滚动
• 使用窗口大小

npm i @uidotdev/usehooks@experimental react@experimental react-dom@experimental

• 使用连续重试
• 使用倒计时
• 使用事件监听器
• useFetch
• 使用间隔
• 使用间隔
• 使用按键
• 使用日志记录器
• 使用页面离开
• 使用随机区间
• 使用超时

面向经验丰富的 React 开发人员的 TypeScript 入门速查表

网络文档|西班牙语|葡萄牙语|贡献！ |问！

👋 这个仓库由@swyx、@eps1lon和@filiptammergard维护。我们很高兴你们想尝试将 TypeScript 与 React 结合使用！如果发现任何错误或遗漏，请提交 issue！👍

| |

• 基础速查表旨在帮助 React 开发者快速上手在 React应用中使用 TypeScript。
  • 重点在于提供有见地的最佳实践和可复制粘贴的示例。
  • 过程中会解释一些基本的 TS 类型用法和设置。
  • 解答最常见的问题。
  • 不详细讲解泛型类型逻辑。我们更倾向于教授新手简单的故障排除技巧。
  • 目标是在不学习过多TS知识的情况下，有效地使用TS。
• 高级速查表旨在向编写代码的人员展示和解释泛型类型的高级用法……

我们正在寻找人来帮忙完成最新的Coinbee挑战。如果您有兴趣，请通过我们的 Slack 社区或我的网站alexgurr.com联系我们！

一系列难度各异的ReactJS 编程挑战。点击此处深入了解原因。

对 React 的基础知识/理念感兴趣吗？请查看react-philosophies GitHub 代码库。

Time To Estimate是一款简单有趣的工具，敏捷团队可以远程协作估算任务。完全免费，无需注册。

mixmello。创建您最喜欢的 Spotify 播放列表的混音版本。

不必要的重新渲染，精细的控制。

状态/共享状态，DOM 操作。

数据可视化和图表绘制。API 使用。

正在加载状态，API 使用情况。

WebSocket、事件、回调和 React Hooks。与Botty对话……

如果您喜欢这个项目，请点击⭐。非常欢迎您提交 Pull Request。请关注我的推特账号@SudheerJonna获取技术更新。

注意：本仓库专门针对 ReactJS。有关核心 JavaScript 问题，请查看JavaScript 面试题。

重要通知：

截至 2023 年 5 月，所有 30 秒内容库都已合并到30 秒代码库中。

请关注、收藏并关注那里的相关活动。

满足您所有开发需求的简短 React 代码片段

• 请访问我们的网站查看我们的代码片段集。
• 使用搜索页面查找符合您需求的摘要。您可以按名称、标签、语言或摘要描述进行搜索。只需输入关键词，即可查看搜索结果。
• 浏览React 代码片段集合，查看此项目中的所有代码片段，或者点击同一页面顶部的各个标签，将搜索范围缩小到特定标签。
• 点击每个代码片段卡片即可查看完整的代码片段，包括代码、解释和示例。
• 您可以使用代码片段卡片底部的按钮在 Codepen 中查看代码片段。
• 如果你喜欢这个项目，请捐赠……

一份包含可编辑示例的速查表💪

• React Hooks API 的一站式参考指南
• 不能取代官方文档。
• 但是，它包含了实际的代码示例，每个示例都模拟了所有钩子 API。
• 包含一些你可能会遇到的真实案例/问题示例
• 最重要的是，该速查表包含可实时编辑的代码。

• 包含实时示例🙋‍

👉🏿👉🏿👉🏿 开始使用

• 为所有钩子添加示例调用签名
• 添加更多示例，解释官方Hooks 常见问题解答中有趣的用例。

欢迎任何形式的贡献。如果您想完成上述任何待办事项，请随时提交 PR。对速查表有任何有趣的想法？也欢迎提交 PR :)

我精心收集了一些关于 React、Redux、ES6 等方面的教程和资源链接，旨在为想要学习 React-Redux 生态系统的人提供高质量的文章和资源，同时也为想要了解高级主题和技巧的人提供优质信息。虽然算不上“完美”，但我希望它能成为一个有用的起点。欢迎提出建议。

另一个重要的资源是Discord 上的 Reactiflux 社区，它设有专门讨论 React、Redux 和其他相关技术的聊天频道。总有不少人在那里交流并解答问题，是提问和学习的好地方。邀请链接是https://www.reactiflux.com。

您可能还想查看我整理的 Redux 相关插件、库和工具的分类列表，网址为Redux Ecosystem Links。另请参阅社区资源，其中包含其他链接列表、播客等的链接……

中文版README文件

日文版 README 文件

韩语版 README 文件

葡萄牙语（巴西）版 README 文件

俄语版 README

西班牙语版 README

2019年成为React开发者的路线图：

下面这张图表展示了你可以选择的学习路径以及成为 React 开发者需要学习的库。我制作这张图表是为了给所有问我“作为一名 React 开发者，接下来我应该学习什么？”的人提供一些建议。

这份路线图旨在帮助您了解行业概况。如果您对下一步学习方向感到迷茫，这份路线图将为您提供指导，而不是鼓励您盲目追求潮流。您应该逐渐理解为什么某些工具在某些情况下比其他工具更合适，并且记住，潮流并不总是意味着最适合……

超棒的 React Hooks 资源

• React Hooks 文档

• React Hooks RFC

• Dan Abramov 的《理解 React Hooks》
• Octave Raimbault 的《从 React.Component 到 hooks》
• 《React Hooks：我的测试会怎么样？》作者：Kent C. Dodds
• 《使用 React Hooks 进行状态管理——无需 Redux 或 Context API》，作者：André Gardi
• Robin Wieruch 撰写的《如何使用 React Hooks 获取数据？》
• React Hooks入门
• React Hooks - 深入探讨 useContext 和 useReducer
• James King 的文章《使用自定义 React Hooks 简化表单》
• 使用 Axios 测试用于获取数据的自定义 React Hook
• 《React Hooks学习指南（示例与教程）》作者：Eric Bishard
• 《理性地测试 React Hooks》作者：Dave Cooper
• React 示例：Hooks

• 🎬 ReactConf 2018：Sophie Alpert 和 Dan Abramov 的 React 今日与明日官方公告和首次演示。
• 🎬 ReactConf 2018：通过……让 React 代码更简洁 90%。

精选资源列表：关于使用 Next.js 的书籍、视频和文章。

Next.js：React框架。

这份列表的灵感来源于awesome list thing。你可能也会喜欢awesome-tdd。

• 超棒的 Next.js
  • 内容
  • 社区
  • 基本要素
  • 文章
  • 样板
  • 扩展
  • 应用
  • 图书
  • 视频
  • 项目（初级）
  • 新闻简报
  • 贡献
  • 执照

• GitHub
• Next.js 的 GitHub 讨论

• 博客
• 学习
• Vercel TV
• 防弹下一代

• 即时网站更新，支持按需重新验证和Directus
• 使用 Next.js 实现动态 CMS 驱动的重定向
• Next.js、GraphQL 和 React 查询入门
• 将 Next.js 与 FaunaDB 结合使用：如何从您的应用程序查询数据库
• 如何使用 ButterCMS 构建无服务器 Next.js 博客
• 使用 Next.js 构建通用 JavaScript 应用
• Next.js 入门指南 — 设置您的应用程序
• Next.js 入门 — 引入数据
• 如何构建一个基于 Next.js React 的通用应用程序
• Next.js 的下一个章节
• 使用 Next.js、Stripe 和 Micro 在您的网站上接受付款
• Next.js 在…