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 UA-cam videos playing in the background while falling asleep in the afternoon.😂
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!
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 :)
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
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
you didn't have to tell this project this fast,some of us like to learn a new system by doing projects but you assumed we already know how to use react+typescript. I think you didn't add many details and stuff,and i know it is not a tutorial or crash course video but you could have made a 75-80 mins video instead of 45. sometimes i watch it in the speed of 0.75. still a nice project and your codes are well structured,that's why i kept watching.
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.
i have a question i 've just heard of this programming language and i find interesting but honestly where is the react i only see typescript but otherwise i found this video amazing
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)
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
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
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.
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?
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?
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.
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.
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 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.
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.
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.
@ ua-cam.com/video/-ONUyenGnWw/v-deo.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.
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 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.
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.
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 UA-cam videos playing in the background while falling asleep in the afternoon.😂
The only one I listen to at 0.50 speed :) thanks for great tutorial.🤙
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
Incredible. Your video about sql really helped me in my interview 🎉
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. 😄
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!
this channel seems always provides what I need for now. Amazing !
And your way of teaching and spreading knowledge is great. Thank you always.
❤❤❤ NEED more TYPESCRIPT + REACT + REDUX + MERN projects ❤❤❤
awesome video. it was today that i realized im not even close to being a begining with react and typescript....
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 :)
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
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 know what is the purpose of including typescript in the project while not practicing it
No WORDS to express my gratitude for this video. 😁😁😁😁
Honestly was more impressed with this guy pure CSS... holy cow ! Keep going please
Another great React/Typescript tutorial. Thanks !
Love this tutorial! Thanks Kyle :D
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
Doesn't seem like much but this is such a clever little project.
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
you didn't have to tell this project this fast,some of us like to learn a new system by doing projects but you assumed we already know how to use react+typescript. I think you didn't add many details and stuff,and i know it is not a tutorial or crash course video but you could have made a 75-80 mins video instead of 45. sometimes i watch it in the speed of 0.75. still a nice project and your codes are well structured,that's why i kept watching.
Learnt a lot of new things thank u so much kyle.
Great video, thanks!
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.
Thank you! More content like this please TS and React!
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 = (
)`
i have a question i 've just heard of this programming language and i find interesting but honestly where is the react i only see typescript but otherwise i found this video amazing
This is a masterpiece!!! thanks Kyle
Thanks for a really well done video.
This is very interesting! THANKS!
Kyle, why did you use "keypress" event? It is deprecated.
Waiting for TypeScript in 30 mins Video 😍😍😍😍😍
Thank for great tutorial.
Great video as always! 😊
Huge love man .... Thankyou .
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)
How do you define the position, i don't get them 😢?;
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
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
Finally using Vite 💛👌
new sub ty from Peru
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
Is there a video about setting up environments/dependencies and vscode (and plugins) to get started?
I see what you did there. God bless.
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.
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?
Really good video. thx dude. You are going a bit too fast for beginners, you could explain a bit more. But thanks
Could you please answer me . What is req.user is it work as req.body
this doesnt work the create vite has different options and idk what to do
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
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
just out of curiosity, how would you stop someone from reading the word in inspect element? basically cheating the game
How does he quickly rearrange the component's properties to be in different lines?
great video!
Perfekt, but why don't you make videos about lit element ?
sorry I have problem with
it not working . Can someone help me, please?
Same here, the keyboard didn't stretch.
Hi Kyle! Why don't you use MacBook or iMac like many developers?
why is it always hard to clone your repo and run.... how to run this after cloning from github
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.
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.
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.
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
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!
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.
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.
What does auto beautify your css when saving? An extension?
It's called "prettier" you can have it with npm
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.
@ ua-cam.com/video/-ONUyenGnWw/v-deo.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.
OMG thats a SPICY take 42:00 I know he's a Traitor and all
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.
33:27
Could you please shift the Inline CSS to a better solution?
Why Vite instead of Create React App?
Vite is faster
20:12
👍💯
👍
styles is deprecated ? use this
import "./Keyboard.modules.css"
... then where your class is
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.
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.
Please check my comment on your to-do app video. Thank you very much.
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
i don't know Typescript so i don't even know if I am to watch this video!!
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
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*