本文共 8494 字，大约阅读时间需要 28 分钟。
创建react应用程序
by Ashish Nandan Singh
通过Ashish Nandan Singh
A lot of modern web development stories don’t have good endings because of the complex number of technologies involved and the development approach adopted to get work done.
许多现代Web开发的故事都没有很好的结局，这是因为涉及的技术复杂，并且采用了完成工作的开发方法。
The real question is, how can we make this journey less painful, or should I say more fruitful and effective? Ideally the technologies we choose should be well-established and have great community support.
真正的问题是，我们如何才能使旅途更轻松些，或者我应该说更加富有成效和有效？ 理想情况下，我们选择的技术应完善并得到社区的大力支持。
In this article, we’ll look at two technologies that are very well established and have strong community support, that enable us to create live web apps more effectively.
在本文中，我们将介绍两种非常完善的技术，它们具有强大的社区支持，使我们能够更有效地创建实时Web应用程序。
Deploy it to Firebase Hosting with one simple command
使用一个简单的命令将其部署到Firebase Hosting
When I initially tried deploying a React web application to Firebase hosting and wanted to get the web app up and running, I faced a few hurdles. I figured out that it may be useful to compile all of the research I’ve carried out into a comprehensive article to help the community. So let’s get started.
当我最初尝试将React Web应用程序部署到Firebase托管并想获得该Web应用程序时 运行起来，我遇到了一些障碍。 我发现将我进行的所有研究汇总成一篇综合文章来帮助社区可能是有用的。 因此，让我们开始吧。
At a high level, this article is divided into three parts:
概括而言，本文分为三个部分：
Get a very basic React app in place
获得一个非常基本的React应用
Create a Firebase account
创建Firebase帐户
Connect our Firebase console to our React app
将我们的Firebase控制台连接到我们的React应用
You likely know that create-react-app myapp is the best way to create a basic boilerplate for a React app. It not only creates a very basic boilerplate, but also adds the required dependencies needed for React to run.
您可能知道create-react-app myapp 是为React应用程序创建基本样板的最佳方法。 它不仅创建了一个非常基本的样板，而且还添加了React运行所需的依赖项。
If you don’t realize the true magic and sheer power of this one line command, try creating a directory for React from scratch. Only then will you realize the true pain involved. A big shout out to those developers who got this command set up in the first place.
如果您没有意识到这一行命令的真正魔力和绝对力量，请尝试从头开始为React创建目录。 只有这样，您才能意识到所涉及的真正痛苦。 最初对那些设置了此命令的开发人员大喊大叫。
To get started, we need to get create-react-app installed on our machine.
首先，我们需要在计算机上安装create-react-app 。
$ npm install -g create-react-app
The -g flag in the command above installs the NPM package globally on the machine.
上面命令中的-g标志在机器上全局安装NPM软件包。
Once this is done, we’ll use this package to get us a basic boilerplate for React.
一旦完成，我们将使用该软件包为React提供一个基本的样板。
$ create-react-app myapp
This will create a directory called myapp. Now we need to navigate into the directory and run the command below.
这将创建一个名为myapp的目录。 现在，我们需要导航到目录并运行以下命令。
$ cd myapp$ npm start
Once you run the command above, a local dev server should start and render the initial React app at the location localhost:3000
一旦您运行了上面的命令，本地开发服务器应在本地主机：3000处启动并渲染初始React应用程序。
I hope that was quick and easy. We have one last step we need to complete, but let’s take a look at Firebase first. We’ll come back to the last step with React after that.
我希望那是快速和容易的。 我们还有最后一步需要完成，但让我们首先看一下Firebase 。 之后，我们将返回React的最后一步。
Let’s first understand what Firebase is before we dive into setting it up.
首先，让我们了解一下Firebase是什么，然后再进行设置。
Firebase is a mobile and web app development platform that provides developers with a plethora of tools and services to help them develop high-quality apps, grow their user base, and earn more profit.
Firebase是一个移动和Web应用程序开发平台，可为开发人员提供大量工具和服务，以帮助他们开发高质量的应用程序，扩大用户群并获得更多利润。
Let’s have a look at the of Firebase before setting it up.
在设置之前，让我们先看一下Firebase的 。
Back in 2011, before being known as Firebase, it was a startup called Envolve. Envolve as a product provided developers with an API that enabled the integration of online chat functionality into their website.
早在2011年，在被称为Firebase之前，它是一家名为Envolve的创业公司。 Envolve作为产品为开发人员提供了一个API，该API支持将在线聊天功能集成到他们的网站中。
The company noticed that developers were using Envolve to sync application data, such as game state in real time, across their users and not just chat messages.
该公司注意到，开发人员正在使用Envolve在其用户之间同步应用程序数据(例如实时游戏状态)，而不仅仅是聊天消息。
This led the founders of Envolve, and , to separate the chat system and the real-time architecture. In April 2012, Firebase was created as a separate company that provided Backend-as-a-Service with real-time functionality.
这导致Envolve的创始人和分开了聊天系统和实时体系结构。 在2012年4月，Firebase被创建为一家独立的公司，为后端即服务提供实时功能。
After it was acquired by Google in 2014, Firebase rapidly evolved into the multifunctional behemoth of a mobile and web platform that it is today.
在2014年被Google收购后， FirebaseSwift发展成为如今的移动和Web平台的多功能庞然大物。
This single image describes Firebase in all it’s power.
这张单一图片充分说明了Firebase。
So lets begin with this: go to and login with your Google account. Once you’re logged in, click on Go to Console. You’ll be presented with an option to Create a new project.
因此，让我们从此开始：转到并使用您的Google帐户登录。 登录后，点击进入控制台 。 系统会为您提供创建新项目的选项。
Once the project is created, you have the ability to add Firebase to any Android or iOS mobile app and even a web app.
创建项目后，您便可以将Firebase添加到任何Android或iOS移动应用程序，甚至是Web应用程序。
Click on the option to Add Firebase to your web app. You’ll get a dialog box with a code snippet.
单击将Firebase添加到您的Web应用程序的选项。 您将看到一个包含代码片段的对话框。
Add this code snippet to the very bottom of your index.html file in your project. Make sure that this code snippet is added before any of the other script tags in your index.html file.
将此代码段添加到项目中index.html文件的最底部。 确保在index.html文件中的任何其他脚本标签之前添加了此代码段。
If you look closely in the image above, you can see that there are some links provided at the very bottom. Click on the first link and check out the Get Started with Firebase for Web Apps. You’ll be presented with the screen below.
如果您仔细查看上图，您会发现在最底部提供了一些链接。 单击第一个链接，然后查看“ Web应用程序的Firebase入门” 。 您将看到以下屏幕。
Click on get Started.
单击入门。
Go to your root directory and enter the command above in your terminal. This will download the Firebase tools on your machine locally.
转到您的根目录，然后在终端中输入上面的命令。 这将在您的计算机上本地下载Firebase工具。
The next and the final step is to initialize Firebase and deploy the source code within your directory to Firebase.
下一步也是最后一步是初始化Firebase，并将目录中的源代码部署到Firebase。
Once you hit finish, and you’ve followed all the steps above and entered them into your terminal, you should have a list of last deployment records shown on the web page.
完成操作后，按照上述所有步骤操作，并将其输入到终端中，您应该在网页上显示最近部署记录的列表。
Remember in the React part above, I said we would get back to do one last thing? We’re going to do that now.
还记得上面的React部分中，我说过我们会做最后一件事吗？ 我们现在要这样做。
Navigate to the directory where your app is created.
导航到创建应用程序的目录。
The way React works is that it lets you create a build version. This is a much minified version of all the mammoth code library it sets up if you have a pretty dense application.
React的工作方式是让您创建一个构建版本。 如果您有一个非常密集的应用程序，则它是所有庞大代码库的最小化版本。
To get this minified and compressed version, we can use our terminal and one very useful command:
要获得此压缩后的缩小版本，我们可以使用终端和一个非常有用的命令：
$ npm run build
This creates a new folder in your app directory named build. This folder contains a few files which are the most essential pieces of your entire React application.
这将在您的应用程序目录中创建一个名为build的新文件夹。 这个文件夹包含一些文件，它们是整个React应用程序中最重要的部分。
If you’ve followed all the steps carefully and have read a bit of the official documentation, all of this should be a cake walk.
如果您已仔细遵循所有步骤并阅读了一些官方文档，那么所有这些都应该是轻而易举的事。
Personally, I feel that Firebase has already revolutionized the way developers are testing and using hosting as a service. This is a much simpler and more relaxed way of hosting your apps efficiently, without delving into the details of hosting.
我个人认为， Firebase已经彻底改变了开发人员测试和使用托管即服务的方式 。 这是有效地托管应用程序的一种更简单，更轻松的方式，而无需研究托管的细节。
翻译自:
创建react应用程序
转载地址：http://xikzd.baihongyu.com/