我的全明星 React 技术栈

我在设置新的 React 应用时使用的所有工具

如果你像我一样是一名 React 开发者，那么在框架、库、工具等方面，你将会面临琳琅满目的选择。与 Angular 这样功能齐全、风格鲜明的框架相比，React 的选择甚至更加复杂。React 自称是一个用于构建用户界面 (UI) 的 JavaScript 库。

面对琳琅满目的选择，为下一个 React 项目选择合适的技术难免会感到困惑。今天，我将分享我最喜欢的几个库，以及它们如何让我的工作变得轻松许多！

启动一个项目（基础篇）

图片来自Next.js。

要快速启动一个项目，我最喜欢的选择是Next.js！

Next.js 提供开箱即用的服务器端渲染、基于文件系统的路由、内置的 CSS/SCSS 支持等等。使用 Next.js，您只需几秒钟即可快速启动并运行，无需担心任何工具方面的问题。

替代方案

启动 React 项目的默认方法是使用Create React App。但是，相信我：Next.js 非常棒，而且对开发者更加友好。它让你能够专注于代码编写，而不是繁琐的设置。

另一个热门选择是Gatsby，它更侧重于 SEO。然而，Gatsby 更侧重于静态网站生成，我不太愿意将其用于可能迅速膨胀成庞大代码库的项目。我更倾向于将 Gatsby 用于博客之类的项目。

我的建议是，对于未来可能规模更大甚至发展成企业级的项目，选择 Next.js。如果您想要一个更注重 SEO 优化、面向公众的网站，例如博客或静态信息网站，则选择 Gatsby。

CSS框架

照片来自布尔玛。

我最喜欢的 CSS 框架是Bulma。它是一个基于 Flexbox 的开源框架，已经获得了广泛的关注，超过 20 万开发者都在使用它。

我使用 Bulma 的主要原因之一是它简洁美观。它自带多个设计精良的 UI 组件，尤其注重移动端响应式设计。

替代方案

说到 CSS 框架，我们不能忽略一直以来都非常流行的Bootstrap。它无疑是一个很棒的框架，但说实话，它现在有点让人审美疲劳了。由于很多网站都使用 Bootstrap，样式和组件看起来有些单调。不过，对于已经熟悉 Bootstrap 的用户来说，它仍然是一个绝佳的选择，而且它还拥有一个非常值得信赖的开发者社区，可以提供技术支持。

Tailwind CSS目前非常火爆。它允许你在不离开 HTML 代码的情况下设置所有样式。颜色、大小、字体、阴影等等，所有元素都有对应的 CSS 类。我个人不太喜欢在代码中使用过多的 CSS 类。我更喜欢基于组件级 CSS 来划分和模块化我的代码。话虽如此，对于那些喜欢框架提供的自由度的开发者来说，Tailwind CSS 可能是一个不错的选择。

造型

作者供图。

我常用的样式方案是使用Sass和CSS Modules。Next.js默认支持这种方式，我们可以将 CSS/Sass 文件与代码分离，并在需要时直接导入到 React 文件中。

Sass 比纯 CSS 效率更高，因为它能帮助开发者重构代码，避免重复编写样式。开发者可以快速提取、重构代码，并在整个项目中复用这些代码。

替代方案

一个流行的选择是styled-components，它允许你在 JS 中编写 CSS。虽然这很容易实现，但我讨厌在 JS 代码中混合样式。我更喜欢关注点分离，将样式与 JS 代码隔离开来。

导航

如果你像我一样使用 Next.js，那么导航就完全不是问题。有了基于文件系统的路由，你的目录层级结构就变成了实际的文件路径和路由！

图片来自React Router。

如果你正在使用 React，那么React Router是最佳选择。它稳定可靠，经过充分测试，bug 很少，而且使用起来非常简单。对了，它在GitHub上拥有 42.3K 个 star ！

表格

来自React Hook 表单的照片。

几乎每个 Web 应用程序都需要表单。为了向我的应用程序添加表单，我使用了React Hook Form。

React Hook Form 以 React Hooks 为核心，极其简单易用。实际上，它内置了一个表单构建器，你可以用它来创建表单，然后直接将代码复制粘贴到你的 React 项目中。

图片来自Formspree。

如果您只需要一个静态表单（例如“联系我们”），那么Formspree可能是您的理想之选。它无需任何服务器端代码，是创建简单表单的绝佳选择。

替代方案

这里一个很受欢迎的选择是Formik。Formik功能强大，包含数量惊人的功能，并且在 GitHub 上拥有超过 25.8 万颗星，深受开发者喜爱！然而，我觉得 Formik 有时功能过于强大。如果你只需要一个简洁美观、包含几个字段的表单，React Hook Form 就完全可以满足你的需求。

快速后端

图片来自Firebase。

我知道这篇文章主要讲的是前端 React 技术栈。不过，我还是想补充一点——特别是对于那些希望快速集成后端的项目而言。Firebase和Firestore就是很好的选择。我不会在此过多赘述，因为这本身就是一个很大的话题。

替代方案

如果您需要快速搭建后端，那么Google Sheets和Airtable也是不错的选择！它们都像 Excel 表格一样简单易用，但必要时也能像小型数据库一样强大。

最后想说的话

好了，这就是我的 React 技术栈：Next.js、Bulma、Sass、CSS Modules、React Hook Form、Firebase 和 Firestore。这几乎适用于我参与的所有项目。

惊喜

如果您正在寻找一个能够为您的下一个项目注入强大动力的全方位代码库，那就别再犹豫了！我正是创建了您所需要的——Supercharge.dev！

Supercharge.dev不仅具备以上所有功能，甚至更多！它还集成了 Google Analytics 和支持 Firebase 的即用型控制面板，让您开箱即用！

使用优惠码即可享受超级充能DEV2021套装20%的折扣！

感谢阅读！请在下方留言，分享您最喜欢的图书馆。

祝你编程愉快！