Javascript 如何添加API网关SDK以作出反应？

我正试图添加API网关SDK来响应代码，但我对ES6和React还不熟悉，所以很难找到一种方法

这是我的React项目结构：

myReactProject
- node_modules
- src
-- components
---- ApigClient
------ lib (AWS APIGateway JS files) 
------ apigClient.js
------ ApigValidation.js
---- otherComponents..
---- index.js
-- containers
---- App
------ App.js
------ App.scss
---- Home
------ Home.js
------ Home.scss
---- OtherContainerFiles
---- index.js
-- redux
-- utils
---- validation.js
-- client.js
-- config.js
-- routes.js
-- server.js

我尝试通过两种方式导入API网关SDK：

(一)

(二)

类ApigValidation扩展了组件{
render（）{
返回(
你好
var apigClient=apigCleint.newClient({
apiKey:'这是我的api密钥'
});
apigClient.myFuncGet（参数，null）
.然后（功能（响应）{
log（JSON.stringify（response））；
}).catch（函数（重新响应）{
log（JSON.stringify（response））；
});
);
}
}

1） 文件夹结构正确吗？我应该把SDK放在Utils中吗

2） 如何在react中导入/加载/添加JS SDK并启用get/post功能

---

敬请指教，衷心感谢

React不会对如何进行http/async数据获取或如何构建项目做出任何决定。至于“正确”的方法，有很多。查看流行的和众所周知的流量实现/变化

通常，您可以通过以下两种方式之一将SDK或任何类型的外部代码导入React应用程序

使用绑定器：Webpack、rollup.js、browserify或其他工具将以这样的方式输出代码，您需要的SDK可以从需要的模块访问

将其包含在脚本标记中：如果您在浏览器中运行所有内容，并且不想出于任何原因捆绑所有内容，则需要在React之前将该文件包含在HTML中，以便访问从任何SDK公开的全局模块

例如：

<script src="copy_of_sdk_from_CDN"></script>
<script src="copy_of_react_from_CDN"></script>
<script src="other_app_code"></script>
<script src="other_app_code"></script>

只有在不使用webpack或其他捆绑包的情况下，您才需要这样做。这些捆绑包应提供一个文件，根据您使用

require

或

import

指定的依赖项，以正确的顺序包含所有内容（如果您使用的是ES6模块）

---

这些几乎是将SDK“导入”到项目中的唯一方法。您几乎可以从远程位置将其拉入，也可以下载并以这种方式使用它（一种新的npm）。

您将其用作基地吗？@markthethomas是的！确切地说明这实际上有助于读者理解。。非常感谢。没问题！有关选项，请参见下面的答案。有了这个初学者，它应该像需要它和配置API键一样简单。非常棒的答案，谢谢@markthethomas！但是我不明白“在作出反应之前将文件包含在HTML中”。。你能给我解释一下吗？谢谢！！编辑。如果这仍然没有意义，请告诉我。你有使用JavaScript和浏览器的经验吗？否则可能会令人困惑：）只是好奇哦，对不起，我想得太复杂了。：/有时候简单的思考是你知道的最好的方式。。问题解决了。非常感谢你！简单是困难的，但简单几乎总是最好的：）您将如何使用bundler来实现这一点？你有什么例子吗？

class ApigValidation extends Component {
  render() {
    return (
      <div>
        <h1>Hello</h1>
        <script type="text/javascript" src="./lib/axios/dist/axios.standalone.js"></script>
        <script type="text/javascript" src="./lib/CryptoJS/rollups/hmac-sha256.js"></script>
        <script type="text/javascript" src="./lib/CryptoJS/rollups/sha256.js"></script>
        <script type="text/javascript" src="./lib/CryptoJS/components/hmac.js"></script>
        <script type="text/javascript" src="./lib/CryptoJS/components/enc-base64.js"></script>
        <script type="text/javascript" src="./lib/url-template/url-template.js"></script>
        <script type="text/javascript" src="./lib/apiGatewayCore/sigV4Client.js"></script>
        <script type="text/javascript" src="./lib/apiGatewayCore/apiGatewayClient.js"></script>
        <script type="text/javascript" src="./lib/apiGatewayCore/simpleHttpClient.js"></script>
        <script type="text/javascript" src="./lib/apiGatewayCore/utils.js"></script>
        <script type="text/javascript" src="apigClient.js"></script>

        <script type="text/javascript">
          var apigClient = apigCleint.newClient({
            apiKey: 'This-is-my-api-key'
          });
          apigClient.myFuncGet(params, null)
            .then(function(response) {
              console.log(JSON.stringify(response));
            }).catch(function(resuponse) {
              console.log(JSON.stringify(response));
            });
        </script>
      </div>
    );
  }
}

<script src="copy_of_sdk_from_CDN"></script>
<script src="copy_of_react_from_CDN"></script>
<script src="other_app_code"></script>
<script src="other_app_code"></script>