React App 中的外部 JS - 渲染问题

Question

I am new to react an trying to add external JS in react App. However no approach is working for me as JS does not work at all.

Below is my code. What is wrong with the code?

import logo from './logo.svg';
import './App.css';
import React, { Component }  from 'react';
import * as Yup from 'yup';
import ScriptTag from 'react-script-tag';
import {Helmet} from "react-helmet";

function App() {
  return ( 
  <div className='App'>
    <h1>This is external javascript - Helmet</h1>
    <Helmet>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" 
    type="text/javascript" />
    </Helmet>
    
    <h1>This is external javascript - ScriptTag</h1>
      <ScriptTag isHydrating={true} type="text/javascript" 
      src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" />
    
  </div>
  );
}

export default App;

Answer 1

You cannot use jquery cdn directly inside the react js project. Rather you can go with the below plugin to use jquery inside your react js project,

https://www.npmjs.com/package/react-jquery-plugin

Just install it with below code,

npm install --save react-jquery-plugin