2024 年的 React 生态

阅读：

• 《深入 React-Router 实现原理》：https://segmentfault.com/a/1190000023560665

---

样式/CSS

---

在 React 中有很多关于 样式/CSS 的选项和意见，作为一个 React 初学者，可以使用一个带有所有 CSS 属性的样式对象作为 HTML 样式属性的键/值对，从内联样式和基本的 CSS 开始就可以。

const ConardLi = ({ title }) =>

{title}

内联样式可以在 React 中通过 JavaScript 动态添加样式，而外部 CSS 文件可以包含 React 应用的所有剩余样式：

import ‘./Headline.css’;

const ConardLi = ({ title }) =>

{title}

如果你的应用越来越大了，建议再看看其他选项。首先，我建议你将 CSS Module 作为众多 CSS-in-CSS 解决方案的首选。CRA 支持  CSS Module ，并为提供了一种将 CSS 封装到组件范围内的模块的方法。这样，它就不会意外泄露到其他 React 组件的样式中。你的应用的某些部分仍然可以共享样式，但其他部分不必访问它。在 React 中， CSS Module 通常是将 CSS 文件放在 React 组件文件中：

import styles from ‘./style.module.css’;

const ConardLi = ({ title }) =>

{title}

其次，我想向你推荐所谓的 styled components ，作为 React 的众多 CSS-in-JS 解决方案之一。它通过一个名为 styles-components(或者其他例如 emotion 、stitches)的库来实现的，它一般将样式放在 React 组件的旁边：

import styled from ‘styled-components’;

const BlueHeadline = styled.h1`

color: blue;

`;

const ConardLi = ({ title }) =>

{title}

第三，我想推荐 Tailwind CSS 作为最流行的 Utility-First-CSS 解决方案。它提供了预定义的 CSS 类，你可以在 React 组件中使用它们，而不用自己定义。这可以提升一些效率，并与你的 React 程序的设计系统保持一致，但同时也需要了解所有的类：

const ConardLi = ({ title }) =>

{title}

使用 CSS-in-CSS、CSS-in-js 还是函数式 CSS 由你自己决定。所有的方案在大型 React 应用中都适用。最后一点提示：如果你想在 React 中有条件地应用一个 className，可以使用像 clsx 这样的工具。

建议：

• CSS-in-CSS 方案：CSS Modules

• CSS-in-JS 方案：Styled Components （目前最受欢迎）

• 备选：Emotion 或 Stitches

• 函数式 CSS：Tailwind CSS

• 备选：CSS 类的条件渲染：clsx

链接：

• styled-components：https://www.robinwieruch.de/react-styled-components/

• Tailwind CSS：https://tailwindcss.com/

• clsx：https://github.com/lukeed/clsx

阅读：

• 《React中CSS-in-JS的最佳实践》：https://juejin.cn/post/6935245880568053791

• 《React中的CSS样式》：https://www.robinwieruch.de/react-css-styling/

• 《10种现在流行的CSS解决方案》：https://juejin.cn/post/6844903633109139464

• 《CSS-in-JS vs CSS》：https://bejamas.io/blog/css-performance/

• 《看完了 2021 CSS 年度报告，我学到了啥？》：https://juejin.cn/post/7043577751344775176

---

组件库

---

对于初学者来说，从零开始构建可复用的组件是一个很好的学习经验，值得推荐。无论它是 dropdown、radio button 还是 checkbox ，你最终都应该知道如何创建这些UI组件组件。

然而，在某些时候，你想要使用一个UI组件库，它可以让你访问许多共享一套设计系统的预构建组件。以下所有的UI组件库都带有基本组件，如 Buttons、Dropdowns、Dialogs 和 Lists：

• Material UI (MUI) (最流行)：https://material-ui.com/

• Mantine (最推荐)：https://mantine.dev/

• Chakra UI (最推荐)：https://chakra-ui.com/

• Ant Design（国内最流行）：https://ant.design/

• Radix：https://www.radix-ui.com/

• Primer：https://primer.style/react/

• NextUI：https://nextui.org/

• Tailwind UI (收费的)：https://www.tailwindui.com/

• Semantic UI：https://www.robinwieruch.de/react-semantic-ui-tutorial

• React Bootstrap：https://react-bootstrap.github.io/

尽管所有这些UI组件库都带有许多内部组件，但它们不能让每个组件都像只专注于一个UI组件的库那样强大。例如 react-table-library 提供了非常强大的表格组件，同时提供了主题（例如 Material UI），可以很好的和流行的UI组件库兼容。

阅读：

• 《从零到一搭建React组件库》：https://segmentfault.com/a/1190000039852833

---

动画库

---

Web 应用中的大多数动画都是从 CSS 开始的。最终你会发现 CSS 动画不能满足你所有的需求。通常开发者会选择 React Transition Group，这样他们就可以使用 React组件来执行动画了，React 的其他知名动画库有：

• Framer Motion (最推荐)：https://www.framer.com/motion/

• react-spring (也推荐一下)：https://github.com/react-spring/react-spring

• react-motion：https://github.com/chenglou/react-motion

• react-move：https://github.com/sghall/react-move

• Animated (React Native)：https://facebook.github.io/react-native/docs/animated

---

可视化图表

---

如果你真的想要自己从头开始开发一些图表，那么就没有办法绕过 D3 。这是一个很底层的可视化库，可以为你提供开发一些炫酷的图表所需的一切。然而，学习 D3 是很有难度的，因此许多开发者只是选择一个 React 图表库，这些库默认封装了很多能力，但是缺失了一些灵活性。以下是一些流行的解决方案:

• Recharts：http://recharts.org/

• react-chartjs：https://github.com/reactchartjs/react-chartjs-2

• nivo：https://nivo.rocks/

• visx：https://github.com/airbnb/visx

• Victory：https://formidable.com/open-source/victory/

---

表单

–

React 现在最受欢迎的表单库是 React Hook Form 。它提供了从验证（一般会集成 yup 和 zod）到提交到表单状态管理所需的一切。之前流行的另一种方式是 Formik。两者都是不错的解决方案。这个领域的另一个选择是 React Final Form 。毕竟，如果你已经在使用 React UI组件库了，你还可以查看他们的内置表单解决方案。

建议：

• React Hook Form

• 集成 yup 或 zod 进行表单验证

• 如果已经在使用组件库了，看看内置的表单能不能满足需求

链接：

• React Hook Form：https://react-hook-form.com/

• Formik：https://github.com/jaredpalmer/

• React Final Form：https://final-form.org/react

阅读：

• 《React 开源表单组件最佳实践，原理解析，设计分析》：https://toutiao.io/posts/0nh4r9w/preview

---

类型检查

---

React 带有一个名为 PropTypes 的内部类型检查。通过使用 PropTypes，你可以为你的 React 组件定义 props。每当将类型错误的 prop 传递给组件时，你可以在运行时收到错误消息：

import PropTypes from ‘prop-types’;

const List = ({ list }) =>

{list.map(item => 

{item.title}

)}

List.propTypes = {

list: PropTypes.array.isRequired,

};

在过去的几年里，PropTypes 已经不那么流行了，PropTypes 也已经不再包含在 React 核心库中了，现在 TypeScript 才是最佳的选择：

type Item = {

id: string;

title: string;

};

type ListProps = {

list: Item[];

};

const List: React.FC = ({ list }) =>

{list.map(item => 

{item.title}

)}

阅读：

• 《TypeScript 终极初学者指南》：https://mp.weixin.qq.com/s/6DAyXFHIMW95FS0f3GyHpA

• 《如何优雅地在 React 中使用TypeScript》：https://juejin.cn/post/7021674818621669389

---

代码风格

---

对于代码风格，基本上有两种方案可以选择：

如果你想要一种统一的、通用的代码风格，在你的 React 项目中使用 ESLint 。像 ESLint 这样的 linter 会在你的 React 项目中强制执行特定的代码风格。例如，你可以在 ESLint 中要求遵循一个流行的风格指南(如 Airbnb 风格指南)。之后，将 ESLint 与你的IDE/编辑器集成，它会指出你的每一个错误。

如果你想采用统一的代码格式，可以在 React 项目中使用 Prettier。它是一个比较固执的代码格式化器，可选择的配置很少。你也可以将它集成到编辑器或IDE中，以便在每次保存文件的时候自动对代码进行格式化。虽然 Prettier 不能取代 ESLint，但它可以很好地与 ESLint 集成。

建议：

• ESLint：https://eslint.org/

• Prettier：https://github.com/prettier/prettier

阅读：

• 《React 代码风格指南》：https://keqingrong.cn/blog/2020-05-04-code-style-guide-for-react/

• 《Airbnb 样式指南》：https://www.robinwieruch.de/react-libraries/

---

身份认证

---

在 React 应用程序中，你可能希望引入带有注册、登录和退出等功能的身份验证。通常还需要一些其他功能，例如密码重置和密码更改功能。这些能力远远超出了 React 的范畴，我们通常会把它们交给服务端去管理。

最好的学习经验是自己实现一个带有身份验证的服务端应用(例如 GraphQL 后端)。然而，由于身份验证有很多安全风险，而且并不是所有人都了解其中的细节，我建议使用现有的众多身份验证解决方案中的一种：

• Firebase：https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/

• Auth0：https://auth0.com/

• AWS Cognito：https://aws.amazon.com/cognito/

阅读：

• 《使用 React Router 进行身份验证》：https://www.robinwieruch.de/react-router-authentication/

---

测试

–

现在最常见的 React 测试方案还是 Jest，它基本上提供了一个全面的测试框架所需要的一切。

你可以使用 react-test-renderer 在你的 Jest 测试中渲染 React 组件。这已经足以使用 Jest 执行所谓的 Snapshot Tests 了：一旦运行测试，就会创建 React 组件中渲染的 DOM 元素的快照。当你在某个时间点再次运行测试时，将创建另一个快照，这个快照会和前一个快照进行 diff。如果存在差异，Jest 将发出警告，你要么接受这个快照，要么更改一下组件的实现。

最近 React Testing Library (RTL) 也比较流行（在 Jest 测试环境中使用），它可以为 React 提供更精细的测试。RTL 支持让渲染组件模拟 HTML 元素上的事件成，配合 Jest 进行 DOM 节点的断言。

如果你正在寻找用于 React 端到端 (E2E) 测试的测试工具，Cypress 是现在最受欢迎的选择。

阅读：

• 《React 单元测试实践》：https://zhuanlan.zhihu.com/p/431143598

---

数据结构

---

Vanilla JavaScript 为你提供了大量内置工具来处理数据结构，就好像它们是不可变的一样。但是，如果你觉得需要强制执行不可变数据结构，那么最受欢迎的选择之一是 Immer 。我个人没用过它，因为 JavaScript 本身就可以用于管理不可变的数据结构，但是如果有人专门问到 JS 的不可变性，有人会推荐它。

链接：

• Immer：https://github.com/immerjs/immer

阅读：

• 《immer —— 提高React开发效率的神器》https://zhuanlan.zhihu.com/p/146773995

---

国际化

---

当涉及到 React 应用程序的国际化 i18n 时，你不仅需要考虑翻译，还需要考虑复数、日期和货币的格式以及其他一些事情。这些是处理国际化的最流行的库：

• FormatJS：https://github.com/formatjs/formatjs

• react-i18next：https://github.com/i18next/react-i18next

---

富文本编辑

---

React 中的富文本编辑器，就简单推荐下面几个，我也没太多用过：

• Draft.js：https://draftjs.org/

• Slate.js：https://www.slatejs.org/

• ReactQuill：https://github.com/zenoamaro/react-quill

---

时间处理

---

近年来，JavaScript 本身在处理日期和时间方面做了很多优化和努力，所以一般没必要使用专门的库来处理它们。但是，如果你的 React 应用程序需要大量处理日期、时间和时区，你可以引入一个库来为你管理这些事情：

• date-fns：https://github.com/date-fns/date-fns

• Day.js：https://github.com/iamkun/dayjs

• Luxon：https://github.com/moment/luxon/

---

客户端

---

Electron 是现在跨平台桌面应用程序的首选框架。但是，也存在一些替代方案：

• Tauri：(当前最新的) https://github.com/tauri-apps/tauri

• NW.js：https://nwjs.io/

• Neutralino.js：https://github.com/neutralinojs/neutralinojs

阅读：

• 《扔掉 Electron，拥抱基于 Rust 开发的 Tauri》：https://juejin.cn/post/7067342513920540686#comment

---

移动端

---

将 React 从 Web 带到移动设备的首选解决方案仍然是 React Native。

阅读：

• 《React Native 新架构》：https://segmentfault.com/a/1190000041182593

---

VR/AR

---

通过 React，我们也可以深入研究虚拟现实或增强现实。老实说，这些库我还都没用过，但它们是我在 React 中所熟悉的 AR/VR 库：

• react-three-fiber：(最流行的3D库，其中也有VR实现)https://github.com/pmndrs/react-three-fiber

• `react-360：https://facebook.github.io/react-360/

• aframe-react：https://github.com/supermedium/aframe-react

---

原型设计

---

如果你是一名 UI/UX 设计师，你可能希望使用一种工具来为新的 React 组件、布局或 UI/UX 概念进行快速原型设计。我之前用的是 Sketch ，现在改用了 Figma 。尽管我两者都喜欢，但我还是更喜欢 Figma。Zeplin 是另一种选择。对于一些简单的草图，我喜欢使用 Excalidraw。如果你正在寻找交互式 UI/UX 设计，可以看看 InVision。

• Sketch：https://www.sketch.com/

• Figma：https://www.figma.com/

• Zeplin：https://zeplin.io/

• Excalidraw：https://excalidraw.com/

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
是 Sketch ，现在改用了 Figma 。尽管我两者都喜欢，但我还是更喜欢 Figma。Zeplin 是另一种选择。对于一些简单的草图，我喜欢使用 Excalidraw。如果你正在寻找交互式 UI/UX 设计，可以看看 InVision。

• Sketch：https://www.sketch.com/

• Figma：https://www.figma.com/

• Zeplin：https://zeplin.io/

• Excalidraw：https://excalidraw.com/

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-DshWbVWw-1714810355537)]

[外链图片转存中…(img-h14LFr7x-1714810355537)]

[外链图片转存中…(img-1G3bZGHC-1714810355538)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！