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:
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:
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.
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.
So if you want to expand on this tutorial? You can try by adding new features like:
Cheers and happy coding!
Create your free account to unlock your custom reading experience.