Wie API API Gateway SDK zum Reagieren hinzufügen?

Question

Ich versuche API-Gateway SDK hinzuzufügen Code reagieren zu können, aber ich bin neu in ES6 und reagieren, so ist es schwer, einen Weg

Dies ist meine Reaktion Projektstruktur zu finden:

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 

Und ich habe versucht, das API-Gateway SDK auf 2 Arten zu importieren:

1)

import ApigClient from './ApigClient'; 
import apiGatewayClient from './lib/apiGatewayCore/apiGatewayClient' 
import sigV4ClientConfig from './lib/apiGatewayCore/sigV4ClientConfig' 
import simpleHttpClientConfig from './lib/apiGatewayCore/simpleHttpClientConfig' 
import utils from './lib/apiGatewayCore/utils' 
import enc-base64 from './lib/CryptoJS/component/enc-base64' 
import hmac from './lib/CryptoJS/component/hmac' 
import hmac-sha256 from './lib/CryptoJS/rollups/hmac-sha256' 
import sha256 from './lib/CryptoJS/rollups/sha256' 
import axios from './lib/axios/dist/axios.standalone' 
import url-template from './lib/url-template/url-template' 

2)

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> 
    ); 
    } 
} 

1) Ist die Ordnerstruktur richtig? Soll ich SDK in Utils setzen?

2) Wie kann ich JS SDK importieren/laden/hinzufügen in reagieren und aktivieren Sie Get/Post-Funktion?

Bitte beraten, hochachtungsvoll geschätzt!

Answer 1

React trifft keine Entscheidungen darüber, wie Sie Ihr http/async-Daten abrufen oder wie Sie Ihr Projekt strukturieren. Soweit es einen "richtigen" Weg gibt, gibt es viele. Betrachten Sie Redux für beliebte und bekannte Implementierung/Variation des Flux.

Im Allgemeinen können Sie eines von zwei Dingen tun, um ein SDK oder irgendeinen externen Code in Ihre React App zu bekommen.

1. ein Bündler Verwenden: Webpack, rollup.js, browserify oder andere Werkzeuge ausgibt Code in einer Art und Weise, so dass das SDK Sie müssen von den Modulen es erfordern zugänglich ist.

2. ist es in einem Script-Tag: Wenn Sie alles im Browser laufen und wollen nicht gleich aus welchem ​​Grunde, alles zu bündeln, müssen Sie die Datei in Ihrem HTML schließen, bevor so Reagieren Sie erhalten Zugang zu den globalen Modulen, die von dem, was das SDK ist, zugänglich gemacht werden.

Zum Beispiel:

<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> 

würden Sie nur tun müssen, dass wenn Sie webpack oder eine andere Bündler nicht verwenden. Diese Bündler sollten Sie eine Datei geben, die alles in der richtigen Reihenfolge enthält gemäß den Abhängigkeiten, die Sie angegeben haben mit require oder import (wenn Sie ES6 Module verwenden)

Das sind so ziemlich die einzigen Möglichkeiten, um „get“ das SDK in Ihr Projekt. Sie können es entweder von einem entfernten Standort aus abrufen oder herunterladen und verwenden (a la npm).