Make a Wordle Clone with React #1 - Introduction & Setup

Key Takeaways

hey there gang and in this series i'm going to show you how to make the popular word or game with react [Music] all right then gang so in this series i'm going to teach you how to make this game wordle from scratch using react now if you don't know what wordle is then i guess you've either been living under a rock for the last six months or really struggling with your internet connection because it's been an online craze for a really long time now and basically you have to get a five letter word by typing on your keyboard and as you do that your guess appears on the screen and if you press enter then it's gonna submit that guess and check it and it's gonna colorize the letters of your guess so the letter becomes green if it's in the correct position in the solution yellow if the letter is in the solution but not in the right position and gray if the letter isn't in the solution word at all and then we can have another guess on the next row using the information we just cleaned from the previous try and also that information is mirrored down here on a keypad so that we can see at a glance which letters we've already tried and again each letter we found to be in the correct position of the solution at some point or other is colored green each letter we know to be in the solution but we've not yet found the correct position of is coloured yellow and any letter we've tried but isn't in the solution at all is coloured gray so this is all the same kind of information that we get up here in our attempts but it's just displayed in a different way and that really helps when you're making more guesses in the future all right so just for fun i'm going to carry this game on and try and figure this out so we know that a is right here and t is in the word somewhere but it's not here and it's not here so it's going to be one of these two so i'm going to try steel even though i know e is not in the word at all i just want to use this word to try and find out where t is and also if s and l are in the word as well so let me press enter all right that's interesting so t isn't here so we know t has to go here and l is here so it ends in t-a-l so could it be petal it can't be petal because the e is not in it i'm going to try petal just to see if p is in it anywhere no um so what can we have o u we could have a again because even though a's been colored green it doesn't mean there can't be another a anywhere else i'm going to try fatal press enter no okay so it's not fatal what else could it be um i'm gonna try natal oh there we go cool natal awesome so it took me all the guesses but i did get it awesome so this is essentially what we're going to make ourselves from scratch using react and the end product is going to look something like this and this version that we're going to make contains all the same game logic all the same kinds of animations the keypad at the bottom which colors the letters is the same etc but there are going to be some small differences as well mainly when you refresh this page it's going to give you an entirely different solution to try and guess whereas on the official word or site you only get one guess per day you can't refresh the page to get a new one and also on the official wordle you can click the letters of the keypad to enter them into the squares but in our version we're just going to stick with typing the letters instead and that's going to keep the series a little bit short and snappier but you can always add that functionality in your cells at the end if you wanted to all right so again just for fun i want to go through this and try and find the correct solution so we know a is in the correct position e is somewhere but not here i'm going to try putting the the end so i'm going to do something like i don't know brave like so and pressing enter okay so we know b a and e are in the correct position now i'm at an advantage because i created all the solution words so i think i know this and it's blame so if i press enter yep it is the correct word awesome and then when we win we see you win in a model the solution word and how long it took us to get that word now i just want to show you what happens quickly if we refresh we get a different word and i want to show you what happens if we get the word incorrect so let me just type in hello right here okay none of those are in there let's type in a load of junk oh by the way if we try to add in the same word twice press enter it's not letting me do that so that's another feature and it's the same for the official wordle game as well we can't add the same word twice anyway let's carry on with this add in a load of random letters look we've got no matches here this is crazy okay one match all right so if we don't get it right we still get the pop-up right here it says never mind this time and then the word ninja which is pretty cool because this is the net ninja and then better luck next time awesome so this is the game that we are going to create now before you go any further with this series i would strongly recommend that you have at least a basic understanding of react because that's what we're going to use to create this wordle application so i am going to assume at least a basic level of react comprehension i'd also recommend that you're comfortable with javascript and add a push a little bit of css as well because quite frankly if you don't know css and you're trying to build a game like this then it's going to look pants and no one's going to want to play it all right and i've got all of those courses i've got a course for react javascript and css so i'll leave links to all of those down below the video and you can check those out first of all and one more thing you might have noticed i've called this lingo in brackets as well and that's just a little nod to a game show called lingo that we have here in the uk which is essentially wordle but in a game show format so i wanted to give a little nod to that as well so to get us started i've created a starter react project which you can get from this github repo right here react wordle and i'll leave a link to this repo down below the video so all you need to do is just select the lesson one branch from this repo which is a basic pretty empty react project and to download it just hit the green code button and then choose to download a zip folder of the project incidentally this repo also contains the course files for every single lesson in this series so if you want to see or download the code for a specific lesson you can do just select that lesson branch from the branch drop down hit the green code button and then download a zip folder of that particular lesson all right so once you've downloaded that zip folder we want to unzip or extract everything from within it so do that first of all and then we can delete that folder and then if we open this up we should see another folder called react wordle lesson one if we double click into that we can see this is all of the source code right here so this is the project folder and i'm just going to rename that to react wordle like so and i'm going to open this up in vs code by right clicking and then going to open with code and then that's popped up on the other screen this is our starter project so i just want to quickly walk you through this project if we open up the public folder we can see we have all the public files including the index file this is what gets served to the browser not added anything there if we open the source folder we have the app.js file right here this is the root component and we import the app.css and in fact to be honest we don't even need this css file so we can go ahead and delete that file and inside the app component we can delete that import as well because we're not going to use it all of our css is going to go inside the index.css file anyway this root component dead simple just to div with a class of app and then inside that an h1 that says wordall and then in brackets lingo so that's all of the template and that's the only component we have at the minute now the index.css has a few styles for the body right here and a few styles for the h1 and that's all there is to it as well so like i said all of our styles are going to go inside here and then finally inside index.js we can see right here we import what we need at the top and that includes this index.css file and the root component and we render our application right here to the dom okay so if we also look in package.json and if we scroll down we can see we have all of the dependencies right here etc all of these scripts and we're going to use one of these scripts now to start the application so we can preview it in a browser so what i'm going to do is open up the terminal and down here i'm going to say npm run start which is this script right here and that's going to spin up a local development server so we can preview this in a browser and obviously that didn't work because we need to run npm install first of all because we don't have the node modules folder and the node modules folder is going to include all of these dependencies right here so we need to run npm install before we try to start the application and then once that's all installed we can run npm run start again to spin up that local development server and then that should open this up in a browser which we can see right here so this is the starter application now before we move on to the next lesson and start coding anything up i just want to go over a few notes that i've made right here in the rootapp.js component and these notes basically explain the different data that we need to track for this application and also the process of the game itself and i want to go over this so that we have this kind of overview or end goal in the mind and we know where we're heading towards because that makes actually coding the application a bit easier so first of all the data we need to track well we need to track or we need data for the solution the solution word and that word is going to be a five letter string for example drain or brave or something else so we need a bunch of words and we need a data source for those words and we're actually going to talk about that in the next lesson we also need to keep track of the users past guesses so every time you use a type something into the grid and then hit enter then that becomes a guess right that word and we need to track those past guesses so this is going to be an array of past guesses each past guess is going to be an array of letter objects right so this would be a guess right here and each of these objects would essentially be a letter all right i'll represent a letter so each object represents a letter in the guesswork and each object looks like this you see we have a letter property or in fact this is probably going to be called key and that would be a b c or something else and then the color of that as well so how should it be colored on the grid should it be yellow if there's a partial match green if it's an exact match or gray if there's no match etc so this is what our data for the past guesses is going to look like and that's going to make it really easy to colorize our different words on the grid we also need to track the current guess so that's the thing that the user is currently typing in to the row okay so that's going to be a string and it can be any length between zero if they've not typed anything yet or five characters okay which is the maximum length of the string we're also going to keep track of the keypad letters so you know i showed you before we had a keypad at the bottom of the grid and that displays all the letters that we can use and when we've used a specific letter then it's going to colorize that and that could be either green yellow or gray again pretty much the same as this thing up here where we have colorized letters in the word we're going to have the same kind of thing for our different which is at the bottom the keypad if you like okay and we also need to keep track of the number of turns and that's just going to be an integer between 0 and 6. so every time we submit new guess it's going to go up one turn so that's kind of the data we need to track now down here we have these notes on the game process so this is how the game works and i've just put this here so we can kind of refer to it if we need to when we're writing the code so first of all we're entering words into the grid right that's the first kind of step of the game and a user is going to enter a letter and a square then is filled with that letter in a row so when a user hits delete it deletes the previous letter right and when you use hit enter it submits the word now if all squares are not filled with letters then the word is not submitted and if that word has already been used in a previous guess then the word is not submitted as well so these are two conditions whereby we can't submit the word so once we've submitted a word we need to check them now each letter is going to be checked to see if it matches to a letter in the solution and then based on that check each letter is assigned a color based on its inclusion in the solution so exact matches are where we have the correct position in the solution for the guest letter and their colored green partial matches are where the letter is in the solution but it's not in the correct position and they're colored yellow and we have none matches those not in the solution at all and those letters are colored gray so after we've done this check and we've kind of formatted that guess to give each letter of color it's going to be added to the grid with those correct colors and then the current guess is going to move on to the next row down all right and also after the move the keypad letters are going to be updated as well in terms of their color all right so that's the process each move if you like each turn and then after we've had a few turns we need to end the game and that happens when the guest word fully matches the solution and we get a modal to say well done or when the user runs out of guesses and in that case we're going to get a modal to say unlucky so i thought i'd just put these comments right here so we can refer to them go through them now so we've got this general idea of where we're kind of going towards and also so we can refer to them as we go forward and like i said we're going to look at how we can get the solution data all the different words in the next lesson by the way if you want to watch this entire course now without youtube adverts you can do it's all up on the net ninja website netninja.dev you can buy the course for two dollars to get instant access to all of it or you can sign up to net ninja pro and get instant access to all of my courses without adverts as well as premium courses not found on youtube including my udemy ones that's nine dollars a month and you can get your first month half price when you use this promo code right here so i'm gonna leave this link down below in the video description for you to sign up and i really hope you enjoy this series and please do not forget to share subscribe and like the videos that really helps a lot and i'm gonna see you in the very next lesson [Music]