How to build the Wordle game using React
Introduction
Do you remember Wordle? It became a viral sensation around 2021 and still has many regular players today. In the game, players are given six chances to identify a five-letter word. For each guess, players receive feedback in the shape of coloured tiles that show which letters match or are in the right place. In this blog we will build this game from scratch while refining our React skills.
Getting started
To set up the project run npm create vite@latest , npm install and start it using npm run dev and leave only App.jsx, index.css and main.jsx with the following code:
App.jsx Index.css
Main.jsx
Fetching the words
We will be using json-server to set up a local endpoint to serve the words. For a production app, you might want to setup an actual backend.
Make a db.json file in the data folder.
Install json-server using npm i json-server to fetch data inside React component. The json-server turns JSON data into API endpoints. Run json-server using the command json-server ./data/db.json — port 3001. It’ll provide the endpoint http://localhost:3001/solutions to access the data.
data/db.json
We’ll use the useEffect() hook to fetch data from json-server. Also, we need the useState() hook to store data from json-server. Now, the App.js file will look like this:
Make a custom Wordle hook
Create a useWordle.js file inside the src/hooks folder. Let’s add a skeleton logic in the useWordle.js file.
Tracking guesses
You need to track the guess while the user submits the word. For this, we’ll use an event listener for every key press. We will build a new component src/components/Wordle.jsx
For every key press, handleKeyup function will get fired. So, you need to make sure only English letters get tracked. Also, backspace will delete the last letter from the current guess.
We’re going to add UI in the Wordle component. So, we also need to update App component according to it.
src/hooks/useWordle.jsx
src/App.jsx
Submitting and formatting guesses
When a user submits the word by pressing Enter, we need to handle this word for further game logic. We’ll build the following logic:
- Only add a guess if the turn is less than five
- Don’t allow duplicate words
- Check word is five chars long
Format guess functionality will compare each letter against the solution word and apply colors accordingly.
src/hooks/useWordle.jsx
Also, you need to call formatGuess() inside handleKeyup() when the user presses Enter.
src/hooks/useWordle.jsx
Add new guesses
Now, you’ve done guess tracking, guess submitting, and guess formatting. You must add a formatted guess in the guesses array of the useState() hook. After that, we’ll print these guesses onto the Wordle grid. In the handleKeyup() method, we need to call addNewGuess() after formatGuess().
src/hook/useWordle.jsx in handleKeyUp()
We need a list of six guesses to print on the game grid. So, we’ve to set the guesses’ length to six in useWordle.js.
const [guesses, setGuesses] = useState([…Array(6)])
Let’s implement the addNewGuess() to update the guesses list for the Wordle grid.
src/hook/useWordle.jsx
Also, we need all these values inside the Wordle component.
src/Wordle.jsx
Making the game grid
Now, We’ve to display guesses on the Wordle grid. We’ll create a grid of six rows. Each row will consist of five squares for five letters. So, we’ll create two components, Grid and Row. Let’s create the Grid component first.
src/components/Grid.jsx
We must create a Row component for the Grid component.
src/components/Row.jsx
Let’s add styles in the index.css file for the Row Component.
Finally, add the Grid component to the Wordle component.
src/components/Wordle.jsx
Result so far:
Show the Past and Current Guesses
At the moment, no letter is displayed on the grid. We’ll display the guesses’ list on this grid. First, we’ll pass each guess to Row. All letters of guess will get displayed on row squares. Every square will have a background color according to the guess. Let’s pass a guess to each row inside the Grid component.
src/components/Grid.jsx
Also, we need to adjust the logic of the Row component for the guesses display. Now the row component will look like this.
Add the following styles for squares to the index.css file.
We’re displaying all the past guesses on the grid. We need to display the current guess while typing as well. In the Grid component, we want to pass the current guess to the Row component. So, the row with the current turn will display the current guess.
src/components/Grid.jsx
Now, update the logic of the Row component for the current guess. Also, extract the current guess as a prop in the Row component.
src/components/Row.jsx
Now, we can display the current guess and past guesses.
Tile Animations
There’re a few more things we need to do. First of all, we’ll handle animations for letters and words. We’ll do this through keyframe animations. Let’s add animations to the index.css file.
We also need to add a bounce effect to squares of the current guess. Let’s add this bounce animation to the index.css file.
Now, We’re done with the animations part as well.
Result so far:
Visual keyboard component
We’ve to build a little keypad to show the letters used and matched. It’s basically to visualize what letters we’ve used. Let’s first create letters data for the keypad.
Create a new file src/components/keys.js
src/components/keys.js
Now, we’ve to create a Keypad component. In a new file:
src/components/Keypad.jsx
Let’s add styles to index.css for the Keypad component.
Now, you need to add the Keypad component to the Wordle component.
src/components/Wordle.jsx
At the moment, the keypad’s not reflecting the keys used. We’ve to update it inside useWordle.js.
src/components/useWordle.jsx
Also, update the Wordle component.
src/components/Wordle.jsx
Now, handle the usedKeys prop inside the Keypad component and reflect used key colors on the keypad.
src/components/keypad.jsx
We must add styles to index.css for the Keypad component.
Now, we’re done with the Keypad component.
Result so far:
Endgame modal
Finally, we need to detect when to end the game. We’ve to handle two scenarios:
- When the user guesses correctly.
- When the user runs out of turns.
For this, we’ll add an event listener inside the useEffect() hook of Wordle component.
src/component/Wordle.jsx
Now, we’ve to make a modal appear on the screen when the game ends. Let’s create a Modal component.
src/components/Modal.jsx
Also, add styles to index.css for the Modal component.
We need to add the Modal component inside the Wordle component.
src/components/Wordle.jsx
Final Result
And thus, we have completed the wordle clone. This was a pretty good exercise for learning how to use events and custom hooks to implement our logic and organize our code.
Contributed by:
