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!
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
It's nice to see I'm not the only weirdo who likes to have different genres of CZcams videos playing in the background while falling asleep in the afternoon.😂
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.
Amazing. I use JS and this video was very useful. TS is very close to JS and I easily could benefit from this video as well as your other videos. I'd like to add that it's not for beginners. It's more suitable for intermediate or review for advanced JS/TS react developers as it's more involved and needs prior knowledge of many topics in TS, JS and react. God Bless you Kyle
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 🇵🇰 😘
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 :)
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
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)
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.
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 .
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
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 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.
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?
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.
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.
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?
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.
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?
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.
@ czcams.com/video/-ONUyenGnWw/video.html 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.
From my experience, I think it's for intermediate to advanced level. You have to know hooks so you can benefit from it. It's not for beginner. Don't worry. Every detail of it needs prior knowledge that it's not it's place to be explained now. It can be learned by itself and then come back to this video for review.
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.
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
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.
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.
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)] })
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
Kyle - you're always well-prepared, thorough, competent, and professional. I thank you for your generosity in providing all of these top-quality vids.
this channel seems always provides what I need for now. Amazing !
And your way of teaching and spreading knowledge is great. Thank you always.
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!
Incredible. Your video about sql really helped me in my interview 🎉
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
😁😂🙃😉
It's nice to see I'm not the only weirdo who likes to have different genres of CZcams videos playing in the background while falling asleep in the afternoon.😂
Another great React/Typescript tutorial. Thanks !
Love this tutorial! Thanks Kyle :D
Learnt a lot of new things thank u so much kyle.
Great video as always! 😊
Thanks for a really well done video.
This is a masterpiece!!! thanks Kyle
No WORDS to express my gratitude for this video. 😁😁😁😁
This is very interesting! THANKS!
The only one I listen to at 0.50 speed :) thanks for great tutorial.🤙
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
Huge love man .... Thankyou .
Thank you! More content like this please TS and React!
awesome video. it was today that i realized im not even close to being a begining with react and typescript....
I don't even do web dev but i still find your videos incredibly interesting
What do you do?
@@Oncopoda game dev
@@alexanderst.7993 Dope
Thank for great tutorial.
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.
Care to share? I've never used Tailwind before.
@@simonshurety3870 As an example `const BODY = (
)`
Amazing. I use JS and this video was very useful. TS is very close to JS and I easily could benefit from this video as well as your other videos. I'd like to add that it's not for beginners. It's more suitable for intermediate or review for advanced JS/TS react developers as it's more involved and needs prior knowledge of many topics in TS, JS and react. God Bless you Kyle
I don't use TypeScript, but with a bit of effort I transformed this amazing project into React + JS ☺ Thanks a lot!
Why would you downgrade it like that ?
That's actually escaping the effort. 😄
Honestly was more impressed with this guy pure CSS... holy cow ! Keep going please
❤❤❤ NEED more TYPESCRIPT + REACT + REDUX + MERN projects ❤❤❤
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 🇵🇰 😘
new sub ty from Peru
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 :)
great video!
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
Doesn't seem like much but this is such a clever little project.
Is there a video about setting up environments/dependencies and vscode (and plugins) to get started?
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)
Finally using Vite 💛👌
I see what you did there. God bless.
Hi kyle it would be awesome if you can create an short series on react + redux or context API + Usereducer
Look at his tutorial about shopping cart
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.
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.
Waiting for TypeScript in 30 mins Video 😍😍😍😍😍
How does he quickly rearrange the component's properties to be in different lines?
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'?
It doesn't account for capitalised letters. Use /^[a-zA-Z]$/ for that.
Perfekt, but why don't you make videos about lit element ?
Kyle, why did you use "keypress" event? It is deprecated.
Hi Kyle! Why don't you use MacBook or iMac like many developers?
Could you please answer me . What is req.user is it work as req.body
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 .
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
I was hoping the hangman and gallows were going to be an SVG with conditionally hidden/visible lines (and circle for the head).
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.
@@ed1nh0 not so easy if you don't have a path for each segment tho
@@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.
@@ed1nh0 yes, agreed
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
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?
I don't know what is the purpose of including typescript in the project while not practicing it
What does auto beautify your css when saving? An extension?
It's called "prettier" you can have it with npm
At 4:01 why do you insert arrow function inside useState initial state? What is the difference with static state?
It's used for expensive computations. It's called Lazy Initial State
@@RobertPodwika thank you for replying!
how did you import those components with your keyboard like that at 8:00?
ctrl + space or ctrl + .
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.
just out of curiosity, how would you stop someone from reading the word in inspect element? basically cheating the game
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.
Once you start using react and typescript, you probably wouldnt go back to vanilla js and old-style HTML.
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?
I ran into the same problem! No idea, either.
It's because React strict mode. just remove wrapper in main.tsx.
@@sirsuer6726 oh, thank you!
@@sirsuer6726 Thank you! I had the same problem too.
👍💯
👍
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.
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?
Had to set my TS version in VSCode to workspace from the command pallete, it was using vscode version which was older FYI
why is it always hard to clone your repo and run.... how to run this after cloning from github
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.
May I ask why do we name HEAD, BODY, RIGHT_ARM, LEFT_ARM, RIGHT_LEG, LEFT_LEG in uppercase?
it's a common convention to use Upper case for constants that won't change
Really good video. thx dude. You are going a bit too fast for beginners, you could explain a bit more. But thanks
this doesnt work the create vite has different options and idk what to do
sorry I have problem with
it not working . Can someone help me, please?
Same here, the keyboard didn't stretch.
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.
OMG thats a SPICY take 42:00 I know he's a Traitor and all
20:12
Why Vite instead of Create React App?
Vite is faster
@ czcams.com/video/-ONUyenGnWw/video.html 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.
Could you please shift the Inline CSS to a better solution?
If this is for 'beginners', I'm screwed for life.
From my experience, I think it's for intermediate to advanced level. You have to know hooks so you can benefit from it. It's not for beginner. Don't worry. Every detail of it needs prior knowledge that it's not it's place to be explained now. It can be learned by itself and then come back to this video for review.
Please check my comment on your to-do app video. Thank you very much.
For beginners?
yeah, i dont know typscript and this video for me.
@@surakadotme i am too don't know TS and now also learn Englisn. Have a nice day bro!
@@alexidino keep it up bro. I still learning it too.
i don't know Typescript so i don't even know if I am to watch this video!!
useCallback absolutely useless
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.
@@sevenwebdeveloper useCallback useful when u put returned function to array of dependencies of another hook
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
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.
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.
Awesom
styles is deprecated ? use this
import "./Keyboard.modules.css"
... then where your class is
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)]
})
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
Credit: elzero web school*