implementing page javascript in next/react component

I am trying to implement a project like:

https://codepen.io/andytran/pen/GpyKLM

As you can see there is javascript that is needed for the page to function. I am trying to build a Next/React component that implements this code:

import React, { Component } from 'react';
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>




class Auth extends Component {

  render() {
    
    return (
      <div className="App">
        <Header></Header>
        <div className="container mrgnbtm">
          <div className="row">
            <div>
              hello
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Auth;

Where would I put the javascript in the above example? Also, how would I call code from a scss file?

Answer

What you do is anti-pattern, instead of importing bootstrap from a CDN you can use reactstrap package.

for element listeners, must pass those to each element that you want, like onClick:

<div id="button" onClick={() => alert("button clicked!")} ....

and for using SCSS in your next app, first you have to install the sass package:

npm install sass --save

then reload the dev server and import SCSS file in component, e.g:

import styles from '../../styles/Home.module.scss'