Checkout my Getting Started with React video course on Skillshare. It is 100% free.

Build a game with React part 1 – project setup basic components 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.

This screencast is part of a three part course. You can visit the main page of the Building a complete Rock Paper Scissors game with ReactJs course or can go directly to specific chapter:

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.

Audio transcript

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:

react game tutorial

Geting started with the code samples and create-react-app

Usually a JS Craft Screencast will provide you with two downloadable code samples: the starting version of the code and the final version - how the code should look like at the end of the screencast.

If you never did it before, first we will need to install Node. For this head on to their website, then download and install Node. It’s a good idea to pick the Recommended For Most Users version, as it is the most stable one.

After the installation is done, you can test it out in your terminal by writing:

node -v  

With Node installed on our machine we can now download a code sample, unzip it and after that open a terminal window that points to the unarchived folder. In the terminal just run :

npm install

As a shorthand you can also run just npm i. You should now get a output similar to the one below:

What npm install will do is to look into the package.json file , see the list of libraries our project needs and install them. You will see that after the install command has finished we now have a folder called node_modules containing all the required libraries and Node packages.

If no other special instructions are provided in the tutorial, we can now just run our application by using:

npm start

And this should be all that's needed to start the React examples from our site.

Install create-react-app to start a project from scratch (optional)

Many of our React screencasts examples are made by using create-react-app. This part is needed only if you want to start your own projects from scratch.

There are several ways to initiate a React project. The approach in this tutorial is based on Create-React-App and is one of the fastest ways to get you up and running with React apps as it provides a very useful set of tools.

Please note that this article is not meant to be a complete guide about this wonderful tool of Create-React-App. Instead, my goal is to provide you with a very simple setup process to start from zero our own React apps.

The installation process is the same for Windows , Mac or Linux machines.

Please be sure you have Node installed. There are instructions for doing this in the first part of this tutorial.

Node comes with NPM, a tool that allows us to easy install libraries and packages. Such a package is Create-React-App. In order to install it, go into your terminal and run:

npm install -g create-react-app

On some older Windows machines you may need to close and reopen the terminal window after you have installed create-react-app.

The -g flag comes from -global, and indicates that this package should be installed globally. This means that we can now run it from any folder. In order to test it out we can write:

create-react-app my-first-react-app

This will create a new folder called my-first-react-app containing all the files for the app. We will move inside of this folder by typing:

cd my-first-react-app

And to have it running now just type:

npm start

You should now see something like the picture below:

You can now open this project in your code editor of choice and start to play with the code. Create-react-app comes with a auto-refresh feature that will update the page as soon as you change the code. By the way, the main app file is src/app.js (index.js is used only to render out the app).