Learning React, Typescript, Tailwind and Vite with Tic Tac Toe

In this video I am building a Tic Tac Toe clone using some of the hottest web development tools available today. We are building the app in React, with Typescript as the language, Tailwind for CSS and the blazingly fast Vite build tool. You don't need to know how to use any of these tools well, if at all, so follow along and let me know if you have any questions!
Check out the final code here: github.com/ianlenehan/react-t...
Keep up with the latest trends: • Keeping up with the la...
React tips and tricks: • 5 things you should be...

[@mamut6635]

Awesome content, keep it up! I really learned a lot!

[@IanLenehan]

Awesome, thank you!

[@praywithme247]

Really enjoyed seeing this even tho I can’t understand everything cuz I’m still learning… God bless man!

[@IanLenehan]

Thank you, you'll get there! Glad you enjoyed the video :-)

[@clintonwilliams9617]

I like the video. A very brief pause before switching to files or to the browser would be helpful

[@covidvaccinekills]

how do we update this game to be multiplayer and then connect a smart contract from etherum to make it a block chain game , that would be a good video if you can

[@harkoz364]

Thank you very much for this project and the quality of the video! I would like to know what was the use of Vite? thank you :)
(Sorry for my english, i use google translate 😅)

[@IanLenehan]

Hey Harkoz - Vite helped me get a React app up and running nice and fast. I've just published a video explaining why I'd choose Vite over Create React App if you'd like to check that out. czcams.com/video/MRe-5nVBPRo/video.html

[@harkoz364]

@@IanLenehan Thanks for the reply and for the content !

[@Cornellie]

Can someone explain the algorithm for the win condition? I can't seem to wrap my head around it.

[@IanLenehan]

So we iterate over all of the possible winning combinations, and for each one, we check the current game state against the the 3 indices of that winning combo and assign them to a, b and c. Then we check if any of them are empty - if they are we go "ok let's check the next possible winning combo". But, if they are all equal to each other `if (a === b && b === c)` then we know the player has won.
Hope that helps?

[@PeIeus]

How many hours of study did it take to get to a point where you could create content without referencing material often. Forgive the vague nature of the question. Excellent video, you've a new sub.

[@IanLenehan]

Awesome Oil thank you! There’s no way to answer your question really, I’ve been doing this for over 6 years and just practice a lot. But I consult a LOT of documentation and am regularly on Stack Overflow. So don’t worry about any of that, you’ll never not have to do it. But the more you code, the more certain patterns will stick and you’ll remember how to do certain things.

[@venkatesannedumaran6489]

how to use react -bootstrap in vitejs

[@yuxianxu806]

Great video, thanks!
Just catch one bug on my end.
----------
tailwind.config.js:
....
fontFamily: {
display: ["Lobster", ...defaultTheme.fontFamily.sans],
},
...
Correct it to:
...
'display': ...
...

[@hago7568]

Hi sorry but... waaaaay too fast like what is actually going on at stages? Like when you are start using typescript children: React Node etc. what is that about?

[@IanLenehan]

Hey there! Sorry you found it too fast. There’s a lot to fit in and I’m trying to not make the videos too short. To answer your question, when you are typing children in React, you need to import the ReactNode type from React and assign that as the type to children. It tells typescript to expect a React Element, or a string, number, array etc. It’s basically you telling typescript that any valid React render element might be passed as children to the component. You can assign ‘string’ to children if you know that’s all it will be but ReactNode covers all instances.

[@hago7568]

@@IanLenehan Thank you for the answer and making content!

[@Briefklammer1]

The course could be userfriendly if there wasnt these{...{onClick}} notations.

[@IanLenehan]

Thanks Dirk - so you think that throws people off a bit?

[@koreandude]

@@IanLenehan Heya Ian, great video, would you mind explaining the {...{onClick}} as well as passing down props like {...{player}}? Thanks!

[@IanLenehan]

@@koreandude sure! It’s just shorthand for onClick={onClick} etc. Because of object shorthand notation, if the prop has the same name as the value, you can put it into an object like this and spread it.

[@sogggy]

Thanks.
I had a tailwind bug, had to rename the tailwind.config.js to tailwind.config.cjs
I added a button to reset scores.
const resetScores = () => {
localStorage.removeItem("scores");
window.location.reload();
};
resetScores()}>
Reset Scores