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>
  • 1
    You can not mix jquery and react. They are incompatible. https://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. – Emil Karlsson Aug 19 '22 at 08: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 ? –  Aug 19 '22 at 08: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). – Emil Karlsson Aug 19 '22 at 08:42
  • @EmilKarlsson 1) i want to include js files like "bootstrap.bundle.min.js" , "templatemo.js" etc.. –  Aug 19 '22 at 10:44
  • You should be able to add them to your index.html file. – Emil Karlsson Aug 19 '22 at 11:20

1 Answers1

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);
    }
  }, []);
Saeed Mansoori
  • 316
  • 3
  • 8
  • 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 ? –  Aug 19 '22 at 12:29
  • 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 . https://nextjs.org/docs/advanced-features/custom-document – Saeed Mansoori Aug 19 '22 at 12:35