Skip to content

How to use script tags in React?

I am pretty new to React and I wanted to try incorporating some pure Javascript in my React component. I have an html file of the script tags that I want to use which works, but obviously in React it is a little more complicated then just adding some script tags. From what I have been reading, it seems like I need to learn JSX. Either which way, here are snippets of the html code I want to use and then the React component I am trying to use it in. Any help would be appreciated, thanks y’all.

HTML working code:

<!-- grabs foo element (list itself) and sets a timeout of 1 second so we 
can toggle off the hidden text class -->

    const text = document.querySelector("#foo");
    setTimeout(() => {
    }, 1000);

React Component:

import React from 'react';
import { Link } from 'react-router-dom';
import './HeroSec.css';``

/* Need to figure out how to use Javascript tags in React Component

const Hello = () => {
    return React.createElement(

function HeroSec(){
    <div className='hero-container'>


The React Way

“I’m telling you Neo, when you use React properly, you won’t have to.” see code live here

import { useEffect, setState } from 'react';

const App = () => {
  const [show, setShow] = useState(false);
  useEffect(() => {
    setTimeout(() => {
    }, 1000);
  }, []);

  return (
      <h1>My App</h1>
      {show ? <p>Hidden Text</p> : null}

So the idea is you focus on changing the logic of a single render pass rather than changing the particular DOM element. Focus on variable state and stop worrying about messing with DOM particulars. Calling setShow(true) tells react to re-render the scene automatically.

I personally love these quick setup projects at and encourage you to give it a try and avoid having to worry about setup to get comfortable first.

Here’s that example below and feel free to play with it.