implementing page javascript in next/react component

Question

I am trying to implement a project like:

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?

Parsa VxT · Accepted Answer · 2021-03-28 01:55:53Z

3

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'

answered Mar 28, 2021 at 1:55

Parsa VxT

1,1197 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

implementing page javascript in next/react component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related