2

I am working with Reactjs(Nextjs),I am trying to integrate home page(index.js),i have following javascript files and code,i want to know that where should put these file(exist in "public" folder) ? and how ? i mean should i use these files in "_app.js" or create separate file "document.js" for this, What is the right way ?

<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/isotope.pkgd.js"></script>
<script>
    $(window).load(function() {
         var $projects = $('.projects').isotope({
            itemSelector: '.project',
            layoutMode: 'fitRows'
        });
        $(".filter-btn").click(function() {
            var data_filter = $(this).attr("data-filter");
            $projects.isotope({
                filter: data_filter
            });
            $(".filter-btn").removeClass("active");
            $(".filter-btn").removeClass("shadow");
            $(this).addClass("active");
            $(this).addClass("shadow");
            return false;
        });
    });
</script>

<script src="assets/js/templatemo.js"></script>
<script src="assets/js/custom.js"></script>
Improve this question
5
  • 1
    You can not mix jquery and react. They are incompatible. stackoverflow.com/a/51304632/12057512 Edit: However, as long as you keep react and jquery on separate pages, you can technically speaking use both. Just not on the same page. Commented Aug 19, 2022 at 8:20
  • @EmilKarlsson 1) What is right way to include/use "js" files ? in which file should i use code ? 2) And if i have jquery code (copied from index.html) then in which file and how should use this ? Commented Aug 19, 2022 at 8:34
  • 1) It depends entirely on what kind of js files they are. I can not give you an objective answer here. 2) You shouldn't include the jquery scripts within react. Instead, you should include them outside of the root react element, somewhere where they will not come in contact with react at all. So don't just place them outside of react and then call them within react. React and jquery should have no contact with each other (there are some niche exceptions, but I don't think those exceptions are relevant in this case). Commented Aug 19, 2022 at 8:42
  • @EmilKarlsson 1) i want to include js files like "bootstrap.bundle.min.js" , "templatemo.js" etc.. Commented Aug 19, 2022 at 10:44
  • You should be able to add them to your index.html file. Commented Aug 19, 2022 at 11:20

1 Answer 1

Reset to default
2

This way is wrong! You should don't use jQuery in ReactJs/NextJs. It has conflict with virtual Dom consept, because jQuery change Dom after any change, but react just change virtual Dom elements. You can define useEffect and listener for page load in _app.js. like tis:

useEffect(() => {
    const onPageLoad = () => {
      setPlayAnimation(true);
    };

    // Check if the page has already loaded
    if (document.readyState === "complete") {
      onPageLoad();
    } else {
      window.addEventListener("load", onPageLoad);
      // Remove the event listener when component unmounts
      return () => window.removeEventListener("load", onPageLoad);
    }
  }, []);
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

so where i can use my code ? means where should i put my jquery code ? And please tell me that "should i include/import all css , js in _app.js file ?" OR should i create "document.js" for this ?
In general, using jquery in react is not the right thing to do and it has a negative impact on the performance of your program. you can use document.querySelector instead jquery for select elements in page. and you can create custom Document in nextjs . nextjs.org/docs/advanced-features/custom-document

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.