React & TypeScript - Course for Beginners

Learn how to build React apps using TypeScript. First, learn the basics of TypeScript. Then, learn how to integrate TypeScript in a React app by building an awesome project. You will learn how to use TypeScript with React Hooks such as useState, useRef, and useReducers. You will also learn how to pass props from one component to another by defining prop types of the component. And you will learn much more!

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:00:31) Typescript vs Javascript
⌨️ (0:00:57) Project Overview
⌨️ (0:02:27) Setup React Typescript Project
⌨️ (0:04:57) Basic Types in Typescript
⌨️ (0:07:30) Object Type
⌨️ (0:09:03) Optional Field in Objects
⌨️ (0:09:20) Array of Object Type
⌨️ (0:09:55) Union Type
⌨️ (0:10:25) Function Types
⌨️ (0:12:06) Any Type
⌨️ (0:12:35) unknown and never Type
⌨️ (0:12:52) Aliases ( type and interface )
⌨️ (0:14:36) Extending types
⌨️ (0:15:53) Extending interface
⌨️ (0:16:28) Extending Classes
⌨️ (0:16:45) Extending type with interface ( and vice versa )
⌨️ (0:17:22) React with Typescript
⌨️ (0:18:22) Functional Component type
⌨️ (0:19:19) Creating Input UI
⌨️ (0:26:22) useState Hook with Typescript
⌨️ (0:27:39) PropTypes - Passing props to component
⌨️ (0:30:34) Reusable todo interface
⌨️ (0:33:01) Passing function as props
⌨️ (0:34:14) Event Type in Typescript
⌨️ (0:35:20) Create Todo Logic
⌨️ (0:37:54) useRef Hook with Typescript
⌨️ (0:40:41) TodoList Component
⌨️ (0:45:27) Passing props to SingleTodo
⌨️ (0:47:14) SingleTodo Component
⌨️ (0:52:23) Todo Complete Functionality
⌨️ (0:54:56) Delete Todo Functionality
⌨️ (0:55:55) Edit Todo Functionality
⌨️ (1:02:05) Edit Bug Fix
⌨️ (1:03:23) useReducer Hook with Typescript
⌨️ (1:07:11) Homework for you
⌨️ (1:07:26) Building App UI for Drag and Drop
⌨️ (1:13:13) React Beautiful DnD Installation
⌨️ (1:14:00) completedTodos State
⌨️ (1:15:21) DragDropContext
⌨️ (1:16:42) Droppable Tag
⌨️ (1:20:46) Draggable Tag
⌨️ (1:23:21) onDragEnd Logic
⌨️ (1:30:05) Drag and Drop Styling
⌨️ (1:32:36) Outro

🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster

--

[RoadsideCoder]

Thanks for featuring my Content 🙏❤️.
Love making content for this channel.. 🔥🔥
Hope to bring more such tutorials in future.

[alanskverer]

I learn more from Indian guys at YouTube then my professors at college. 🔥

[suri]

i really appreciate the fast forwarding whenever you are writing boilerplate code.
it helps a lot!
Thank You!

[shangguanwang]

This tutorial is amazing, I followed through and completed my first TypeScript project

[postingbmwm]

Finished the react course and heard how good Typescript was so this is exactly what I was looking for.

[ahmadkaleem]

Key difference between "any" and "unknown" is our attitude. "any: I don't care🥱", "unknown: I'm not sure bro😶"

[thefonsotube]

I LOVE THIS GUY! He's getting straight to the points that I need. AND he points the viewer to the DOCUMENTATION! WONDERFUL!!! Great job sir!

[shiwanidembla]

Amazing tutorial, it covers basics as well as advanced concepts. A few suggestions, try to explain the chunk of code after implementing the functionality so that user can clearly understand it. And, I got confused and lost in "todo, todos, todo(model)".

[mukulr]

Great to see RoadsideCoder contribute to FCC. 🌟🇮🇳

[rudra]

OUTSTANDING lecture ! The detailing involved from student prespective is mind-blowing. Thankyou fcc and @RoadsideCoder

[jananiadanurrammohan]

In InputFeild.tsx file, if the input tag is not a self-closing tag, then the web page goes blank. The tutorial has self-closing tag, but I did this mistake of giving separate tags like <input> </input> rather than <input/>. This problem occur at 20 minutes from the start of the video. Thought it might be helpful for someone who might face this error. Thanks.

[otaneto]

Thanks for this amazing course. I could learn a lot from you. You rock!

[ICheezI]

Which extension is being used to show the variable type when hovered?

[abenjamin]

OMG 😱 I’ve been wanting to learn more TS and how to merge it into a React app. I love TS ty

[westernpigeon]

No way! Just as i was starting to build a react project for my bootcamp and learning typescript on the side! heaven sent!

[uusa]

thank you so much really simple, clear and straight to the point

[doctormk]

Man I just remembered you and your face and the project in this video and been literally tying to find you for about 30 minutes.
hoofff...
Thank god already.

[tonmoyroy]

Awesome Tutorial on React with TypeScript 🔥
Thanks a lot ❤️❤️❤️

[vishalgangde]

Great tutorial! This is by far the best React TypeScript tutorial I've come across. Keep up the great work! ♥🔥

[susasan]

For React Version 18 and above remove the <React.StrictMode> for the Drag feature to work.

Also, amazing tutorial Piyush. :D