How To use External JS/Jquery in React Jsx component's

Question

Hope You are doing great and in good health. I'm a beginner in React.js and doing my FYP project, I come to a problem where I'm not able to insert external JS or Jquery code inside the react, I have tried many npm and mentioned processes in StackOverflow, but that not work? What should I do? where I import these scripts ??

Answer 1

//import all libraries here   
import React, { Component } from "react"; //importing react
import $ from "jquery"; // be sure to do npm install jquery
import some_library from "./path/to/some/library"; //importing directly from .js file

class App extends Component {
  render() {
    return (
      ...
    );
  }
}

export default App;

---

If you want to use, plain JavaScript/JSON to render its relevant DOM, I recommend to go with functional components.

import React from "react";

const example = () => {
  return (
    <div className="App">
      <h1>Hello World</h1>
      <h2>This is inside a function</h2>
    </div>
  );
};

export default function App() {
  return example();
}