reactjs构建工具_10种ReactJS工具可提升您的Web开发技能

reactjs构建工具

您知道一眼提交的大多数求职简历都会被拒绝吗？ 如果您尝试开始进行Web开发，那将是一个艰巨的事实，但是有很多方法可以改善您为潜在的雇主和客户提供的服务。 对于应用程序开发人员而言，现在是提高技能的好时机，开源是专业开发的最佳途径。 您无需上大学即可学习新的开源技能； 您需要的只是方向感和自律感。

ReactJS是您成为一名成功的Web开发人员时应明智学习的众多技能之一。 如果您已经对JavaScript和HTML感到满意，那么这自然是学习的下一项技术。 如果您还不熟悉它们，那么您会发现ReactJS是一个入门的好地方。

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

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

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

因为ReactJS是可用的最强大的前端JavaScript库之一，所以如果您要构建出色的应用程序，则应该学习如何使用它。 它是Amazon，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.创建React应用

创建React应用程序是用于开始使用React的样板项目。 在Facebook发布Create React App之前，在React中建立一个工作项目是一项繁琐的任务。 但是，使用此工具，您可以在零配置的情况下在几秒钟内为生产建立前端构建管道，项目结构，开发人员环境和应用优化。 您只需一个命令即可完成所有这些操作。 而且，如果您需要更高级的配置，则可以从Create React App中“弹出”并直接编辑其配置文件。

Create React App是根据MIT许可证开放的源代码，您可以在其GitHub存储库中访问其源代码 。

通过以下方式安装：

   
   

    
    

     
     npm start
     
     

npm init react-app my-app
    
    
   
    

React样板和React弹弓 。 根据MIT许可证，两者均维护良好且开源。

3.React视线

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

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

4.React美女

React Belle是一个可配置的React组件库，其中包含可重用的组件，例如Toggle，Rating，RatePicker，Button，Card，Select等，以提供流畅的用户体验。 这些组件是可自定义的，并支持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应用程序时就重新发明轮子。 Bit的核心功能包括：

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

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

通过以下方式安装：

 $  npm install bit-bin --global 

7.故事书

使用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数据结构：您可以通过使用基本JS数据结构在Immer中产生不可变状态。

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

通过以下方式安装：

 $  npm install immer 

10. React Proto

React Proto是面向开发人员和设计人员的应用程序原型工具。 它可以帮助您布局项目结构以提前做出决定，因此您不会浪费时间在以后的开发中进行更改。 该工具专门为喜欢设计而不是编码的人们提供帮助。 例如，您可以拖放元素而不是编写元素。 该工具可帮助您标记所有可能的组件，并为它们提供名称，属性和原型制作层次。

React Proto是根据MIT许可证开放的源代码，您可以在其GitHub存储库中访问其源代码 。

要安装它，首先，请分叉存储库 。 接下来，使用以下命令安装依赖项：

 $  npm install 

使用以下命令运行应用程序：

 $  npm start 

要启动开发环境，请运行：

 $  npm run dev 

使用ReactJS工具提升您的职业生涯

JavaScript并不缺乏资源。 要了解有关我在本文中提到的框架的更多信息，以及更多信息，请查看GitHub上的Awesome React存储库，这是与React相关的令人敬畏的事情的列表。

通过学习这10种必备工具，您将提高工作效率和简历，更重要的是，您将掌握基于JavaScript的Web开发。

翻译自: https://opensource.com/article/20/6/reactjs-tools

reactjs构建工具