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.
- Part 1: project setup, basic React componets, inline styles
- Part 2: using setState, event handling and generating random symbols in React
- Part 3: simple animations by using setInterval and clearInterval in React JS
These examples are created by using create-react-app. You can check here a short guide on how to setup your machine to run the code samples.
Hello and welcome! My name is Daniel and I will be you instructor for this practical React JS example. Our scope for this tutorial will be to build this very simple game of rock paper scissors.
In this game we have two players. The red one and the blue one. When we press the Run game button, our game will show a shuffling animation and randomly select one of the three available elements. Based on what was selected for each player, our application will decide which of the players is the winner.
So let’s get to work then. In the starting template of this project I will run npm install. If you have not done it before, you can see in the links for this episode a guide on how to setup your environment. After the npm install is complete we can type npm start … and voila ! We should now have our application up and running.
Let’s take a look at what we currently have into the starting code: first a index.js file which only renders our application. Along side with it we have this app.css file that contains the styles for our application. Now, given the fact that this is a React JS course, we will not discuss too much about how the CSS styles where build. Only when needed we will just detail the css parts that are important for our application.
The most important part is, this app.js file that will serve as the entry point for our app. For now it only renders out a simple React component that has an empty div.
The first thing that we are gone to tackle is the creation of these two player cards. If we think a bit about them they are stateless components that are dependen on two properties: the color of the player and the symbol.
With this in mind I will go back into the code and create a new stateless component. This stateless component will be named player card. Initially our player card will be just an empty div with a className set to player-card.
This className is already defined in the app.css and ensures the basic rendering of our cards. With this stateless component created, now I can go back into the render method and in here add two new components of type player card.
And now, after we save and the page refreshes you can see on the right side the new created components.
As we said earlier our player cards are depended on two properties. They are depending on color and also on the symbol. With the new declared properties I will set the color for the first card to red and it’s symbol to paper. And for the second one I will set the color to blue and the symbol to rock.
Just to ensure that everything is ok I go back in the player card component and in here will display the symbol property. After we save we can see now the our components also have the given symbols.
You maybe are wondering why the second component has it’s text written upside down. Well this is because inside de app css we have a special rule defined for the second element with the class PlayerCard.
If we go back at our final example , each of these cards should be colored in the corresponding color. This is a great opportunity to use the inline styles of react.
For for this I will go and create a new object called style and inside it I will set the background the be equal with what we receive from the color parameter. Finally, in the returned statement of the render method I will assign the style of the div to be equal with this style object we have just created.
So, after the save you can now see that we have one card colored to red and the other one to blue.
By the end of the tutorial we will build something like this: