title: gapi is not defined when loading React Component
body: <p>I am trying to integrate Google Sign In (<a href="https://developers.google.com/identity/sign-in/web/sign-in" rel="noreferrer">link</a>) using React.<br />
  I found a question that has solved this in past <a href="https://stackoverflow.com/questions/31640234/using-google-sign-in-button-with-react-2">Using google sign in button with react 2</a></p>
  <p>I replicated the same steps as mentioned. In my <code>index.html</code> I do</p>
  <pre><code>&lt;script src=&quot;https://apis.google.com/js/platform.js?onload=triggerGoogleLoaded&quot; async defer&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
          function triggerGoogleLoaded() {
              console.log(&quot;google event loaded&quot;);
              window.dispatchEvent(new Event('google-loaded'));
          }
      &lt;/script&gt;
  </code></pre>
  <p>Then my <code>Component</code> looks like</p>
  <pre><code>var LoginButton = React.createClass({
  
      onSignIn: function(googleUser) {
          console.log(&quot;user signed in&quot;); // plus any other logic here
      },
  
      renderGoogleLoginButton: function() {
          console.log('rendering google signin button');
          gapi.signin2.render('my-signin2', {
              'scope': 'https://www.googleapis.com/auth/plus.login',
              'width': 200,
              'height': 50,
              'longtitle': true,
              'theme': 'light',
              'onsuccess': this.onSignIn
          })
      },
  
      componentDidMount: function() {
          window.addEventListener('google-loaded',this.renderGoogleLoginButton);
      },
  
      render: function() {
          let displayText = &quot;Sign in with Google&quot;;
          return (
              &lt;div class=&quot;g-signin2&quot; data-onsuccess=&quot;onSignIn&quot;&gt;&lt;/div&gt;
          );
      }
  
  });
  
  export default LoginButton;
  </code></pre>
  <p>When I run the program using <code>yarn start</code>, I get</p>
  <pre><code>/Users/Harit.Himanshu/bl/sources/webs/google-login/src/LoginButton.js
    11:9   error    'gapi' is not defined                             no-undef
    26:13  warning  'displayText' is assigned a value but never used  no-unused-vars
  
  ✖ 2 problems (1 error, 1 warning)
  </code></pre>
  <p>The complete source code is available at <a href="https://github.com/hhimanshu/google-login-with-react" rel="noreferrer">https://github.com/hhimanshu/google-login-with-react</a></p>
  <p>Could someone please help me understand my mistake?</p>
  <p>Thanks</p>