Web前端培训：如何在ReactJS中更快地开发UI

　　现在是2022年，React拥有一个庞大的生态系统，可以帮助开发人员更快地实现复杂的UI。此外，有了ReactJS库的广泛支持，开发人员几乎不需要从头开始构建组件。

　　然而，并不是每个ReactJS UI开发人员都知道在ReactJS中更快地构建UI的最佳实践。因此，这里将讨论在ReactJS项目中更快地构建UI的前五种方法。

　　ReactJS中开发UI更快的五大技术

　　研究和分析设计

　　要使用此策略创建应用程序的UI，必须检查设计并考虑多种模式。通常，移动应用程序开发人员会花费至少30分钟来评估和考虑可能使用的各种策略和模式。他们根据以下三个标准评估设计：

　　1.了解网格系统

　　设计师使用网格来开发网站。这将使开发人员更容易使网站响应更小的设备。根据具体情况，开发人员采用弹性、网格或宽度百分比来使站点具有响应性。在Web前端培训中，也有关于React的学习和使用，理论知识结合实战操作，学以致用，真正掌握前端技术。

　　在所有其他策略中，这是唯一需要我们花费大量时间的策略。然而，这背后有一个原因。它建立了应用程序的路线图，并帮助组织我们的代码。

　　2.搜索包装纸

　　在这种情况下，我们所说的“包装器”到底是什么意思?包装纸是用孩子们作为道具的东西。例如，假设你在我们的应用程序中的三个位置有一个模态，具有相同的标题、关闭图标、边距和填充。你将为其创建ModalWrapper组件。同样，我们可以创建一个卡片包装器。

　　3.可重复使用的组件

　　我的下一步是列出我可以在应用程序中重用的东西。例如，按钮、带标签的输入、错误等。记录所有可重用组件的主要目标是通过避免反复编写同一行代码来保持一致性并节省时间。道具用于改变可重用组件。(包装器同样是可重用组件，但需要子组件，因此有不同的名称。)

　　

 

　　开发站点数据

　　我们在设计UI时经常会遇到数据列表，因为我们没有可用的API;因此，为了使该过程平稳快速，我构建了虚拟数据并根据需要对其进行映射。此外，将其放置在名为“站点数据”的新文件夹中。

　　我们将在连接API时销毁站点数据中的目录。然而，如何管理网站数据完全取决于你!要创建站点数据文件夹，必须使用代码段。例如，在构建UI、生成对象和导出对象时，经常会遇到数据。

　　这种方法可以帮助你保持组件的干净，并为你的应用程序提供一个精简版的CMS(如果你愿意)。

　　设置状态

　　因此，如果你遇到应用程序设计的交互方面，尤其是在使用表单、复选框、下拉列表等时。请始终尝试建立一个状态以接收来自用户的更改数据。

　　对于表单，我使用控制台。记录通过提交按钮输入的所有表单数据。当我需要集成API时，它非常有用且快速。

　　集成ESLint

　　ESLint帮助我们使代码更加统一。它们禁止我们拥有不必要的导入或变量，并要求我们在整个项目中保持一致。对于Javascript，我们必须在整个应用程序中使用单引号，对className和props等属性使用双引号。开发人员经常使用Airbnb ESlint编码标准来减少现场错误的数量，同时节省大量时间。

　　集成故事书

　　故事书对于发展主题来说非常棒。它允许我们通过修改组件的属性和响应性来单独开发和测试组件。它还可以用于其他原因，例如保留一个组件库、一组相同创建的组件、将其分发给整个团队以供反馈等等。

　　这完全取决于我们正在进行的项目的需求和类型。将故事书用于小型应用程序或带有两个屏幕的登录页面是没有好处的。