I know the title may be confusing to you. Because some of you may not understand the word Remember. We will discuss this later. I’m building this Remember the Word game to teach the process of building a simple React application. We also use the concept of contextual API in our React application.

Condition

In this article, we are going to talk about React, Material UI and JavaScript code. So the reader must have a basic idea of all this. Read the official React.js documentation and the official Material UI page to understand it better.

What we learn

After completing this lesson, we know:-

  • To make a draft answer.
  • Create custom components
  • Using the hardware interface in our project
  • Using the contextual API for status management.

What does the word memorize mean?

Before we start coding the application, let’s discuss what we are actually building. Memory Game is a simple game application that will help you increase your memory capacity. A list of different words appears on the screen. Think of him and his position. Answer the question in the next step.

We can look at the steps required to play this game.

  • On the first level, we can choose the difficulty of the game between Easy, Medium, Difficult and Very Difficult. As the level of difficulty increases, so does the number of words that must be enumerated in the second step.
  • In the next step we see the number of words and their position number. Learn the words and their positions by heart and click on Start Game.
  • In the third step, we see the question: Which word is at position x? Enter the word in the input field below. It is displayed if the answer is correct.
  • We have a chance to try the game again.

A demonstration and workflow of the application is shown below.

https://memorizeword.nilav.in/

Make a word memory game with response

So we’ve discussed the Memorize word game and now we’re going to start building this game app with React.

For better understanding, I give the file structure of the application.

1. Creating a new reaction project

The first step is to configure the React application on your system. This can easily be done with the NPX tool.

So, first install Node.js on your system and create a responsive application using NPX. Don’t worry about the term NPX, as it is a tool that comes with NPM (Node Package Manager) 5.2+ and installs Node.js itself on your system.

If you need help installing React on your system, use the links below.

Installing React on Windows, Ubuntu and MacOS

npx word for create-response-application-remember-in-response

This command creates a reactive application with the project name reactive-memory-word

Now go to the project directory and start the application.

Response CD Random Quotes
Start in a Minute

In the browser window, the React application we created opens with the address https://localhost:3000. The port may be different if 3000 is busy.

We can now use our favorite code editor to modify our project. Personally, I recommend Visual Studio Code.

2. Define and customize user interface hardware

In the previous articles, we used Bootstrap to create a React application style. In this article, however, we will use a tangible user interface. So install the hardware interface components with NPM.

npm i @material-ui/core
npm i @material-ui/lab
npm i @material-ui/icons

3. Create a header component to display the name of the game

We can code a simple Header.jsx component to display the name of the game Remember the Word.

The code for the Header component looks like this.

4. Difficulty selecting component

On the first screen of our application, we choose the difficulty level between Easy, Medium, Difficult, Very Difficult. So we want to code it in the SelectDifficulty.jsx component.

When each option is selected, the generateRandomWords function is called, passed through the contextual API.

This function generates random words according to the given difficulty level.

5. Write down the words

We now need a WordList.jsx component to create a list of the generated words.

The words are generated using the generateRandomWords() function of the App.js component.

It is passed to the WordList component via the Context API.

This component has another Start Game button that generates a question with a random position in the word list.

6. Part of question

After you click Start Game, another section appears with a question. We can call this a Question.jsx component.

This section contains a question in a format such as. B. Which word is in position x?

The value x is passed on by the application.

An input field is also displayed for entering a word or answer. This information is also transmitted to the application component for further processing.

7. Results module for the display of results

We can now code a simple result component that displays the image and message that match the answer.

If the answer is correct, Dolphin will display it. On the other hand, the movie Finding Nemo shows the image of a character with a short memory.

8. Creating a context

Create a file named AppContext.jsx in the src directory. From there, export a context called AppContext using the createContext API.

9. Application part code

In this application, all logical operations are defined in the App.js component and passed to other components via the contextual API.

First we import the AppContext component and all other components into the App component.

Then we need two packets of random words and a random number.

  • Random word stack – Creates a series of random words.
  • Random Number Pack – Generates random numbers.

9.1 Random word generation function

In the application component, we need the generateRandomWords() function to generate random words. The number of words generated is determined by the complexity of the function to be passed.

let createRandomWords = (selectedDifficulty) => {
let numberOfWords =
selectedDifficulty == easy
?
: selectedDifficulty == medium
? 3
: selectedDifficulty == difficult
? 5
: selectedDifficulty == verydifficult
? 10
: null ;
let generatedRandomWords = randomWords(numberOfWords) ;
console.log(generatedRandomWords) ;
setRandomWordsToShow(generatedRandomWords) ;
generateRandomPosition(generatedRandomWords) ;
}

9.2 Random position generation function

Since random words are generated, random positions are also generated. This position is used in the question.

let createRandomPosition = (generatedRandomWords) => {
let maxPosition = generatedRandomWords.length;
let randomWordPosition = rn({
min : 1,
max : maxPosition,
integer : true,
});
setRandomPosition(randomWordPosition);
}

9.3 Sentence answer function

This function determines whether the given answer is true or false.

let submitAnswer = (e) => {
e.preventDefault();
console.log(typedWord, randomWordsToShow, randomPosition);
if (typedWord == randomWordsToShow[randomPosition – 1]) {
setTrueOrFalse(true);
} else {
setTrueOrFalse(false);
}
setAnswered(true);
}

9.5 Pack the entire application into an AppContext.Provider component.

Since we are using the Context API in our application, we need to package the entire application in an AppContext.Provider component.

All reports and functions declared and defined in the application component are passed to this provider.

 

9.6 Definition of display components

We can now code the rendering components in the AppContext.Provider component. Each component switches according to the change of state.

{randomWordsToShow.length !== 0 ? (
startGame ? (
answered ?

) : (

)
) : (

)
) : (

)}

Coding record

You can view the application live via the CodeSandbox link.

GitHub

You can always go to the GitHub repository to clone this project.

https://github.com/syamjayaraj/react-memorize-word

Summary

Here we have covered the steps to create an eye-catching word game app using React. In addition to building the application, I focused on learning how to use the Context API and Material UI in a Reaction application.

Dim:

How do you load…

You might like this.

multi page react app examplereact memory gamereact-memory-game githubmemory game react hooksreact word gamereact games,People also search for,Privacy settings,How Search works,multi page react app example,react memory game,react-memory-game github,memory game react hooks,react word game,react games,react native-memory game,create-react app multiple pages

You May Also Like

🥇 +10 Websites to See Complete Novels Online  List ▷ 2021

As online television has become increasingly important, most people have chosen to…

🥇 Login to Facebook Live  Step by Step Guide ▷ 2021

Live streaming has become a popular way to connect with viewers and…

Fix: Personal Hotspot not working on iPhone

Using your device’s mobile data as a hotspot for multiple other devices…

🥇 Add Reminders in Slack  Step by Step Guide ▷ 2020

This instant messaging application has become one of the best options for…