大家好！！
我写最后一行UI5代码已经有8个月了，你知道的……在我沉迷其中2年之后……我有点怀念它。
在过去，同样的感觉驱使我在stackoverflow中解决很多问题，但我现在不太喜欢它。我需要一些新的东西…aaaa上周五在这里和那里查看我的feed，我发现了这篇文章。
我可以在这里给你一个提示（就在第一段哈哈哈）：不要跳过Peter Muessig的帖子，它总是意味着周围有一些有趣的东西。
无论如何，企业信息管理软件，编码的东西。由于我过去8个月一直在玩Angular，财务大数据，React，Redux，诸如此类的游戏，我在那篇文章中看到了光明！！让我们再次享受UI5的乐趣。
将这些UI5Web组件与React、Redux和套接字.io例如。我想看看它们在一起工作得有多好，所以这不是关于如何掌握ui5web组件的教程。请按照SAP教程进行操作。
我在写这篇文章时正在编写代码（如果以后再写，我会忘记一些细节）。不要期待干净的代码或最佳实践…这只是思想呕吐。
我知道一些ReactJS，只是Redux的基础知识，我做了几个"我很无聊，让我们做点什么"的项目套接字.io. 我想你至少应该达到同样的水平。但是继续阅读…也许我错了，或者你认为你知道的比你真正知道的要少。
第一步：克隆React-UI5应用程序已经可用
Peter在回答我对已经提到的文章的评论时给了我以下链接：
https://sap.github.io/ui5-webcomponents/
只需向下滚动一点，点击"探索代码"链接对于React应用程序（但在您离开之前，请保存链接以备将来使用，它可以为您提供更多角度的/Vue/以后的任何乐趣）
遵循git repo上描述的第一步。对我来说：
啊哈！！待办事项列表！！多么经典…我喜欢它。
注意：如果你已经到了这一点，我希望你有同样的感觉我现在=>"我已经在我的localhost上托管了一个应用程序…天哪！我是职业选手！！"
第二步：探索应用程序+保存我的胡萝卜
转到always magic文件夹："src"。
我处理的第一个文件是`应用程序.js`.
在`应用程序.js`文件，北京大数据，导入之后，有一个很长的状态定义。
看起来节点'todos'是初始数据，在todo list app中显示的数据。
我不喜欢在状态中，基本上，因为它是不稳定的，所以我想保留这些数据以及我通过应用程序对其所做的任何更改。救我的胡萝卜！！
对于那些不了解我的人来说，我是其中一个懂得如何做前端的"满员"，并在数小时内忍受连接真实数据库的痛苦。很抱歉，这次没有mongo DB。我们的想法是使用json服务器(https://github.com/typicode/json-server)提供一个假的RESTfull API。如果您按照json服务器repo中的步骤操作，就很容易了。
对我来说：
我喜欢在不同于FE服务器的端口上运行BE服务器，这就是为什么3001…但是您可以随心所欲。
到目前为止还不错，我的演示程序还在`本地主机：3000`现在我可以做了`本地主机：3001/todos`从我的伪BE服务器（SAP NW Gateway 7.5的瘦兄弟）获取我的TODO列表
第3步：从我们的伪DB获取这些"TODO"
如果你足够好奇，你已经意识到从状态中删除"TODO"节点会破坏应用程序。但是如果你清空数组，应用程序就会运行并显示一个空列表。
所以让我们在删除它们之前获取它们。现在我要在晚上做`应用程序.js`文件，在componentWillMount（）方法中。我们以后可能会更改它。
很好，如果您检查UI5应用程序中的浏览器控制台，您应该会在那里看到获取的"todo"。
让我们将它们置于状态。首先在导入后清空状态定义中的"todos"数组（如果保存它，应用程序将显示一个空列表），然后更改：
For:
就这样。你的物品来自你的假数据库。如果你想再检查一次，就换一个数据库.json随意归档，看看应用程序如何更新。
第4步：Redux–第1章：CRUD中的R
好吧，这很尴尬。我想在这篇文章中添加一些细节，但是如果我试图详细解释什么是Redux，以及如何一步一步地设置样板文件，这篇文章将花费很长时间。所以我决定对它进行编码，提到一些重要的事情，并给出代码。我相信你会设法理解它。
我不知道/关心这意味着什么，但我知道它允许你在你的应用程序中管理一个全局状态，并以某种方式"订阅"你的组件到这个全局状态，因此，如果绑定的数据发生变化，它们将被重新呈现。
对于移动大量数据的大型项目来说，这是一种强制性的事情。老实说，我发现它在很多方面都非常方便。
Redux对ReactJS（比如Timon和Pumbaa）非常有用，但是所需的样板配置非常糟糕。你可以在那里找到很多教程，我不能在这里解释。如果你不想在上面花费太多时间：
1。将"src/redux"文件夹从my repo复制到您的应用程序中。
2。运行：npm安装-保存redux react redux redux thunk
3。创建一个名为主要.js在"src"文件夹中，包含以下内容
4.更改索引，js文件使用新的主要.js组件为"根"组件
5。在中导入connect和fetchTodos应用程序.js文件，创建mapstatetops（）函数并返回包装到connect函数中的组件
注意：如果您在这里遇到任何问题，请尝试重新启动FE服务器：npm start
