FREE React Hooks Course: https://courses.webdevsimplified.com/react-hooks-simplified

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: https://courses.webdevsimplified.com/react-hooks-simplified
GitHub Code: https://github.com/WebDevSimplified/react-hangman
Regular Expression Video: https://youtu.be/rhzKDrUiJVk
Array Methods Video: https://youtu.be/R8rmfD9Y5-c


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://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

This Is A Great Beginner React/TypeScript Project

Zod is amazing. It is not only an incredible validation library, but the direct interactions it has with TypeScript make it event better. Not having to define my types twice is a game changer and the simple yet powerful API of Zod is so nice. In this video I talk about what Zod is, show examples of how to use Zod, and talk about why it is so amazing.


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:28 - What Is ZOD?
05:12 - ZOD Demo


#Zod #WDS #TypeScript

Zod Makes TypeScript Even Better

Highlight: https://app.highlight.run/?promo=WEBDEVSIMPLIFIED
Coupon Code: WEBDEVSIMPLIFIED (This should be automatically filled in as you go through the signup process)

Todo lists are boring and pretty limited so in this video I am going to show you how to build a more advanced project that covers all the features of a todo list while also adding tons of additional features like categories, markdown support, filter, etc. This is a great intermediate to advanced project.


📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/react-note-taking-app
React Router Video: https://youtu.be/Ul3y1LXxzdU
React Router Article: https://blog.webdevsimplified.com/2022-07/react-router
React Multiselect Video: https://youtu.be/bAJlYgeovlg


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00:00 - Introduction
00:00:30 - Demo
00:01:10 - Setup
00:02:20 - Routing
00:05:38 - New Note Form JSX
00:13:18 - New Note Form Functionality
00:19:19 - useLocalStorageHook
00:24:40 - Note Creation Logic
00:28:53 - Tag Creation Logic
00:33:37 - Note List Page
00:50:20 - Note Layout Wrapper
00:53:45 - Note Show Page
00:58:10 - Note Edit Page
01:02:42 - Delete Note Logic
01:04:35 - Edit/Delete Tags Modal


#React #WDS #TypeScript

The Perfect Advanced React/TypeScript Project - Markdown Supported Note Taking With Categories

Zod is an extraordinary library for TypeScript validation, and with 3.20 it just got even better.

Matt's Zod Course: https://totaltypescript.com/tutorials/zod
GitHub Release: https://github.com/colinhacks/zod/releases/tag/v3.20

Become a TypeScript Wizard with Matt's upcoming TypeScript Course:

https://www.totaltypescript.com/

Follow Matt on Twitter

https://twitter.com/mattpocockuk

The best TypeScript library just got better

TypeScript's infer keyword is MUCH narrower, much less widely used than you think it is. It has ONE use case, and we cover it in a ridiculous amount of depth here.

Become a TypeScript Wizard with Matt's upcoming TypeScript Course:

https://www.totaltypescript.com/

Follow Matt on Twitter

https://twitter.com/mattpocockuk

Infer is easier than you think

tRPC v10 is so hype! Seriously check it out of you haven't yet. Create-t3-app is the best way to ;) #t3stack #fullstack #webdevelopment 

Create-t3-app: https://create.t3.gg
Link to stream this was from: https://www.youtube.com/watch?v=Y84-ZQTdm_E

ALL MY VIDEOS ARE POSTED EARLY ON PATREON https://www.patreon.com/t3dotgg
Everything else (Twitch, Twitter, Discord & my blog): https://t3.gg/links

Love you Mir ty for another killer edit ❤️

Full Stack Dev Just Got WAY Better 👀

Become a TypeScript Wizard with Matt's upcoming TypeScript Course:

https://www.totaltypescript.com/

Follow Matt on Twitter

https://twitter.com/mattpocockuk

TypeScript: Should you use Types or Interfaces?

TypeScript enums are not great. In almost all cases, I use an 'as const' with a sprinkling of type magic to express them.

Become a TypeScript Wizard with Matt's TypeScript Course:

https://www.totaltypescript.com/

Follow Matt on Twitter

https://twitter.com/mattpocockuk