How to Make Typing Game in React

In this article, we will create a typing game in react. This typing game will be usual like other typing game where we can get accuracy and word per minute as results. Here we will have a timer, then a paragraph and lastly an input field for user input. Timer and paragraph will be started as soon start button gets clicked, timer will be of 60 seconds, then user will be able to write in input field. And as soon the timer runs out then accuracy and wpm will be appeared as result.

So basically this is going to be a beginner-friendly project, so let’s make this project step-by-step.

Pre-requisites to Make Typing Game in React

• Basic knowledge of ReactJS.
• Basic knowledge of React hooks.
• Basic knowledge of React props.
• Good knowledge of React Components.

Building An User Interface

Now let’s create a basic UI for our project, for that we will move to App.js. Here, we have imported useState, useEffect and useRef hooks which are going to be helpful throughout the project. Then we also imported the random-words package, which is going to be used to generate random words. Now we have declared constants for number of words of 400, and seconds to 60.

Then we have created state for words, and then we created useEffect hook where we have set the words state where we will get words from generateWords() function. In this function, we’re just returning an array of words using this line of code return new Array(NUMB_OF_WORDS).fill(null).map(() => randomWords()).

Now in return() statement, we have added a heading tag for timer, then we have added an input field, a button and after that we have words.map((word, i) => () to added spacing between the letters.
Read More