更快地构建您的 React 应用程序！

旅行

解决方案

用法

所以我想你们大多数人看到标题肯定都会好奇，如何才能更快地构建我的应用程序。有没有一些自动完成的扩展，或者一些 vscode 的小技巧可以加快开发速度？
答案可能大相径庭。

大家肯定都听说过模板，大多数人可能都在使用入门模板来制作应用。有些人可能还在使用老旧的模板create-react-app。

因此，想象一下，您有一个 GUI 应用程序，只需提及组件和页面的名称，如果您想启用路由，并且自动有一个应用程序可以使用......首先包含您需要的所有东西。

所以我想做一些可以实现这一点的事情。

对于那些着急的人来说，可以直接自己查看。React
Builder

旅行

有一天，我在做一个项目，开始用 create-react-app 制作不同的组件和页面。由于现在大多数应用都需要路由，所以我安装了react-router-dom它，并设置了导航栏。
我以前在不同的项目中反复重复上述过程。所以我觉得应该用它做一个模板。但这也很麻烦，因为我们有不同的组件名称和不同的路由样式，有时甚至不需要路由。
我可能需要一个基于 Class 并带有状态的组件，也可能需要一个功能齐全的组件。
于是，我萌生了制作 React-Builder 的想法。

解决方案

所以我认为解决方案是一个 GUI 工具，可以帮助您更快地开始使用您的反应应用程序。

因此该工具被命名为React Builder。

这是主页

用法

步骤 1 | 选择您的偏好

在这里，您可以选择您喜欢的启动环境（目前仅支持）create-react-app。
此外，您还可以选择 yarn 或 npm/npx。最后，您可以为您的项目命名。

第 2 步 | 选择要添加的依赖项

您可以在应用程序中直接提及要添加的套餐。
例如：我们有react-router-dom axios等等。

步骤 3 | 添加组件和页面

您可以在此处添加所有组件的名称及其类型，并且可以选择组件是否为页面。

注意：路由仅在标记为页面的组件之间进行

步骤 4 | 添加路由

您可以在这里启用应用中的路由功能。您还可以选择将哪个组件用作导航组件或导航栏。

注意：如果启用路由，请不要删除依赖项react-router-dom

第 5 步 | 构建您的应用程序

一旦你点击创建应用程序，它将下载一个 js 文件并为你提供一个脚本

您需要将该 js 文件放在您想要创建 react 应用程序的文件夹中，然后在那里运行脚本。

最终结果

您已成功创建具有所需首选项的反应应用程序。

按照上述步骤使用 App.js 生成的文件夹结构如下所示。

如您所见，它已经生成了所有组件和页面并安装了依赖项，还在 App.js 和我们的导航组件中完成了路由。

那么你还在等什么，现在就开始黑客攻击吧，
前往：React Builder

贡献

这是一个开源项目。您可以花些时间亲自查看一下，并随时进行改进，为崇高的事业做出贡献。

仓库：https://github.com/amanjagdev/react-builder