How to include plain JavaScript in a React app?

Question

I'm trying to create a React page which includes a p5 sketch, but doing so seems to require me to rewrite standard JavaScript I would normally run in a browser to make it work as a react component.

For example, I'd like to have React serve this code to the client:

function setup() {
    createCanvas(600, 600);
}

function draw() {
    background(0);
}

But I can't find a way to just have React give the client a JavaScript file. Instead I have to create a component like this:

export default function(p: p5) {

    p.setup = function setup() {
        p.createCanvas(600, 600);
    };

    p.draw = function draw() {
        p.background(0);
    };

}

This might seem trivial but if my team and I can include code that we've already written which works outside of react without having to rewrite everything would make things much easier.

One way to solve the problem is to just place the file in the public directory of React and just serve it statically along with index.html , but I'd prefer to only give the client the file when it needs it instead of just serving every file at once. If I could just have a component import the JavaScript file and send it like it can do with images, that would be exactly what I'm looking for.

Edit: Sorry, to clarify what I meant, Node is what's actually serving things, what I want is when React renders a page it will also run JavaScript code as if it were written in a <script> tag in the HTML page.

Answer 1

I've solved it. Essentially I put all of the code I want to run in a file like sketch.js but surround it in a function which is exported:

export default function Sketch() {
    function setup() {
        createCanvas(600, 600);
    }

    function draw() {
        background(0);
    }
}

Then in app.js you can do something like:

import Sketch from './sketch';
Sketch();

That will run all of the code in that function in the client's browser.

Answer 2

So just an option, we do this for optionally loading certain scripts on our app. In your component on the constructor (or maybe the willMount, play around with it) create a new script tag and append that script tag to the head of you app. This will cause the script to only be run when this component is rendered (Depending on where you called the function to add the script tag). You might also have to think about removing the script tag depending on what your doing, but you get the idea.

The function would look something like this:

addScriptTag = () => {
  script = document.createElement('script');
  script.src = [url/path of the javascript you want to server from your node server];
  // Or just set the javascript on the script tag by adding innerText and type arts
  document.head.appendChild(script)
}

then do something like:

constructor() {
  this.addScriptTag();
}