Build Hangman game with React

Image for post
Image for post
Hangman

Welcome to a new React JS project, where we are going to build a Hangman app using React.

This project is based on the Vanilla JS project by Brad Traversy and the code for the same is here. We are basically going to convert it into a React project.

So, fire up your terminal and create a new react app hangman-react with the below command.

Image for post
Image for post
hangman

We will remove all the unnecessary boiler-plate code and our index.js will look like below.

Image for post
Image for post
index.js

And the App.js contains only Hello World text.

Image for post
Image for post
App.js

We will split our app into components now. So, inside the src folder create a folder called components and inside it create a file Header.js. Create a basic functional component and put the h1 and p in it.

Image for post
Image for post
Header.js

Now, create a file Figure.js inside the components folder and put the below content in it to show the image. The code for the same is taken from brad’s repo.

Image for post
Image for post
Figure.js

We will also paste to complete CSS from brad’s repo in our App.css file.

Image for post
Image for post
App.css

Now, in our App.js file we will include both Header and the Figure component.

Image for post
Image for post
App.js

Now, in our localhost we can see the below.

localhost

We need some more components in the components folder, so we are creating the same from the Integrated Terminal.

Image for post
Image for post
Integrated Terminal

Next, we will create the WrongLetters.js file and put the basic html structure in it now.

Image for post
Image for post
WrongLetters.js

Next, we will create the Word.js file and put the basic html structure in it now.

Image for post
Image for post
Word.js

Next, we will create the Popup.js file and put the basic html structure in it now.

Image for post
Image for post
Popup.js

Next, we will create the Notification.js file and put the basic html structure in it now.

Image for post
Image for post
Notification.js

Now, we will include these components in our App.js file.

Image for post
Image for post
App.js

Next, we will add a variable for words and selectedWord. We will also create state for playable, correctLetters and wrongLetters in App.js file.

Image for post
Image for post
App.js

We will first write the logic for Word.js to show the words. We are getting the selectedWord, correctLetters as props. After that we are splitting the selectedWord and looping through it to show it.

Image for post
Image for post
Word.js

Now, in App.js we will pass these props and we will see blank words as nothing matches with correctLetters.

Image for post
Image for post
App.js

Next, we will create the component to show the Wrong letters in WrongLetter.js. Here, we are just mapping through the wrongLetters props and showing each letter followed by a comma.

Image for post
Image for post
WrongLetter.js

We will also pass the props from App.js file.

Image for post
Image for post
App.js

Now, we will add the event listener to listen for the keypress. Here, we are first taking the pressed key and after that checking whether it is in the selectedWord. After that we are setting the correct letters or the wrong letters accordingly.

The useEffect, we are firing only if correctLetters, wrongLetters, playable changes.

Image for post
Image for post
App.js

Now, when we go to localhost and press a wrong letter, the wrong will be filled and if right letter then the right letter will be filled.

Image for post
Image for post
localhost

Now, we will add the logic to show the part of image as we enter wrong letter. In Figure.js we will check wrongLetters.length and depending on it will show the part of image.

Image for post
Image for post
Figure.js

So, now when we enter the wrong letter the hangman will start appearing.

Image for post
Image for post
App.js

Now, we will work on the notification, if we enter a letter multiple time. For this we will take help from a helper function. So, create a file Helpers.js inside the components folder and add the below content in it.

Image for post
Image for post
Helpers.js

Now, we will use this

Image for post
Image for post
App.js

We will also pass the in showNotification as props in App.js file.

Image for post
Image for post
App.js

Next, we will use this prop in Notification.js file and add a show class if it is there.

Image for post
Image for post
Notification.js

Now, in our localhost the notification will be shown.

Image for post
Image for post
Notification

Now, we will add the logic to show different message based on whether we won or loss. For this we will send the below props in Popup component in App.js file.

Image for post
Image for post
App.js

Before using these props, we will create a helper function to check whether we won or lost.

Image for post
Image for post
Helpers.js

Now, we will update the logic in Popup.js. Here, we will be using the checkWin() to check whether the player won or lost and display the pop-up.

Image for post
Image for post
Popup.js

Now, we have to add the logic for Play Again. For this we will pass a playAgain function in props and call it on click of the button in Popup.js file.

Image for post
Image for post
Popup.js

Back in App.js we will create the function by empty the setCorrectLetters and setWrongLetters. After that we generate a random word again.

Image for post
Image for post
App.js

Our App is fully functional now and is re-playable. You can find code for the same in this github repo.

Image for post
Image for post
Playable

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store