How to import js file to React component?

Question

I have Home.js React component located in ./components/Home.js and ratingStars.js file located in ./js/ratingStars.js .

And I want to use script from ratingStars.js in my Home component, but using <script src="js/ratingStars.js"></script> doesn't work. How to import js file to React component?

Here is ratingStars.js :

"use strict"

const ratings = document.querySelectorAll('.rating');

if(ratings.length > 0){
    initRatings();
}

//main foo
function initRatings(){
    let ratingActive, ratingValue;
    for (let index = 0; index < ratings.length; index++) {
        const rating = ratings[index];
        initRating(rating);
    }
    //foo for accurance rating
    function initRating(rating){
        initRatingVars(rating);

        setRatingActiveWidth();

        if (rating.classList.contains('rating_set')){
            setRating(rating);
        }
    }
    //init vars
    function initRatingVars(rating) {
        ratingActive = rating.querySelector('.rating_active');
        ratingValue = rating.querySelector('.rating_value');
    }

    //change rating width
    function setRatingActiveWidth(index = ratingValue.innerHTML) {
        const ratingActiveWidth = index / 0.05;
        ratingActive.style.width = `${ratingActiveWidth}%`;
    }
}

Answer 1

You can use the import statement and call upon the components in them in this way.
import <Name of what you want to import> from '<Relative Path>'

Answer 2

You can import React components like this

 import Home from './components/Home';

 import ratingStars from './components/ratingStars';

Answer 3

Let's say your js file - ratingStars.js looks so:

export const ratingStars = () => {...};

then you should import it in your React component ( Home.js ) so:

import {ratingStarts} from '../js/raintgStars'

Answer 4

You can try with <script src="./js/ratingStars.js"></script>

or usually in React, we can import js files as following,

import ratingStars from './js/ratingStars.js'