This Is A Great Beginner React/TypeScript Project

FREE React Hooks Course: courses.webdevsimplified.com/...
Hangman is the perfect beginner React project since it is easy enough logic-wise, but still includes many complicated problems to solve. In this video I will show you how I would create a hangman game in React.
📚 Materials/References:
FREE React Hooks Course: courses.webdevsimplified.com/...
GitHub Code: github.com/WebDevSimplified/r...
Regular Expression Video: • Learn Regular Expressi...
Array Methods Video: • 8 Must Know JavaScript...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:27 - Demo/Setup
01:48 - Planning
05:00 - HTML/JSX
26:12 - Drawing Component Logic
28:55 - Word Component Logic
30:03 - Keyboard Logic
38:25 - Win/Lose Logic
#React #WDS #TypeScript

[@tonyg_nerd]

Kyle - you're always well-prepared, thorough, competent, and professional. I thank you for your generosity in providing all of these top-quality vids.

[@welcomeJava]

this channel seems always provides what I need for now. Amazing ! And your way of teaching and spreading knowledge is great. Thank you always.

[@lowrimordecai6822]

This was great, thank you so much! I had to go back and pause A LOT but I learnt a lot from this and it was also quite fun to build a game to interact with!

[@muhammadnishad.p.n1170]

Incredible. Your video about sql really helped me in my interview 🎉

[@SyntaxErrorB]

I have no intention of ever doing this or Web dev, but your videos are very relaxing and good to fall asleep to. It doesn't sound like a compliment but trust me it is

[@Akz666]

😁😂🙃😉

[@daniels.609]

It's nice to see I'm not the only weirdo who likes to have different genres of KZbin videos playing in the background while falling asleep in the afternoon.😂

[@l.seciltuncay7921]

The only one I listen to at 0.50 speed :) thanks for great tutorial.🤙

[@paulthomas1052]

Another great React/Typescript tutorial. Thanks !

[@bananamilk4016]

Love this tutorial! Thanks Kyle :D

[@pablotexeira7579]

This is a masterpiece!!! thanks Kyle

[@lokeshnegi5051]

Learnt a lot of new things thank u so much kyle.

[@niklassoderberg2168]

Thanks for a really well done video.

[@nicmackenzie]

No WORDS to express my gratitude for this video. 😁😁😁😁

[@regilearn2138]

❤❤❤ NEED more TYPESCRIPT + REACT + REDUX + MERN projects ❤❤❤

[@rodrigolaporte274]

This is very interesting! THANKS!

[@alexanderst.7993]

I don't even do web dev but i still find your videos incredibly interesting

[@Oncopoda]

What do you do?

[@alexanderst.7993]

@@Oncopoda game dev

[@Oncopoda]

@@alexanderst.7993 Dope

[@alexandra_b]

I don't use TypeScript, but with a bit of effort I transformed this amazing project into React + JS ☺ Thanks a lot!

[@alesholman801]

Why would you downgrade it like that ?

[@ashwinsuryawanshi]

That's actually escaping the effort. 😄

[@instantrecaps1764]

Huge love man .... Thankyou .

[@codingwithjaybird]

Great video as always! 😊

[@shjz2908]

This is a awesome Project for React JS developers i am also finding this type of project for my resume ❤ so i found at this channel ❤ love from Pakistan 🇵🇰 😘

[@appuser]

Awesome, thanks so much for another epic free tutorial @WebDevSimplified, that was fun. I followed along and used Tailwind CSS for the styling for practice.

[@simonshurety3870]

Care to share? I've never used Tailwind before.

[@appuser]

@@simonshurety3870 As an example `const BODY = ( )`

[@partialdata]

Thank you! More content like this please TS and React!

[@gardendado1999]

It's actually incredible how typescript can be so short but my head spins every time you call a method or make functions return custom types

[@New-dj9rz]

Thank for great tutorial.

[@Sweatshirtshoot]

Honestly was more impressed with this guy pure CSS... holy cow ! Keep going please

[@Ryan-zv6yl]

awesome video. it was today that i realized im not even close to being a begining with react and typescript....

[@FunctionGermany]

wouldn't it be simpler to fix the useeffect scope capture issue by moving the "guessedletters includes" logic inside the "setGuessedLetters" callback since you're always getting the most recent state inside it? you wouldn't have to use useCallback and also woulnd't have to add guessedLetters as a dependency to useEffect. (i might be wrong though)

[@yassinesafraoui]

another greaat project which is quite intermediate is building a chess game, there are some channels that did it so if you want more of this look it up :)

[@andersonalmeydat7715]

new sub ty from Peru

[@elin9367]

What is the convention when it comes to css? I usually move my css into seperate files, but here you put a lot of styles directly on the divs and so on. Just want to learn more

[@lilb07]

Is there a video about setting up environments/dependencies and vscode (and plugins) to get started?

[@Backdoorproggie]

Great tutorial. Thank you very much. Also want you to know that I got issues signing in for your hook course. Apparently my email address doesn't get recognized.

[@ventsislavstoimenov4404]

great video!

[@WaddupBoi]

Doesn't seem like much but this is such a clever little project.

[@rickeyupadhyay6898]

Hi kyle it would be awesome if you can create an short series on react + redux or context API + Usereducer

[@parkerAmv]

Look at his tutorial about shopping cart

[@xAngel03]

I see what you did there. God bless.

[@manuchehrme]

Hi Kyle! Why don't you use MacBook or iMac like many developers?

[@serhanmmiah7315]

Learning Typescript is a type similar to how struct is in c++? I am grateful for this tutorial as I am starting to learn typescript.

[@user-pd2ic5pd3z]

Kyle, why did you use "keypress" event? It is deprecated.

[@harijoel]

How does he quickly rearrange the component's properties to be in different lines?

[@MichaelHagberg]

always enjoyable to watch your videos. One question: about 32 minute mark you do a keyboard match(/^[a..z]$/) What if the user enters capitalize 'H'?

[@nickely]

It doesn't account for capitalised letters. Use /^[a-zA-Z]$/ for that.

[@adityanayak01]

Waiting for TypeScript in 30 mins Video 😍😍😍😍😍

[@Flash136]

Finally using Vite 💛👌

[@romilsahay7584]

Could you please answer me . What is req.user is it work as req.body

[@iAbdulah0]

I don't know what is the purpose of including typescript in the project while not practicing it

[@leosycreos]

Hi man therse somthing wrong with ypur page the button to continue when you put your email on chackot page dosent work when you write anything there

[@Viralvlogvideos]

Please make a detail videos on how rendering works in react and why the use effect without any dependency array runs inifite with and usestate but if the same dependency use in a child component it is not running dependency. I'm confused please simply the rendering of react for us .

[@eduardoontiveros-oi5ej]

he explains it super well in his react course, and it has been a while, but i think he has a video on useffect also. you should check it out! he does a really good job. i would recommend you code along as he does it it will give you a really good understanding. hope it helps

[@user-ij3rh2sd6h]

I am just wondering if you have some project with this kind of "complexity" in your hands, can that be enough to get a junior developer job? Or is that better to dig deeper and build something more complex, even the design is lacking?

[@alicezhang8888]

May I ask why do we name HEAD, BODY, RIGHT_ARM, LEFT_ARM, RIGHT_LEG, LEFT_LEG in uppercase?

[@Oscarmadeofgold]

Great tutorial again from @Web_Dev_Simplified ! At 4:14 when you check for a newly logged word, with each refresh, i get two new words. I understand that this is due to my app.tsx being rendered twice. I am confused about this. Why doesn't your app render twice? How can i fix it?

[@GrimOwlForth]

I ran into the same problem! No idea, either.

[@sirsuer6726]

It's because React strict mode. just remove wrapper in main.tsx.

[@Oscarmadeofgold]

@@sirsuer6726 oh, thank you!

[@MrFieldbranch]

@@sirsuer6726 Thank you! I had the same problem too.

[@Zzyzx-]

What does auto beautify your css when saving? An extension?

[@brunoqueiroz5443]

It's called "prettier" you can have it with npm

[@huisso]

At 4:01 why do you insert arrow function inside useState initial state? What is the difference with static state?

[@RobertPodwika]

It's used for expensive computations. It's called Lazy Initial State

[@huisso]

@@RobertPodwika thank you for replying!

[@mikeagnostik4748]

Perfekt, but why don't you make videos about lit element ?

[@golfcart_9797]

how did you import those components with your keyboard like that at 8:00?

[@mpowereer6992]

ctrl + space or ctrl + .

[@thevividversatilechannel4807]

Pressing Control + dot (.) in windows operating system shows code actions Then, Select an option. Code actions can be opened with a light bulb on the left hand side. Code actions are not always available.

[@kontaninhokthian5787]

sorry I have problem with it not working . Can someone help me, please?

[@omokehindeigbekoyi9194]

Same here, the keyboard didn't stretch.

[@itzFenners]

Oddly on my laptop I get vscode intellisense for the div styles MaxWidth, flexDirection etc. But on a new setup with the same exntesions it doesn't appear to happen - anyone had this?

[@itzFenners]

Had to set my TS version in VSCode to workspace from the command pallete, it was using vscode version which was older FYI

[@austindunn433]

just out of curiosity, how would you stop someone from reading the word in inspect element? basically cheating the game

[@mandeeppatwa9645]

why is it always hard to clone your repo and run.... how to run this after cloning from github

[@DeltaNrOne]

I know javascript quite well. And also libraries like datatabes and jquery. I have never tried react but it seems like you have to write a lot of boiler plate code.

[@CodeCrunch001]

Once you start using react and typescript, you probably wouldnt go back to vanilla js and old-style HTML.

[@KristinAlayna]

I just want to create the app I need for work with a fill-in-the-blank template. 😭 I feel so unintelligent and I really need this job.

[@themanunnamed]

This guy is a great teacher

[@BliitzPint]

Muuuch to fast to code along, but well... I made it :D But it's actually much too easy to cheat by looking at the Components Tab in the React Dev Tools.

[@chrisazuaje892]

Great video BUT you go through it so fast! I often miss what you deleted/changed because you immediately move on to something else. Had to adjust the playback speed to make things easier for me. Overall though, great video.

[@user-mh1km3mv7z]

this doesnt work the create vite has different options and idk what to do

[@codybarr]

I was hoping the hangman and gallows were going to be an SVG with conditionally hidden/visible lines (and circle for the head).

[@ed1nh0]

But that's very easy to do. Just pick up a SVG on some stock free website and break those parts making their appearances conditionally just like he did.

[@farfazzi]

@@ed1nh0 not so easy if you don't have a path for each segment tho

[@ed1nh0]

​@@farfazzi I agree, but notice the purpose of this great tutorial is to give you the basic knowledge to run your app. The fine tuning and enhancements is up to you IMO.

[@farfazzi]

@@ed1nh0 yes, agreed

[@tmk2462]

Really good video. thx dude. You are going a bit too fast for beginners, you could explain a bit more. But thanks

[@rishiraj2548]

👍💯

[@a89529294]

👍

[@tomlikeabomb6706]

Why Vite instead of Create React App?

[@mpowereer6992]

Vite is faster

[@piyushaggarwal5207]

Could you please shift the Inline CSS to a better solution?

[@nongsoft5462]

20:12

[@Nodsaibot]

OMG thats a SPICY take 42:00 I know he's a Traitor and all

[@Frogic]

@ kzbin.info/www/bejne/Y4Cxhqybo6yhjdk I don't think your useCallback is doing anything here. You never added it as a dependency on the useEffect so it doesn't matter if its recreated each time it wouldn't trigger the useEffect. It also from my testing isn't causing a closure around guessedLetters which is not intuitive but I guess because your dependency array is making sure that guessedLetter isn't stale when handler is created.

[@downanddirtytruth]

If this is for 'beginners', I'm screwed for life.

[@thevividversatilechannel4807]

Please check my comment on your to-do app video. Thank you very much.

[@alexidino]

For beginners?

[@surakadotme]

yeah, i dont know typscript and this video for me.

[@alexidino]

@@surakadotme i am too don't know TS and now also learn Englisn. Have a nice day bro!

[@sirsuer6726]

@@alexidino keep it up bro. I still learning it too.

[@isaacopeyemirobert7868]

i don't know Typescript so i don't even know if I am to watch this video!!

[@kaninaololol]

useCallback absolutely useless

[@sevenwebdeveloper]

I was thinking the same thing... I followed along and was console logging, and couldn't work out what it was doing. I think useEffect was fine by itself? Mind you, I'm still learning about how to use the various hooks. But this confused me for a hot sec, glad I found this comment.

[@kaninaololol]

@@sevenwebdeveloper useCallback useful when u put returned function to array of dependencies of another hook

[@Tabitha_Dorcas]

You need to stop speaking too fast. It made me stop learning from you. Seriously you need to stop it. Coding rate is okay but stop rushing your words. Its terrible to the extent I have to comment on it.

[@viktorsarge6285]

He does speak fast. But playback speed is your friend. It doesn't affect audio quality very much and 0.75x speed is very useful when encountering a fast talker or unknown concepts. And 1.75x is great when you already know the things discussed and are just looking to have some context when you get to the new stuff.

[@franku3510]

styles is deprecated ? use this import "./Keyboard.modules.css" ... then where your class is

[@stabilini]

For SPANISH devs 😎 add 'ñ' to letters array in getWord function ---> return words[Math.floor(Math.random() * words.length)].normalize("NFD").replace(/[\u0300-\u036f]/g, "") to ignore accents

[@zackOverflow]

Awesom

[@JustTheBeginning2012]

Right off the bat I get this Error: App.tsx:6 Uncaught ReferenceError: Cannot access 'wordToGuess' before initialization 'wordToGuess' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.ts(7022) Function implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.ts(7024) on the statement: const [wordToGuess, setWordToGuess] = useState(() => { return words[Math.floor(Math.random() * wordToGuess.length)] })

[@JustTheBeginning2012]

From his source, this is how you fix it. import { useState } from "react" import words from "./wordList.json" function getWord() { return words[Math.floor(Math.random() * words.length)] } function App() { const [wordToGuess, setWordToGuess] = useState(getWord) console.log(wordToGuess) return Hi } export default App

[@abdelhaleemahmed7075]

Credit: elzero web school*