This Is A Great Beginner React/TypeScript Project

[@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.

[@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.😂

[@muhammadnishad.p.n1170]

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

[@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!

[@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

[@dbdbdbdiv]

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

[@l.seciltuncay7921]

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

[@cjbios2080]

i'm more about 1.25 or 1.5 😄

[@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. 😄

[@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

[@Ryan-zv6yl]

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

[@nicmackenzie]

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

[@shassan1973]

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

[@regilearn2138]

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

[@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 🇵🇰 😘

[@paulthomas1052]

Another great React/Typescript tutorial. Thanks !

[@iAbdulah0]

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

[@Sweatshirtshoot]

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

[@ElidatheWinged]

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.

[@bananamilk4016]

Love this tutorial! Thanks Kyle :D

[@yassine-sa]

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 :)

[@lokeshnegi5051]

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

[@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!

[@WaddupBoi]

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

[@pablotexeira7579]

This is a masterpiece!!! thanks Kyle

[@codingwithjaybird]

Great video as always! 😊

[@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

[@niklassoderberg2168]

Thanks for a really well done video.

[@Bobert6B05]

Great video, thanks!

[@rodrigolaporte274]

This is very interesting! THANKS!

[@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

[@instantrecaps1764]

Huge love man .... Thankyou .

[@New-dj9rz]

Thank for great tutorial.

[@andersonalmeydat7715]

new sub ty from Peru

[@adityanayak01]

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

[@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.

[@ventsislavstoimenov4404]

great video!

[@TornadoComputerz]

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

[@Flash136]

Finally using Vite 💛👌

[@xAngel03]

I see what you did there. God bless.

[@downanddirtytruth]

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

[@shassan1973]

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.

[@AnkitSharma-mk7ub]

😂

[@harijoel]

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

[@lilb07]

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

[@Zbytes-l9h]

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

[@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)

[@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.

[@FerencVigh-b3d]

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?

[@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

[@manuchehrme]

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

[@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.

[@Nodsaibot]

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

[@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

[@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.

[@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

[@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 ?

[@romilsahay7584]

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

[@Zzyzx-]

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

[@brunoqueiroz5443]

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

[@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.

[@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.

[@austindunn433]

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

[@tmk2462]

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

[@kontaninhokthian5787]

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

[@omokehindeigbekoyi9194]

Same here, the keyboard didn't stretch.

[@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.

[@anonna1one]

How do you define the position, i don't get them 😢?;

[@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.

[@David-vn6uq]

great video, but you go way to fast, i understand it for the css part, but I would have liked to go a little bit slower when it got to typescript

[@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

[@alicezhang8888]

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

[@shassan1973]

it's a common convention to use Upper case for constants that won't change

[@Traceless]

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?

[@Traceless]

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

[@ismailemir54]

33:27

[@nongsoft5462]

20:12

[@mandeeppatwa9645]

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

[@rishiraj2548]

👍💯

[@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.

[@piyushaggarwal5207]

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

[@AlexanderMoyer-k3b]

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

[@a89529294]

👍

[@tomlikeabomb6706]

Why Vite instead of Create React App?

[@mpowereer6992]

Vite is faster

[@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!!

[@thevividversatilechannel4807]

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

[@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.

[@zackOverflow]

Awesom

[@franku3510]

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

[@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*