Using P5js with reactjs

Question

I want to use p5js with reactjs but how can render a canvas in the app component? can I copy this into the index.html file?

<meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
    <style> body {padding: 0; margin: 0;} </style>
<script src="../p5.min.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
<script src="sketch.js"></script>

Answer 1

You create your canvas in setup() (executed once by p5.js) and render (draw on) your canvas in draw() (p5.js executes this function at default 60fps)

html:

<script language="javascript" type="text/javascript" src="../p5.min.js"></script>
<script language="javascript" type="text/javascript" src="scetch.js"></script>

sketch.js:

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

function draw() // main loop
{
    background(0);
    circle(50, 50, 25);       
}