Как добавить скрипт в страницу React?

Есть страница и код в теге скрипт. Как добавить js код в данную страницу React?

Страница:

import React from "react";
import './Barber1.css';
import { Link } from 'react-router-dom';
import { Helmet } from "react-helmet"

function Auth() {
  
  
    return (
        <div>
        <div id="banner">
            <img src="images/logo.png" class="logo" />
            <div class="banner-text">
                <h1>Hair Studio</h1>
                <p>Style Your Hair Is Style Your Life</p>
                <div class="banner-btn">
                    <a href=""><span></span>Find Out</a>
                    <a href=""><span></span>Read More</a>
                </div>
            </div>
        </div>
        <div id="sideNav">
                <nav>
                    <ul>
                        <li><a href="#banner">Home</a></li>
                        <li><a href="#feature">Features</a></li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#testimonial">Testimonials</a></li>
                        <li><a href="#footer">Meet us</a></li>
                    </ul>
                </nav>
            </div><div id="menuBtn">
                <img src="images/menu.png" id="menu" />
        </div>

<div id="feature">
<div class="title-text">
<p>Features</p>
<h1>Why Choose Us</h1>
</div>
<div class="feature-box">
    <div class="features">
        <h1>Expension staff</h1>
        <div class="features-desc">
            <div class="feature-icon">
            <i class="fa fa-shield" aria-hidden="true"></i>
            </div>
            <div class="feature-text">
            <p>Donec eget ultricies sapi. Sed porttitor, mauris
            ater lob facilisis, elit sapie eleifend ligula</p>
            </div>
        </div>
         <h1>Expension staff</h1>
        <div class="features-desc">
            <div class="feature-icon">
            <i class="fa fa-shield" aria-hidden="true"></i>
            </div>
            <div class="feature-text">
            <p>Donec eget ultricies sapi. Sed porttitor, mauris
            ater lob facilisis, elit sapie eleifend ligula</p>
            </div>
        </div>
         <h1>Expension staff</h1>
        <div class="features-desc">
            <div class="feature-icon">
            <i class="fa fa-shield" aria-hidden="true"></i>
            </div>
            <div class="feature-text">
            <p>Donec eget ultricies sapi. Sed porttitor, mauris
            ater lob facilisis, elit sapie eleifend ligula</p>
            </div>
        </div>
    </div>
    <div class="features-img">
        <img src="images/barber-man.jpg"/>
    </div>
</div>
</div>

<div id="services">
<div class="title-text">
<p>Services</p>
<h1>We Provide</h1>
</div>
<div class="service-box">
    <div class="single-service">
        <img src="images/pic-1.jpg"/>
        <div class="overlay"></div>
        <div class="service-desc">
        <h3>Hair Styling</h3>
        <hr/>
        <p>this is test under description of Barber
        foundation this is test under description of
        barber foundation.</p>
        </div>
    </div>
    <div class="single-service"><img src="images/pic-2.jpg"/><div class="overlay"> <div class="service-desc"/>
        <h3>Hair Styling</h3>
        <hr/>
        <p>this is test under description of Barber
        foundation this is test under description of
        barber foundation.</p>
        </div></div></div>
    <div class="single-service"><img src="images/pic-3.jpg"/><div class="overlay"> <div class="service-desc">
        <h3>Hair Styling</h3>
        <hr/>
        <p>this is test under description of Barber
        foundation this is test under description of
        barber foundation.</p>
        </div></div></div>
    <div class="single-service"><img src="images/pic-4.jpg"/><div class="overlay"> <div class="service-desc">
        <h3>Hair Styling</h3>
        <hr/>
        <p>this is test under description of Barber
        foundation this is test under description of
        barber foundation.</p>
        </div></div></div>
</div>

<div id="testimonial">
<div class="title-text">
<p>testimonial</p>
<h1>What Client Says</h1>
</div>
<div class="testimonial-row">
    <div class="testimonial-col">
        <div class="user">
            <img src="images/img-1.jpg"/>
            <div class="user-info">
                <h4>WEN NORMAN <i class="fa fa-shield" aria-hidden="true"></i></h4>
                <small>@ben</small>
            </div>
        </div>
        <p>this is test under description of Barber
        foundation this is test under description of
        barber foundation. this is test under description of Barber
        foundation this is test under description of
        barber foundation.</p>
    </div>
    <div class="testimonial-col">
    <div class="user">
            <img src="images/img-1.jpg"/>
            <div class="user-info">
                <h4>WEN NORMAN <i class="fa fa-shield" aria-hidden="true"></i></h4>
                <small>@ben</small>
            </div>
        </div>
    <p>this is test under description of Barber
        foundation this is test under description of
        barber foundation. this is test under description of Barber
        foundation this is test under description of
        barber foundation.</p></div>
    <div class="testimonial-col">
<div class="user">
            <img src="images/img-1.jpg"/>
            <div class="user-info">
                <h4>WEN NORMAN <i class="fa fa-shield" aria-hidden="true"></i></h4>
                <small>@ben</small>
            </div>
        </div>
    <p>this is test under description of Barber
        foundation this is test under description of
        barber foundation. this is test under description of Barber
        foundation this is test under description of
        barber foundation.</p></div>
</div>
</div>


<div id="footer">
    <img src="images/footer-img.png" class="footer-img"/>
<div class="title-text">
<p>Contact</p>
<h1>Visit shop today</h1>
</div>
<div class="footer-row">
<div class="footer-left">
<h1>Opening Hours</h1>
<p>Monday to Friday - 9am to 9pm</p>
<p>Saturday and Sunday - 8am to 11pm</p>
</div>
<div class="footer-right">
<h1>Get In Touch</h1>
<p>Moscow</p>
<p>[email protected]</p>
<p>+7 9231113355</p>
</div>
</div>
</div>





</div>

    );
  
  }

export default Barber1;

Сам скрипт:

<script>
var menuBtn = document.getElementById("menuBtn")
var sideNav = document.getElementById("sideNav")
var menu = document.getElementById("menu")

sideNav.style.right="-250px";

menuBtn.onclick = function(){
    if(sideNav.style.right == "-250px"){
    sideNav.style.right = "0";
        menu.src = "images/close.png";
}
    else{
    sideNav.style.right = "-250";
        menu.src = "images/menu.png";
    }
}

var scroll = new SmoothScroll('a[href*="#"]', {
    speed: 1000,
    speedAsDuration: true;
});
</script>

Ответы (0 шт):