Bite-sized screencasts for React
and frontend developers

Video course: building a complete Rock Paper Scissors game with ReactJs

Please note that this tutorial is not intended to be a complete beginners React Js tutorial. However it contains very basics React concepts. The purpose of this tutorial is to see how the concepts of React work together to build a simple React JS application from scratch. At what could be more fun that making a simple game, like the one below:

video course build a game with React JS

Each of the following episodes will guide you through something else:

react js example - build a course with react

Part 1: project setup, basic React componets, inline styles

In this first part we will cover the basic project setup, meet the core components and use the inline styles to implement some of the features in our small game example.

react js example - build a course with react

Part 2: using setState, event handling and generating random symbols in React

In the second part of this tutorial we will see in action things like how to change the state of a component, will add images to our game and "teach" it how to draw some random symbols.

react js example - build a course with react

Part 3: simple animations by using setInterval and clearInterval in React JS

We will see in this final part of the series how to use React with setInterval to generate a basic animation and also how to end the running of a setInterval.