React component to animate planets on a canvas
You can do this, if it works... but it's not really using the React architecture or patterns.


Most of this code that is drawing should be in the render method.
You'll want to move some of the state (canvas, ctx, bgCanvas, bgCtx) into the class's state, or just as instance variables.
You can probably do most of the creation in the constructor, although doing it in componentDidMount will work.
You can integrate the animation with React, 
setInterval(() =&gt; this.forceUpdate(() =&gt; this.t += 0.05)). This makes sense in componentDidMount. You'll also want to turn this off in the unmount method.


EDIT/ADDED LATER

...maybe you just want to leave it the way it is, although it's quite non-React... it's working fine, though, and there aren't really problems...  

To make it "React" you're probably going to have to re-write it completely-- because just moving pieces around like I suggested may make you end up fighting the framework more than leveraging. Looking more, you'd probably make separate components for the different canvases and perhaps pass in t as a property, so there's a container component that functions as the "clock". Doing something like that would allow the regular React rendering mechanisms work.