Adding external javascript script to React-CodePudding

I'd like to include & run some js file in the React using Helmet component. Here is the simple code:

index.js:

import React from "react";
import ReactDOM from "react-dom";
import { Helmet } from "react-helmet";

import "./styles.css";

function App() {
  console.log("op");

  return (
    <div className="App">
      <Helmet>
        <script src="hello.js" type="text/jsx" />
      </Helmet>
      <h1>Hellok CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

and ultra simple js script to include & run:

hello.js:

console.log("opl882...")
document.body.style.backgroundColor = "red";

But the script seems NOT to work! - i have no console output and/or background color changed. What's odd when I use the js code as an inline code like:

 <Helmet>
   <script type="text/javascript">
     console.log("opl882..."); document.body.style.backgroundColor = "red"
   </script>
 </Helmet>

it works!

Why doesn't the external js file work?

CodePudding user response：

I usually do not implement .js files in react using a script tag. Instead you should import it at the top like this (assuming './hello.js' is the route to the file):

import './hello.js'

That file must also be located inside the src folder.