by Tom Schweers

由汤姆·史威士(Tom Schweers)

如何使用React.js和Heroku快速实现从想法到URL的转变 (How to go from idea to URL quickly with React.js and Heroku)

When I was first starting out as a developer, the one thing that I wanted to do was get a web application live. I wanted it online for the world to see. I didn’t care about how it looked, what features it had, or even if anyone would ever see it or use it. My only desire was to understand the entire end-to-end process. I wanted to know how a bunch of files and folders translated into a living, breathing application on the internet.

当我刚开始是一名开发人员时，我想做的一件事就是使Web应用程序上线。 我想在线上让全世界看到它。 我不在乎它的外观，它所具有的功能，甚至没人会看到或使用它。 我唯一的愿望是了解整个端到端过程。 我想知道如何将一堆文件和文件夹转换为互联网上生动有趣的应用程序。

Not coming from an engineering background, I had no idea how any of that worked. All I knew was how to code some stuff in JSFiddle or something similar. I knew how to hack up nice little front-end features for my clients. My only real experience was configuring SaaS applications which is programming within a pre-built application. So naturally, I wanted to go deeper…

我不是来自工程学背景，也不知道其中的任何一个是如何工作的。 我所知道的只是如何在JSFiddle中编码某些内容或类似的东西。 我知道如何为客户破解一些不错的前端小功能。 我唯一真正的经验是配置SaaS应用程序，该程序在预构建的应用程序中编程。 很自然，我想更深入…

Long story short, I am writing this article for those of you out there in a similar situation. Someone who wants a simple and easy way to get your application online. This lets you focus on actually building out the functionality, and not the infrastructure.

长话短说，我正在为类似情况下的那些人写这篇文章。 想要一种简单易用的方法来使您的应用程序在线的人。 这使您可以专注于实际构建功能，而不是基础架构。

入门 (Getting Started)

There are plenty of boilerplates out there. In my experience they can be a bit overcomplicated, especially for novice developers. I’ve tried my hand at the Vue.js starter app, the MEAN stack app, and even the create-react-app. All took some hacking to get them to the point where I would be comfortable beginning the actual development of my application. However, I found Facebook’s create-react-app to be the easiest to setup. My boilerplate was originally derived from it.

那里有很多样板 。 以我的经验，它们可能会有些复杂，尤其是对于新手开发人员。 我已经尝试过Vue.js入门应用程序，MEAN stack应用程序，甚至create-react-app 。 所有人都采取了一些技巧，以使他们感到满意，开始我对应用程序的实际开发。 但是，我发现Facebook的create-react-app最容易设置。 我的样板最初是从中衍生出来的。

React样板 (React-Boilerplate)

I initially created the react-boilerplate just for myself. Then I thought maybe if others found it useful then that would be even better. So if you’re following along, navigate to the link above which will take you to my GitHub repository.

我最初只是为自己创建了react-boilerplate 。 然后我想，如果别人发现它有用，那会更好。 因此，如果您要继续，请导航至上面的链接，它将带您到我的GitHub存储库。

The first (and easiest) thing you can do here is to scroll to the very bottom of the page and click the Deploy to Heroku button.

您在这里可以做的第一件事(也是最简单的事情)是滚动到页面的最底部，然后单击“ 部署到Heroku”按钮。

Heroku will first prompt you to create an account if you haven’t already. Go ahead and do this, you won’t regret it (and it’s free). After that, you will get a screen prompting you to create a new app.

如果尚未注册，Heroku将首先提示您创建一个帐户。 继续执行此操作，您将不会后悔(而且它是免费的)。 之后，您将看到一个屏幕，提示您创建一个新的应用程序。

Type in a name for your app. The name must be unique across the entire Heroku platform, not just your account. Then click Deploy app.

输入您的应用名称。 该名称在整个Heroku平台上(不仅是您的帐户)必须是唯一的。 然后点击部署应用 。

Heroku (Heroku)

If you are not familiar with Heroku, it is a PaaS application that takes care of all of the behind the scenes stuff for you. Heroku makes the processes of deploying, configuring, scaling, tuning and managing apps as simple and straightforward as possible.

如果您不熟悉Heroku，则它是一个PaaS应用程序，可以为您处理所有幕后操作。 Heroku使部署，配置，扩展，调整和管理应用程序的过程尽可能简单明了。

Heroku is a cloud platform that lets companies build, deliver, monitor and scale apps — we’re the fastest way to go from idea to URL, bypassing all those infrastructure headaches.

Heroku是一个云平台，可让公司构建，交付，监视和扩展应用程序-我们是从构思到URL的最快方法，绕过了所有这些基础架构难题。

By following the instructions above, you just successfully deployed an application to the internet. To see your app, go to the Settings tab and scroll down to the Domains and certificates section. There you will see a link to your live app.

按照上述说明，您已经成功地将应用程序部署到了Internet。 要查看您的应用，请转到“ 设置”标签，然后向下滚动到“ 域和证书”部分。 在那里，您将看到一个指向您的实时应用程序的链接。

应用功能 (App Features)

Now you could have done this with any starter app [boilerplate]. Because you used the react-boilerplate you have a couple of notable features ready to go. I wanted to include the bare minimum so that it would be easy to understand, but enough to be able to get started on future ideas quickly.

现在，您可以使用任何入门应用程序[boilerplate]来完成此操作。 因为您使用了React样板，所以您准备了几个值得注意的功能。 我希望包括最低限度的内容，以使其易于理解，但又足以使他们能够Swift开始将来的想法。

1. The folder structure is organized and easy to understand. The app was built specifically to get a project going quickly. There is not too much bloat and component structure makes sense. More on how to build components below.文件夹结构井井有条，易于理解。 该应用程序是专门为使项目快速进行而构建的。 没有太多的膨胀，组件结构也很有意义。 有关如何构建组件的更多信息，请参见下文。

2. React-Sidebar. This sidebar menu is responsive, modern and optimized for mobile browsing. Open the demo app on your phone and try sliding the menu closed with your finger; alternatively you can tap outside of the menu. This is by far the best sidebar I’ve come across for React.js.

   React-Sidebar 。 该侧边栏菜单响应灵敏，现代且针对移动浏览进行了优化。 打开手机上的演示应用 ，然后尝试用手指滑动关闭的菜单； 或者，您可以点击菜单外的。 到目前为止，这是我为React.js遇到的最好的补充工具栏。

3. React-FontAwesome. This package provides you with beautiful, scalable, free SVG icons for your React.js application. Check out my personal website to see a few of them live in the top right corner. I’ve added the package to the boilerplate, but it doesn’t actually import any icons. All you have to do is uncomment the code in the App.js file to start importing.

   React-FontAwesome 。 这个包为您的React.js应用程序提供了精美，可扩展的免费SVG图标。 查看我的个人网站 ，看看其中一些生活在右上角。 我已经将该包添加到样板中，但实际上并没有导入任何图标。 您要做的就是取消注释App.js文件中的代码以开始导入。

4. Depcheck. This is a command line tool used to scan your app for unused dependencies. It will tell you which packages are not being used so you can delete them. I find this extremely useful when experimenting with JavaScript packages. My sporadic mind will import packages all day, discarding them once I realize they don’t do exactly what I want.

   Depcheck 。 这是一个命令行工具，用于扫描您的应用程序是否有未使用的依赖项。 它会告诉您哪些软件包没有被使用，因此您可以删除它们。 当尝试使用JavaScript包时，我发现这非常有用。 我零散的头脑会整天导入软件包，一旦发现它们不能完全满足我的要求，便将其丢弃。

And that’s it! Look over the README.md in my repository for a bit more information on features or how to configure them.

就是这样！ 查看我的存储库中的README.md，以获取有关功能或如何配置它们的更多信息。

下载代码 (Downloading the Code)

Heroku provides a very easy way to get the source code of the application you just deployed. All you have to do is follow the instructions on the Deploy tab inside your app using the Heroku CLI.

Heroku提供了一种非常简单的方法来获取刚刚部署的应用程序的源代码。 您所要做的就是使用Heroku CLI按照应用程序内“ 部署”选项卡上的说明进行操作。

Alternatively if you would rather not use the Heroku CLI, you can clone or download the react-boilerplate repository directly from GitHub and create a new repository yourself. Then change the Deployment method to GitHub and search for your new repository.

另外，如果您不想使用Heroku CLI，则可以直接从GitHub克隆或下载react-boilerplate存储库，然后自己创建一个新的存储库。 然后更改部署方法 到GitHub 并搜索您的新存储库。

You can also enable automatic deployments. When you push commits to your repository, your Heroku site will update automatically.

您还可以启用自动部署。 当您将提交推送到存储库时，您的Heroku网站将自动更新。

添加页面和组件 (Adding Pages and Components)

At this point, you should have your own folder of files connected to your Heroku application. Building pages and components is really simple and I will show you how. This tutorial assumes you know the basics of ES6 and React.js. Screenshots are of my text editor — Visual Studio Code (highly recommended).

此时，您应该拥有自己的文件文件夹，该文件文件夹已连接到Heroku应用程序。 构建页面和组件非常简单，我将向您展示如何进行。 本教程假定您了解ES6和React.js的基础知识。 屏幕截图来自我的文本编辑器-Visual Studio Code (强烈建议)。

First, navigate to the Home.js file.

首先，导航到Home.js文件。

Here you can make changes to your home page. As you can see, I am importing a Clock component as an example. I am keeping smaller components that make up the application’s pages in the subcomponents folder.

您可以在此处更改主页。 如您所见，我将导入一个Clock组件作为示例。 我将较小的组件(组成应用程序的页面)保留在subcomponents文件夹中。

Subcomponents are the reusable building blocks to your pages. Put buttons, tables, graphs, animations, forms and other reusable components in this folder. Construct your pages in the pages folder and import them to MainRouter.js.

子组件是页面的可重用构建块。 将按钮，表格，图形，动画，表单和其他可重用组件放在此文件夹中。 在pages文件夹中构造页面并将其导入MainRouter.js 。

This file is what routes your pages files to the specified URL paths. You can name your URL paths whatever you like, I just added a few sample paths to demonstrate. After that, add links to your pages in the SideBarContent.js file so that your users can navigate them.

该文件将页面文件路由到指定的URL路径。 您可以随意命名URL路径，我仅添加了一些示例路径进行演示。 之后，在SideBarContent.js文件中添加指向页面的链接，以便用户可以浏览它们。

And that’s it!

就是这样！

These links will now show up in the sidebar navigation of your app and be routed to the pages that you specified above. To add a new page to your app you only need to follow those three simple steps. The App.js file and SideBarPanel.js file don’t need to be touched and you can focus on building the actual content of your application.

这些链接现在将显示在应用程序的侧边栏导航中，并被路由到上面指定的页面。 要将新页面添加到您的应用中，您只需遵循以下三个简单步骤。 无需触摸App.js文件和SideBarPanel.js文件，您可以专注于构建应用程序的实际内容。

结论 (Conclusion)

You now have a fully functional development app with desktop and mobile-optimized navigation and routing. You can now build components and pages without worrying about the structure of the application. Show your web application to anyone just by sending them the custom Heroku link.

现在，您将拥有一个功能全面的开发应用程序，该应用程序具有针对桌面和移动设备优化的导航和路由功能。 现在，您可以构建组件和页面，而不必担心应用程序的结构。 通过向他们发送自定义Heroku链接，向任何人显示您的Web应用程序。

The next step is to set up a custom domain name and get the app ready for real traffic. Let me know in the comments if you found this tutorial helpful or have any questions.

下一步是设置自定义域名，并使应用程序为实际流量做好准备。 如果您对本教程有帮助或有任何疑问，请在评论中让我知道。

翻译自: https://www.freecodecamp.org/news/how-to-go-from-idea-to-url-quickly-with-react-js-and-heroku-d94c293c0d9c/