多人游戏应用程序会让你想知道为什么传统的单客户端应用程序仍然是标准的，我将向您展示使用SAPUI5组件创建前端React应用程序是多么容易。然后我将在此基础上添加表格和图表，以便该应用程序可以与其他连接的用户实时交互共享信息。
前提条件：
JavaScript基本知识
推荐知识：
JavaScriptHTML
首先是一些概念和约定：
React是一个单页应用程序框架，稍后将对此进行详细介绍。我将重用openUI5团队中有才华的人创建的组件https://sap.github.io/ui5-webcomponents/文档https://github.com/SAP/ui5-webcomponents文件和代码JavaScript有几种不同的处理方式，在这个博客中，我将使用一种混合方式，我将指出其中的差异，您不必阅读，但如果您阅读了它，它将有助于您的理解。
重要–您需要理解这一点。
命令–您需要键入的内容在单引号内（不包括单引号）–这是类型，而不是复制–您将在键入时了解更多。
操作–您需要执行的内容，用>分隔。示例–Start>'cmd'
在任务栏上按Start开始，然后（用>）键入'cmd'
不要被概念中的行话拖累，这是一个演练，所以让我们开始：
操作–安装vscode–https://code.visualstudio.com/
操作-安装节点.js（建议大多数用户使用LTS版本）–https://nodejs.org/en/
行话-node是一个开源的服务器环境，它包括一个包管理器（npm），这意味着我可以使用其他（非常聪明的）人的东西需要做的是安装它，然后将模块导入到我的应用程序中。当我这样做时，我的应用程序会注意到依赖关系，并确保它总是打包在一起。
重要-节点.js在服务器上运行。服务器可以是我的本地笔记本电脑，也可以是数据中心或云中某处的某种服务器节点.js发送HTML我写在你的浏览器上的代码，就像其他任何网络服务器一样，但你完全可以控制，大数据查询平台，就像拥有超级能力一样。
重要–除了我可以免费使用的酷模块，一些聪明人认为提供模板是个好主意，所以我不会被无聊的东西压得喘不过气来。这就是所谓的引导。我将使用一个模板来引导我的新应用程序：
打开一个命令提示符、PowerShell或终端（从这一点开始称为提示符），在Windows上，这将是
开始>'cmd'
或
开始>'PowerShell'
更改为本地目录（可能最好创建一个本地开发目录来保存我未来所有优秀的应用程序）；cd localDev'
'npx create react app meaps'
行话–create react app是一个工具链。这里有各种不同类型的应用程序的其他工具链
几分钟后引导将完成，我将能够启动我的新服务器。提示：
'cd meaps'
'npm start'
应该启动哪个一个开发服务器和一个中间带有React徽标的浏览器。我也可以浏览到：3000。如果这对您不起作用，请返回并重新阅读此重要内容。
因此，使用3个命令，我构建了一个本地服务器，设置一个模板单页应用程序并在浏览器中运行。
我有一个提示仍然在运行我的开发服务器？但是，我想在vscode中运行此命令。在提示：
操作–按ctrl c并键入y终止批处理作业。
代码。
代码，然后是空格，然后是句点。
这将在正确的目录中打开vscode。刷新浏览器时，由于取消批处理作业而出现错误。要解决此问题，在vscode中：
操作–下拉菜单>终端>新终端
将在页面底部显示新终端，现在这是我的新提示。在终端窗口标题栏>定位：
操作–垃圾桶左侧>点击2窗口
两个窗口
这将给我2个终端。在其中一个终端中输入：
npm start'
现在我可以看到我的react徽标再次在我的浏览器中旋转。
让我们玩得开心。在在浏览器窗口，我可以看到一些文件和文件夹，我可以双击它们进行编辑：
Action–MEAPS>src>应用程序.js
操作-将所有的cope替换为：
并保存应用程序.jsfile press\type:
Cntrl's'
我的浏览器会立即更新。这意味着我可以边做边设计。
下一步是让它看起来更时髦，但首先要讲一点文件和文件夹结构。
行话-文件和文件夹结构，我会很简短；MEAPS是我的源（基本）文件夹和holder文件，描述（对包管理器NPM）依赖关系，以及一些其他运行和生成参数包.json，稍后将详细介绍此.MEAPS\node modules文件夹保存其他人编写的所有好东西。MEAPS\public保存我的应用程序的静态文件，这些文件是不可变的（不能更改它们）作为节点.js调用.MEAPS\src这就是魔法发生的地方，当我运行npm start时，节点运行的代码的去向。你真的不需要知道这一点-我可以在包.json>脚本>react scripts start.react scripts是node\u modules文件夹中的一个模块，我将在其中找到react scripts/scripts/开始.js，如果我继续遵循代码可能会在彩虹函数的两端找到一桶金子…够了…
在我开始让事情看起来更有吸引力之前，超算云，我需要重新构造应用程序，以便利用REACT提供的功能。
