提升您的 Web 开发技能的 10 个 ReactJS 工具

图片来源

Ray Smith

您是否知道，大多数求职简历仅看一眼就被拒绝？如果您正尝试开始 Web 开发，这是一个令人沮丧的事实，但有一些方法可以改进您能为潜在雇主和客户提供的服务。对于应用程序开发人员来说，现在是提升技能的好时机，而开源是职业发展的最佳途径。您无需上大学学习新的开源技能；您只需要一个方向感和自律性。

ReactJS 是您在成为一名成功的 Web 开发人员的过程中应该学习的众多技能之一。如果您已经熟悉 JavaScript 和 HTML，那么它是您接下来自然要学习的技术。如果您还不熟悉它们，那么您会发现 ReactJS 是程序员入门的好地方。

在本文中，我将分享我的前 10 个工具和库，它们将帮助您获得 JavaScript 开发人员的工作（或者如果您愿意，可以成为一名认真的业余爱好者）。

什么是 React，以及为什么要学习它？

React 是 Facebook 在 2013 年 5 月推出的（并且仍在维护）用于用户界面 (UI) 开发的 JavaScript 库。它使用 JavaScript 进行开发和简单的状态机组件，可以轻松地渲染动态内容。

由于 ReactJS 是目前最强大的前端 JavaScript 库之一，如果您想构建出色的应用程序，就应该学习如何使用它。它是亚马逊、PayPal、BBC、CNN 和许多其他科技巨头界面背后的驱动力。此外，这个灵活的库适合任何需求，可以插入您最喜欢的技术栈中以构建轻量级应用程序。您可以使用 React 构建任何可扩展的东西——数据仪表板、消息应用程序、社交网络应用程序、单页应用程序，甚至个人博客网站。

掌握 React 最有效的方法之一是使用其工具为真实世界的项目构建 Web 应用程序。这不仅可以帮助您学习框架和工具，还可以让您向潜在雇主展示一些成果。

1. npm

如果您想开始使用 JavaScript（包括 React 库），您需要安装 Node 包管理器 (npm)。就像您的 Linux 发行版附带的包管理器（或 Windows 上的 Chocolatey 或 macOS 上的 Homebrew）一样，npm 提供了一个命令来查询软件仓库并安装您需要的东西。这包括重要的库，如 ReactJS 组件。

您可能可以从您的 Linux 发行版的仓库中安装 Node.js（以及随之而来的 npm）。在 Fedora 或 Red Hat Enterprise Linux 上

$ sudo dnf install nodejs

在 Ubuntu 或 Debian 上

$ sudo apt install nodejs npm

如果您的发行版在其仓库中没有提供 npm，请访问 Nodejs.org 以了解如何安装 Node.js 和 npm。

2. Create React App

Create React App 是一个用于开始使用 React 的样板项目。在 Facebook 发布 Create React App 之前，在 React 中设置一个工作项目是一项繁琐的任务。但是使用这个工具，您可以在几秒钟内以零配置设置前端构建管道、项目结构、开发人员环境和应用程序生产优化。您可以使用一个命令实现所有这一切。更重要的是，如果您需要更高级的配置，您可以从 Create React App 中“弹出”并直接编辑其配置文件。

Create React App 在 MIT 许可证下是开源的，您可以在其 GitHub 仓库中访问其源代码。

使用以下命令安装它

npm start
npm init react-app my-app

如果您不想使用 Create React App，其他样板选项还有 React Boilerplate 和 React Slingshot。两者都维护良好，并且在 MIT 许可证下是开源的。

3. React Sight

React Sight 是一个常用的可视化工具，它提供了整个应用程序的实时组件层次结构树（类似于流程图）。它可以直接作为 Chrome 扩展程序添加，并且需要 React 开发工具来读取有关您的应用程序的信息。凭借其丰富的界面，您甚至可以添加过滤器来专注于您需要交互最多的组件。通过悬停在节点上，您可以显示当前状态和属性。React Sight 对于调试大型复杂项目非常有用。

React Sight 在 MIT 许可证下是开源的，您可以在其 GitHub 仓库中访问其源代码。从 Chrome 网上应用店安装 React Sight。

4. React Belle

React Belle 是一个可配置的 React 组件库，其中包含可重用的组件，如 Toggle、Rating、DatePicker、Button、Card、Select 等，旨在提供流畅的用户体验。这些组件是可定制的，并支持 ARIA 可访问性标准。它提供了不同的主题，如流行的 Belle 和 Bootstrap。

Belle 在 MIT 许可证下是开源的，您可以在其 GitHub 仓库中访问其源代码。

使用以下命令安装它

npm install belle

5. Evergreen

Evergreen 构建在 React UI 原语之上，是一个 UI 框架，其中包含高度完善的组件，您可以使用它们来构建您的项目。开发人员喜欢这个工具的一件事是它可以轻松导入组件。

Evergreen 在 MIT 许可证下是开源的，您可以在其 GitHub 仓库中访问其源代码。

使用以下命令安装它

npm install --save evergreen-ui

6. Bit

Bit 提供了一个在线平台和命令行工具，用于发布和共享 React 应用程序。如果您正在创建和共享组件，它是最佳选择之一。它的市场是一个商店，人们可以在其中发布他们的 React 应用程序，其他人可以搜索他们需要的组件，这样他们就不必每次需要新的 React 应用程序时都重新发明轮子。Bit 的核心功能包括

允许代码重用
提高设计和开发效率
保持 UI 和 UX 的一致性
提高项目的稳定性

Bit 在 Apache 2.0 许可证下是开源的，您可以在其 GitHub 仓库中访问其源代码。

使用以下命令安装它

$ npm install bit-bin --global

7. Storybook

Storybook 让您可以设置一个支持热重载的实时开发服务器，这样您就可以将组件与整个项目隔离创建。它有助于组件重用、可测试性和开发速度。它还提供了一个在线 UI 编辑器，允许您以交互方式开发、检查并最终展示您的作品。

更重要的是，Storybook 的 API 提供了无数功能，并且提供了无与伦比的配置便利性。Coursera、Squarespace 和 Lonely Planet 等公司在生产中使用了它。

Storybook 在 MIT 许可证下是开源的，您可以在其 GitHub 仓库中访问其源代码。

首先，使用以下命令安装 Storybook（请注意，其中一个命令使用 npx 命令，该命令与 npm 相关但又独一无二）：

$ cd my-react-app

$ npx -p @storybook/cli sb init

接下来，使用以下命令运行它

$ npm run storybook

8. Formik

Formik 帮助在 React 中创建和验证表单，以进行调试、测试和推理。它允许您生成动态表单，因此您不必手动更改或更新表单组件的状态和属性。这是朝着更快、更愉快的开发体验迈出的一步。

Formik 在 MIT 许可证下是开源的，您可以在其 GitHub 仓库中访问其源代码。

使用以下命令安装它

$ npm install formik --save

9. Immer

Immer 是一个 JavaScript 库，使您能够修改嵌套对象，而无需担心修改它们。它的目的是使代码中的不变性变得简单。

以下是 Immer 的一些主要功能

Immer 是强类型的：当您的状态对象具有类型时，它非常有用。
Immer 减少了样板代码：大多数状态管理工具都要求您编写大量样板代码。Immer 是不同的。它让您编写更少（且更简洁）的代码。
Immer 允许您使用 JS 数据结构： 您可以在 Immer 中使用基本的 JS 数据结构来生成不可变状态。

Immer 在 MIT 许可证下是开源的，您可以在其 GitHub 仓库中访问其源代码。

使用以下命令安装它

$ npm install immer

10. React Proto

React Proto 是一个面向开发人员和设计师的应用程序原型设计工具。它可以帮助您规划项目结构以提前做出决策，这样您就不会在以后的开发中浪费时间进行更改。该工具专门帮助那些喜欢设计胜过编码的人；例如，您可以拖放元素而不是编写它们。该工具可以帮助您标记所有潜在的组件，并为它们提供名称、属性和用于原型设计的层次结构。

React Proto 在 MIT 许可证下是开源的，您可以在其 GitHub 仓库中访问其源代码。

要安装它，首先，fork repository。接下来，使用以下命令安装依赖项