# Sketch with classes implementation in a Reactjs project

**URL:** <https://discourse.processing.org/t/sketch-with-classes-implementation-in-a-reactjs-project/17358>\
**Category:** Project Guidance\
**Created:** [January 26, 2020, 8:47pm UTC](https://discourse.processing.org/t/sketch-with-classes-implementation-in-a-reactjs-project/17358 "2020-01-26T20:47:38Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 5, 2020, 4:33am UTC](https://discourse.processing.org/t/sketch-with-classes-implementation-in-a-reactjs-project/17358/5 "2020-02-05T04:33:38Z")

</div>

> [@nardove](#):
>
> If you make the Ball a class in a separate file that uses Matter.js to bounce around will mirror my situation exactly.

Well, it took a couple of days for me to learn enough Matter.js in order to change my “Bouncing Colorful Balls” sketch to rely on it instead for all movement & bouncing.

The file “sketch.mjs” can pass around both the World & p5 instance references to the files “ball.mjs” & “addCanvasWalls.mjs”!

Maybe you can find out a way to adapt the “technique” to your own React.js components.

Here’s the complete browser-runnable code:

> **[Matter Js Bouncing Colorful Balls](https://glitch.com/~matter-js-bouncing-colorful-balls)**
>
> Your very own basic web page, ready for you to customize.

And some extras which run 2 & 4 instances of it in the same page:

- [https://Matter-js-Bouncing-Colorful-Balls.Glitch.me/two.html](https://Matter-js-Bouncing-Colorful-Balls.Glitch.me/two.html)
- [https://Matter-js-Bouncing-Colorful-Balls.Glitch.me/four.html](https://Matter-js-Bouncing-Colorful-Balls.Glitch.me/four.html)

Notice that I use the extension “.mjs” instead of “.js” just to make it clear they’re true ES6 module files rather than plain vanilla script 1s.

---

_[View the full topic](https://discourse.processing.org/t/sketch-with-classes-implementation-in-a-reactjs-project/17358)._