Ever wondered how the classic snake game can be built? Wonder no more! In this tutorial, I will show you how to do it. I’m using the popular library React.js for this one.


Concept :

I declared a state (snakeDots) that contains arrays, each array represents margin-top and margin-left of each <div>,
for example [0,0], [0,2]:
-> 1st tab: the first 0 is the margin-left, and the second 0 is the margin-top
-> 2nd tab: the 0 is the margin-left, and the 2 is the margin-top

1 : JavaScript libraries to draw your own diagrams :

1–1 : JavaScript libraries for drawing UML (or BPMN or ERD …) diagrams :

. JointJS
. Rappid
. MxGraph
. GoJS
. jsUML2 library
. Mindfusion Diagram Library
. Nomnoml
. Mermaid.js
. Diagram.js
. State.js

We will cover extensively GoJS in this post. 😉

2 : Why GoJS ?

GoJS is a feature-rich JavaScript library for implementing interactive diagrams across modern browsers and platforms.
GoJS makes constructing diagrams of complex Nodes, Links, and Groups easy with customizable templates and layouts.

GoJS offers many advanced features for user interactivity such as drag-and-drop, copy-and-paste, transactional state and undo management, palettes, overviews, data-bound models, event handlers, and an extensible tool system for custom operations. They provide over 150 interactive samples…


1: Wait, what’s a HOC?

A HOC — or a higher-order component — is a function that accepts a component,
and returns a component that renders the passed component with a few extra props or capabilities.
The React docs does a great job explaining them in more detail.

1–1: an example with class components, you can write a wrapper simple HOC :

1–2: if we want to define many HOCs we get :


it’s badly seen but No worries, compose to the rescue :

this generates a hierarchy such that :

2: How to move from HOC to hooks :

2–1: why hooks?

Hooks are here to stay, and they’re about to simplify your codebase in a big way.

2–2–1: first example :

on this example we’ll move from component(HOC): ‘withScreenSize’, to component(hooks): ‘useScreenSize’

component(HOC): ‘withScreenSize’ :

component(hooks): ‘useScreenSize’ :

2–2–2: The second example of usage with hooks :

Issam Eddine Bouhoush

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store