🧡 🦐 🌼 使用最好的React Web开发工具进行升级 🤶 👩🏽‍🤝‍👩🏼 🌡️

通过学习使用React开发Web应用程序的最佳工具，您可以变得更有价值。

大多数履历会被雇主拒绝，只要将它们斜放即可。这有点令人沮丧，对吗？因此，非常重要的一点是，他必须立即了解您需要的知识和技能。现在是升级的好时机，尤其是当您在履历表上没有什么值得夸耀的时候。您无需上大学即可学习新技能：您只需要朝正确的方向前进，而不必偏离方向。

例如，如果您知道如何使用ReactJS，这将使您成为需求量更大的专家。如果您是一名初学者Web开发人员，并且已经了解JavaScript和HTML，那么下一步就是ReactJS。

在本文中，我将分享值得学习成为一名优秀的JavaScript开发人员并使用React的工具和库的列表。

什么是React，为什么值得学习？

React是一个用于用户界面开发的js库，Facebook于2013年5月推出（并将继续提供支持）。它允许您使用JavaScript创建动态用户界面。

由于React是目前最强大的js库之一，因此您可以通过学习来做很多事情。开发者亚马逊，PayPal，BBC，CNN和许多其他科技巨头都使用React。此外，该库足够灵活，可以满足任何需求。它可以与您最喜欢的技术堆栈结合使用。 React可用于创建数据仪表板，消息传递应用程序，社交网络应用程序，单页Web应用程序和个人博客。

如果您可以在从事实际项目时学习React，那么它不仅可以帮助您快速学习，还可以向潜在的雇主炫耀。

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是一个模板项目，用于快速创建React应用程序。在React中建立一个工作项目过去是一项繁琐的任务。但是，使用此工具，您可以在几秒钟内为零配置设置前端构建管道，项目结构，环境和应用程序优化。您可以使用一个命令来完成。而且，如果您需要更复杂的配置，则可以“提取” Create React App并直接编辑其配置文件。

根据MIT许可，Create React App是分布式开放源代码。其源代码位于GitHub存储库中。

安装：

npm start
npm init react-app my-app

如果您不想使用Create React App，则可以查看React Boilerplate和React Slingshot。两者都是MIT许可下的开源。

3.反应视线

React Sight是一种流行的可视化工具，它使您可以将应用程序显示为组件的分层树（例如流程图）。它可以作为Chrome扩展程序连接（您仍然需要react devtools来显示有关您的应用程序的信息）。使用其界面，您可以添加过滤器以将精力集中在最需要与之交互的组件上。将鼠标悬停在节点上，您将看到有关组件的当前状态和道具的信息。React Sight对于调试大型复杂项目非常有用。

React Sight是根据MIT许可发布的，您可以在GitHub存储库中访问其源代码。您可以使用Chrome网上应用店进行安装。

4.反应美女

React Belle是一个自定义的React库，其中包含可重用的组件：Toggle，Rating，RatePicker，Button，Card，Select等。它旨在提供便利的用户体验。组件针对移动和桌面进行了优化。它们具有高度可定制性，并支持残疾人无障碍获取标准（WAI-ARIA）。该库支持各种主题，例如Belle和Bootstrap。

Belle是根据MIT许可发布的，您可以在GitHub存储库中访问其源代码。

安装：

npm install belle

5.常绿

Evergreen建立在React UI原语之上，是一个UI框架，其中包含可用于构建项目的高质量组件。开发人员喜欢此工具，因为它易于导入组件。

Evergreen是根据MIT许可发布的，您可以在GitHub存储库中访问其源代码。

安装：

npm install --save evergreen-ui

6.位

Bit是用于发布和共享React应用程序的在线平台和命令行工具。如果要构建和共享组件，这是最佳选择之一。人们可以在其市场上发布自己的React应用程序并搜索所需的组件。因此，您不必在每次需要新的React应用程序或组件时就重新发明轮子。

所以位：

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

Bit是在Apache 2.0许可下发布的，您可以在GitHub存储库中访问其源代码。

安装：

$ npm install bit-bin --global

7.故事书

故事书是用于快速开发UI组件的工具。它允许您查看组件库并跟踪每个组件的状态。使用StoryBook，您可以与应用程序分开开发组件，从而更容易重用和测试UI组件。

此外，Storybook API提供了许多功能并使自定义变得容易。Coursera，Squarespace和Lonely Planet等公司都使用此工具。

该故事书是根据MIT许可发布的，您可以在GitHub存储库中访问其源代码。

首先使用以下命令安装Storybook：

$ cd my-react-app
$ npx -p @storybook/cli sb init

接下来，运行run命令：

$ npm run storybook

8. Formik

Formik可帮助您在调试，测试和分析过程中创建和验证表单。它允许您创建动态表单，因此您无需手动更改或更新其组件的状态和道具。这使开发更快，更愉快。

Formik是根据MIT许可发布的，您可以在GitHub存储库中访问其源代码。

安装：

$ npm install formik --save

9. Immer

Immer是一个js库，可让您在保持不变性的同时增加项目结构的复杂性。更准确地说，该库可轻松使您的代码保持不变。

Immer的一些主要功能是：

Immer是强类型的：当您的状态对象是类型时，这很有用。
Immer缩小了样板：大多数状态管理工具都要求您编写很多样板代码。Immer允许您编写更少的代码。
Immer允许您使用JS数据结构：您可以使用基本JS数据结构在Immer中创建不可变状态。

Immer是根据MIT许可发布的，您可以在GitHub存储库中访问其源代码。

安装：

$ npm install immer

10. React Proto

React Proto是面向开发人员和设计人员的应用程序原型工具。它可以帮助您计划项目结构，以便您可以提前做出决定。因此，您不会浪费时间在开发过程中进行更改。对于喜欢设计而不是编码的人，此工具特别有用：例如，您可以拖放元素而不是编写代码来做到这一点。该工具将帮助您标记所有选定的组件，并为它们提供名称，属性和层次结构。

React Proto是在MIT许可下发布的，您可以在GitHub存储库中访问其源代码。

要安装它，首先派生存储库。然后使用以下命令安装依赖项：

$ npm install

然后运行：


$ npm start
$ npm run dev

事业上的新一步

基本上，您可以自己找到很多JavaScript和React东西。但是，要了解有关我在本文（以及许多其他文章）中提到的工具的更多信息，请查看Awesome React GitHub存储库。

通过研究和实施这些工具，您将提高生产率，并使简历对雇主更具吸引力。

使用最好的React Web开发工具进行升级