在我们现代的智能手机和应用程序世界中，拥有一个快速、响应迅速的网站给您的访问者留下深刻印象比以往任何时候都更加重要。 ReactJS 由 Facebook 的开发团队创建，是一种 JavaScript“框架”或构建网页和应用程序的方法，可以“响应”用户交互和外部变化。 ReactJS 通过无需重新加载页面即可刷新自身及其内容的组件来做到这一点。 更好的是，这些组件是模块化的。 这个概念意味着它们可以快速编码（在 ReactJS 社区中称为“hacking”）并在项目之间轻松重用。
虽然编写 React JavaScript 代码超出了本教程的范围，但我们很高兴通过创建开发环境来帮助您和您的开发团队开始工作。 我们的重点是让官方 ReactJS 教程示例在 Liquid Web WHM/cPanel 虚拟专用服务器或 VPS 上运行。 在我们的 VPS 平台上构建的服务器可以很好地用作开发/测试服务器，并且可以轻松创建。 随时启动 VPS 来跟随我们吧！
开发完成后，专用服务器可以长期为您的应用程序提供更高的稳定性。 如果您的应用程序与 HIPAA 相关，您将需要具有 HIPAA 合规性托管的专用服务器。 VPS 和专用服务器平台之间的区别可以在我们的知识库文章中找到。 此外，ReactJS 也可以安装在我们的 Plesk、Windows 和 Ubuntu 平台上。 让我们开始吧！
安装 NodeJS
首先，我们需要安装最新版本的 NodeJS； 此应用程序允许我们的 JavaScript 文件相互导入（或引用）、共享全局变量、访问高级命令行参数、安装附加模块等等。
在撰写本文时，NodeJS 的最新版本是 11.X 始终使用最新的软件来确保您的应用程序的稳定性和安全性。 今天我们将下载并安装 最新版本.
首先，我们登录终端并设置 NodeSource 存储库：
curl -sL https://rpm.nodesource.com/setup_11.x | bash -
接下来，我们安装 NodeJS 及其依赖项：
yum install -y nodejs gcc-c++ make
要验证安装并检查版本，我们运行：
node --version
安装服务
ReactJS 应用程序可以由 Apache 或由轻量级“服务“ 应用。 服务可以一起运行 Apache/Nginx 通过运行完成 在备用端口上服务。
要全局安装 Serve，我们运行以下命令：
npm install -g serve
在本教程中，我们将在新创建的 cPanel 帐户上运行此应用程序。 但它也可以在任何现有帐户上运行。 在这个例子中，我们的 cPanel 用户名是 ‘反应‘，我们的开发文件夹将被命名为’开发者‘。 这个 dev 文件夹将位于我们 cPanel 帐户的根文件夹（/home/react/dev）。 可以通过文件管理器或 FTP 创建文件夹，但在此示例中，我们通过命令行执行此操作：
mkdir /home/react/dev/
安装 ReactJS
我们的下一步是使用应用程序’创建反应应用‘ 命令来构建框架并安装必要的先决条件。 无需担心更新“create-react-app”，此应用程序在运行时会自动更新。
此命令需要正确构建的路径。 在我们的示例中，我们正在运行以下命令来构建我们的 开发者 文件夹。
npx create-react-app /home/react/dev
create-react-app 过程可能需要几分钟，但它会让您随时了解进度，如下所示：
完成后，您将看到一些重要开发命令的概述，并热烈欢迎您加入 ReactJS 社区。
create-react-app 脚本使用默认内容为我们生成了上述文件。 这样，您和您的开发人员就可以开始开发过程。
注意 ReactJS 应用程序的三个主要组件是：
- .html 文件； 这些为您的应用程序提供了结构。
- .css 文件； 这些包含您的应用内容的样式。
- .js 或 Javascript 文件； 这些提供应用程序功能。
运行 ReactJS 默认应用程序
虽然 Liquid Web Support 无法帮助解决与代码相关的问题，但在本教程中，我们将通过启动默认应用程序更进一步。 最后，我们将审查并启动 ReactJS ‘tic-tac-toe game’ 教程应用程序。
首先，让我们通过构建默认应用程序来确认 ReactJS 正在运行。 我们希望在命令行和我们的工作文件夹中。
cd /home/react/dev/运行以下代码让 React 构建默认的包内容。
npm run build
这里有几个选项，默认情况下，如果我们使用“Serve”，它将使用端口 5000； 这是通过调用以下命令运行的：
serve -s build
注意您可能会注意到有关“xsel”的错误。 该应用程序用于从命令行复制到 Linux 桌面环境或 GUI（Gnome、KDE、Mate 等）。 在我们的例子中，我们的 Linux 服务器没有使用桌面环境，所以我们不需要也不能使用 xsel 库，所以我们将忽略该错误。
查看 ReactJS 默认应用
为了让外部世界可以使用我们的应用程序，我们需要确保在防火墙中打开端口 5000； 尽管默认情况下此端口未打开，但我们可以轻松调整；
我们正在寻找名为“在防火墙中打开和关闭端口”的部分。 实现后，您将看到在浏览器中运行的默认 ReactJS 应用程序。 我们不拥有该域’react.com‘ 所以我们需要调整我们的 /etc/hosts 在我们的工作站上本地文件。 以下是有关编辑您的 /etc/hosts 文件。
如果您拥有自己的域和指向 Liquid Web 服务器 IP 的站点的 DNS ‘A’ 记录，那么这也应该对您可见。 如果一切都已配置并正常运行，默认的 ReactJS 屏幕将如下所示。
运行 ReactJS
可以在典型的 ReactJS 应用程序上运行 Apache 或 Nginx 端口； 请注意，使用 Serve 在端口 80 上运行 ReactJS 意味着 Apache 或者 Nginx 需要被禁用。 如果您的服务器的主要重点是处理此应用程序， Apache 可以在服务器范围内禁用。 Serve 是一个非常轻量级的应用程序并且运行良好。 如果您没有在端口 80 上运行其他服务； 以下命令将在端口 80 上启动“服务”。
PORT=80 serve -s build
以上也可以调整到不同的端口。 这样，多个 ReactJS 应用程序可以在同一个域上运行。 除此之外， Apache 可以将您的 ReactJS 应用程序作为静态内容提供服务。 为此，我们需要复制应用程序的内容 /建造 文件夹到为 Web 交付配置的目录中的所需位置。
在我们的例子中，我们将复制 /home/react/dev/build 到 /home/react/public_html. 这可以在命令行上使用：
cp -r /home/react/dev/build /home/react/public_html
根据您构建应用程序包的方式，您可能需要调整文件的权限。 在我们的例子中，这些文件的所有权设置为 ‘根‘。 对此，我们将所有权更改为“反应‘。
在此示例中，我们将使用以下命令将 public_html 文件夹中的所有文件调整为由用户“react”拥有：
chown -R react. /home/react/dev/public_html/*
具有 Apache 服务于上述，我们将调整 .htaccess 我们项目中的配置。
vim /home/react/public_html/.htaccess
使用我们的文本编辑器，我们将添加以下内容：
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
如果一切配置正确，您现在应该会看到由 Apache 访问您的网站时的服务。 您现在知道了如何让默认 ReactJS 环境在 Liquid Web Linux WHM/cPanel VPS 服务器上运行的基础知识！
示例 ReactJS 应用程序
通过阅读教程，我们将在这里更进一步。 本教程详细介绍了 ReactJS 入门的各个方面，详细介绍了编写运行井字游戏所需的一些组件。 我们建议逐行阅读代码和文档。 有了这些知识，您就可以构建自己的应用程序。 ReactJS 语法和概念的最佳来源是 在他们的文档中找到. 随意花时间浏览这些示例和文档； 有很多事情要做，但你可以从小处着手，逐步发展。 今天我们将复制的内容 最终代码 看看它们如何在我们的 Liquid Web 服务器上运行。
有多种方法可以调整内容 索引.html, 索引.css， 和 指数。jss 文件。 虽然超出了本教程的范围，但您可以使用其他命令行文本编辑工具、FTP、cPanel 的文件管理器工具、Git 等来编辑文件。 在我们的例子中，我们使用的是 cPanel 文件管理器文本编辑器。 这是此界面的演练以及如何使用文件管理器编辑文件。
首先，我们打开文件管理器，导航到我们文件的位置 /home/react/dev/public/index.html，然后我们选择 index.html 文件（1）并点击“编辑”（2）
我们将把 CodePen 中的代码复制粘贴到我们的服务器端文件中。
其次，我们对 /src/index.css.
最后，我们复制粘贴内容 /src/index.js.
在顶部 index.js 文件，我们添加一些需要的代码； 这是引用 React 安装和我们的 CSS 文件所必需的。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
复制所有三个文件后，我们将重建我们的项目。 要重建，我们将回到我们的开发文件夹并重新运行我们的构建脚本。 有了这个，我们可以通过使用我们的服务脚本来服务我们的新版本来进行测试。 通过访问 react.com:5000 我们在 Liquid Web 服务器上看到了我们的井字游戏！
总之，我们回顾了 ReactJS 为开发人员提供了什么，安装了 ReactJS 以及定制。 有了官方文档，您现在就拥有了构建您梦想中的应用程序所需的一切。 我们迫不及待地想看看您的想法！
关于这个话题还有其他想法或问题吗？ 我们的销售和支持团队全天 24 小时提供服务，可以通过电话或电子邮件联系以提供帮助。 立即通过 [email protected] 向我们提交支持请求，拨打 1-800-580-4985 联系我们，或者与我们进行聊天，我们将很乐意回答您的任何问题！
