How to add jquery js files in React?

Question

I have recently switched to React inorder to achieve single page application

Previously I had 8 html files and 8 js files which were linked by script tag

<script  src="pathHere"> </script>

Now as I switched to React. Now the html pages are replaced by components with extension .js

How can I link some components(which have html content) with js (which contain js in jquery format) I tried to add component of js file in my jsx


import FirstJsFile from "../ApiCalls/FirstJsFile";
const Display = () =>{
    return (
        <div>
     // jsx written here
    <FistJsFile/> // This is  the js file which  conatins js in form of jquery
        </div>
    )
}

export default Display;

Then the js file contains this

const FristJsFile = () =>{
    return (
        <>{
            $(function(){
                console.log("Jquery getting loaded")
                }
        </>
    )
}

export default FirstJsFile

At the top-level of the React application there's still an HTML page. You can add ` — David, Apr 05 '22 at 19:31
Double down on what @David says.... JQuery and React have pretty orthogonal approaches to UI management that don't generally mix well at all. IMHO you should ditch jquery if using React. — Drew Reese, Apr 05 '22 at 19:37

score 0 · Answer 1 · answered Apr 05 '22 at 19:36

0

I recommend using react-state instead of jquery.

answered Apr 05 '22 at 19:36

MΛRTIN N

123
9

How to add jquery js files in React?

1 Answers1