I decided to make a video tutorial to see in action how the basic concepts of React work together to build a simple React JS application from scratch. And to make it fun we will build a simple game, like the one below:
React Js — Simple Game tutorial
When starting with React or any other new framework or technology I always like to learn by doing stuff. By making some small apps that can be shown to a friend. Like a game, a contact list, a calculator or an interactive map.
And always try to split a bigger problem into smaller pieces. If you are a beginner it’s intimidating to think about the complete application. Our React JS game will need to display some basic layout, react to user input, draw random elements, do animations, decide who won … just to name a few things.
But what if, initially, we just have to show just a red circle and a blue one. This seems more doable. After this, just add a simple button that does nothing. With the button added let’s just make it show a basic alert when we press on it. And so on.
Think a bit … if we are asked to build a very simple one room small house. At least we know how to put together some bricks. This for sure sounds way more achievable that being asked to make a full skyscraper. It’s the same with programming. In every part of the tutorial, we will add a few more bricks to our project.
This React tutorial uses create-react-app and is made of 3 video screencasts:
Part 1 : project setup, basic React components and using React inline styles
We will start with the basic description of the starting Javascript files. By the end of this first part, our application will have a basic player card React component and will use the React inline styles to assign the blue & red colors to the player cards.
Part 2: generating random numbers in React, adding the background images and using setState
The next building blocks that we will add to our React example are the selection of some random elements and using the setState to update the component status. Also towards the end, we will use again the inline styles of React to add the background images.
Part 3: using setInterval with React to make animations and deciding the game winner
The last part is also the most complex one. We will see how to play with the old setInterval function from Javascript to build the shuffling animations and how to set the React state in order to show who won the game.
If you want to download the complete code for every part of the tutorial you can to it from here. Aso the tutorial is using create-react-app. If you need it you can find here a short tutorial on how to set it up.
Additional Exercises
So if you want to expand on this tutorial? You can try by adding new features like:
- setting names for the players
- making one player to be controlled by the human user and be able to select from the keyboard what symbol to play
- adding avatar pictures for the players
Interested in learning more about React and Javascript? Sign up for my email list so I can share with you the next screencasts and tutorials! Cheers and happy coding!