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.

hangman

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

index.js

And the App.js contains only Hello World text.

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.

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.

Figure.js

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

App.css

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

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.

Integrated Terminal

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

WrongLetters.js

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

Word.js

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

Popup.js

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

Notification.js

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

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.

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.

Word.js

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

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.

WrongLetter.js

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

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.

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.

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.

Figure.js

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

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.

Helpers.js

Now, we will use this

App.js

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

App.js

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

Notification.js

Now, in our localhost the notification will be shown.

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.

App.js

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

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.

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.

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.

App.js

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

Playable