title: How do I Import js file to React js file
body: <p>JavaScript File.</p>
  <pre><code>const signUpButton = document.getElementById('signUp');
  const signInButton = document.getElementById('signIn');
  const container = document.getElementById('container');
  
  signUpButton.addEventListener('click', () =&gt; {
      container.classList.add(&quot;right-panel-active&quot;);
  });
  
  signInButton.addEventListener('click', () =&gt; {
      container.classList.remove(&quot;right-panel-active&quot;);
  });
  
  </code></pre>
  <p>I have this javascript Code, I want to use this in my React file.
  This is my React js file Code.</p>
  <pre><code>import React, { Component } from 'react'
  // import './js/main'
  
  class Login extends Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;div class=&quot;container&quot; id=&quot;container&quot;&gt;
      &lt;div class=&quot;form-container sign-up-container&quot;&gt;
          &lt;form action=&quot;#&quot;&gt;
              &lt;h1&gt;Create Account&lt;/h1&gt;
              &lt;div class=&quot;social-container&quot;&gt;
                  &lt;a href=&quot;#&quot; class=&quot;social&quot;&gt;&lt;i class=&quot;fa fa-facebook-f&quot; style={{color: 'blue'}} aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href=&quot;#&quot; class=&quot;social&quot;&gt;&lt;i class=&quot;fa fa-google-plus&quot; style={{color: 'red'}} aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href=&quot;#&quot; class=&quot;social&quot;&gt;&lt;i class=&quot;fa fa-linkedin&quot; style={{color: 'blue'}} aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;span&gt;or use your email for registration&lt;/span&gt;
              &lt;input type=&quot;text&quot; placeholder=&quot;Name&quot; /&gt;
              &lt;input type=&quot;email&quot; placeholder=&quot;Email&quot; /&gt;
              &lt;input type=&quot;password&quot; placeholder=&quot;Password&quot; /&gt;
              &lt;button&gt;Sign Up&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-container sign-in-container&quot;&gt;
          &lt;form action=&quot;#&quot;&gt;
              &lt;h1&gt;Sign in&lt;/h1&gt;
              &lt;div class=&quot;social-container&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;social&quot;&gt;&lt;i class=&quot;fa fa-facebook-f&quot; style={{color: 'blue'}} aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href=&quot;#&quot; class=&quot;social&quot;&gt;&lt;i class=&quot;fa fa-google-plus&quot; style={{color: 'red'}} aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href=&quot;#&quot; class=&quot;social&quot;&gt;&lt;i class=&quot;fa fa-linkedin&quot; style={{color: 'blue'}} aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;span&gt;or use your account&lt;/span&gt;
              &lt;input type=&quot;email&quot; placeholder=&quot;Email&quot; /&gt;
              &lt;input type=&quot;password&quot; placeholder=&quot;Password&quot; /&gt;
              &lt;a href=&quot;#&quot;&gt;Forgot your password?&lt;/a&gt;
              &lt;button&gt;Sign In&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class=&quot;overlay-container&quot;&gt;
          &lt;div class=&quot;overlay&quot;&gt;
              &lt;div class=&quot;overlay-panel overlay-left&quot;&gt;
                  &lt;h1&gt;Welcome Back!&lt;/h1&gt;
                  &lt;p&gt;To keep connected with us please login with your personal info&lt;/p&gt;
                  &lt;button class=&quot;ghost&quot; id=&quot;signIn&quot;&gt;Sign In&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;overlay-panel overlay-right&quot;&gt;
                  &lt;h1&gt;Hello, Friend!&lt;/h1&gt;
                  &lt;p&gt;Enter your personal details and start journey with us&lt;/p&gt;
                  &lt;button class=&quot;ghost&quot; id=&quot;signUp&quot;&gt;Sign Up&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
          )
      }
  }
  
  export default Login
  
  </code></pre>
  <p>In this code there onclick events for scrolling the login form and get the signup page.
  How do I use Javascript to perform click events.  I am new to React. Help me to get out of this.</p>