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.