How to add/mix Vanilla Javascript with ReactJS

I'm new to React. At the moment I manage to update my simple website from standard HTML, CSS, JS to React, SASS, JSX and so on. The problem I have is that there is a canvas tag where I run an animation made in Vanilla Javascript using the Paperjs library, but I have not idea on how to implement my current JS animation to my React project.

This is what I have in my body tag:

<canvas id='paperjs-canvas' resize></canvas>
<script src="js/libs/paper-full.min.js"></script>
<script src="js/jellies/jelly.min.js"></script>
<script src="js/jellies/tentacle.min.js"></script>
<script src="js/jellies/paper-jellies.min.js"></script>

This is just a simple background animation, there is no interaction with DOM elements.

I wander if it would be possible to implement my current code in to React as is, and if so, how?

Any help will be much appreciated.

Solution

React needs to be in full control of its DOM branch (usually a <div id="root"/> under <body>).

As long as you put the <canvas /> outside of the React's DOM branch, you won't have any problem with it.

Example:

<html>
  <head>...</head>
  <body>
    <div id="root"></div> <!-- React branch -->
    <canvas id="paperjs-canvas" resize></canvas> <!-- Here you are in control -->
    ...
  </body>
</html>