使用 React 创建 IBM Watson 资源管理器（4）

look_w

第 5 步.                扩展该应用程序以利用其他 Watson 服务（可选） 这个资源管理器应用程序目前仅支持 12 种可用的 Watson 服务中的 3                种。在应用程序中添加对一个或多个其他服务的支持，是一种物有所值的练习。此练习也可帮助您了解 React 如何让复杂的 UI 变得容易理解和维护                — 因为在此应用程序中添加服务的新 UI 非常简单。

• 如果未在第 4 步中设置一个 Material-UI 开发环境，现在可设置一个。
• 登录到 Bluemix，添加一个新 Watson 服务实例，将该服务绑定到您的应用程序，并为该服务提供一个名称。编辑您项目的                    manifest.yml 文件，使之包含此名称。
• 查阅 Watson 服务 API 文档，了解如何使用新服务和如何调用它的 API。使用现有的代理代码作为参考，修改                    bluemixdeploy/app.js 来添加对新服务的代理支持。
• 添加一个 React 视图的 JSX 代码，以便在您的服务中支持输入，将该代码放在                    clientsrc/src/app/components/views 目录中。使用已存在的其他视图的代码作为参考。
• 在 clientsrc/src/app/less/custom-overrides.less 文件中定义您可能需要的任何新 CSS                    样式。
• 添加一个 React 视图的 JSX 代码来呈现从 Watson 返回的结果，将该代码放在                    clientsrc/src/app/components/view 目录中。以该目录中的其他结果视图作为参考。您添加的实际上是一个                    React 控制器-视图，它将一个动作提交给（模拟的）Flux 存储。
• 在 clientsrc/src/app/components/store 中，添加一个存储来支持您的服务。必须在                    clientsrc/src/app/components/store/callwatson.js                    中添加一个方法来调用您服务的代理。使用其他存储的代码作为参考。
• 在 bluemixdeploy/app.js 文件（代理服务器）中添加一个新的路由处理函数，将从客户端传入的                    POST 请求转换为对 Watson 服务的调用，并将为客户端转换来自 Watson 的结果。
• 在 clientsrc/src/app/app-routes.jsx 中，修改应用程序 ( )                    路由，使之包含您的新视图。

在开发期间，您可以在本地 PC 上同时运行代理和 React 代码 — 参见 README.TXT 了解更多信息。
结束语 使用 React 有助于保持 Watson Explorer 代码井然有序、整洁且容易理解。遵守 React                的编码最佳实践，可改善代码的可维护性，使新团队成员（或这篇简短教程的读者）能够快速开展 Web 应用程序项目。高质量的 React 组件库（比如                Material-UI）的存在，使快速创建高水平的 Web 应用程序成为了现实。您可从精简的项目开始，利用 React 能增强生产力的 JSX                同一位置语法，然后扩展到更复杂（或多人协作）的项目。