The inspiration for this tutorial (and many many rage quits)

Building a simple game with React (Part 1)

Hello guys and girls, in this three-part tutorial I am going to show you how to build a simple flappy bird clone using React JS and HTML canvas.

Setting up the environment

The first thing that you are going to need, apart from a code editor will be the node and the node package manager(npm) installed in your machine. This will allow you to run Javascript in your machine and do all sorts of wonky things using the thousands of packages npm offers. You can find instructions on how to install node here: https://nodejs.org/en/download/package-manager/

create-react-app

create-react-app is a utility that has been provided by the React developers in order to simplify the set up when, well…, creating a react app. Having npm installed, navigate to the folder where you want the app to live and create it using:

npx create-react-app flappy-ball

hot-reloading

One of the best things that have been done for us inside the create-react-app tool is hot reloading. For those of you unfamiliar with this term, it means that every time you save changes into your files, what you see in your browser gets reloaded almost instantly.

To experiment with this, before changing anything, we are going to run the default react…