React Typescript Tutorial with Project | Learn React JS with Typescript

#ReactTypescript #Typescript #ReactJSProject #ReactHooks

Learn React JS with Typescript in one video. We will learn typescript from scratch and use it with react hooks such as useState, useRef and useReducer. We will understand PropTypes, DefaultProps etc. all while building a todo list app project.

Source Code -

Live Site -

If any questions, ask here -

Typescript Documentation-

useReducer Tutorial -

00:00:00 Intro
00:00:34 Typescript vs Javascript
00:01:06 Project Overview
00:02:22 Setup React Typescript Project
00:04:52 Basic Types in Typescript
00:07:27 Object Type
00:09:00 Optional Field in Objects
00:09:15 Array of Object Type
00:09:50 Union Type
00:10:20 Function Types
00:12:01 Any Type
00:12:30 unknown and never Type
00:12:47 Aliases ( type and interface )
00:14:31 Extending types
00:15:48 Extending interface
00:16:23 Extending Classes
00:16:40 Extending type with interface ( and vice versa )
00:17:17 React with Typescript
00:18:17 Functional Component type
00:19:14 Creating Input UI
00:26:17 useState Hook with Typescript
00:27:34 PropTypes - Passing props to component
00:30:29 Reusable todo interface
00:32:56 Passing function as props
00:34:09 Event Type in Typescript
00:35:15 Create Todo Logic
00:37:49 useRef Hook with Typescript
00:40:36 TodoList Component
00:45:22 Passing props to SingleTodo
00:47:09 SingleTodo Component
00:52:18 Todo Complete Functionality
00:54:51 Delete Todo Functionality
00:55:50 Edit Todo Functionality
01:02:00 Edit Bug Fix
01:03:18 useReducer Hook with Typescript
01:07:07 Homework for you
01:07:34 Support the Channel

Movie App in React JS and Material UI -

Quiz App in React JS and Material UI -

Dictionary App in React JS and Material UI -

Learn React From Scratch -

[asharma]

I highly recommend this video as a beginner to everyone who wants to learn typescript in just the shortest possible time. Thanks to the roadside coder. keep up delivering the good content.

[tanjakahlo]

For the most optimized and fastest To Do List ... I always use a pen and paper. 😄😄😄
Great video tutorial, btw!!! 👍👍👍

[OdaiDahmos]

This is the best course that i watched

[parikshitrawat]

Genuinely great video bro. Almost completed typescript course on Codecademy but couldn't start using it with react. But after watching this small video i can.

[MrTobypowell]

Great video, concepts really well explained; just what I needed. Thanks.

[rudimuhammad]

this what i look for... thanks bro,
love from Indonesia

[mdashiqurrahman]

Awesome Bro... fall in love on this channel

[techsavy]

Nice video, buy you a coffee or maybe a coffee Machine :). Learnt a lot with that last challenge on using reducer.

I do have one or two new-bee questions❓:
1. We did the handle Edit (processing) functions inside Single Todo component. Won't it be a good idea to do all these 'processing' functions in App. file!?
2. Another question: Is there a cleaner/automated way to generate sequence-diagrams, class-diagrams for an existing react project? (I think, it may help with better understanding and code-reviews when project grows incrementally large!
Thanks. 👏

[eelguneezmemmedov]

You And Freecode Camp You are the best chanel i have ever seen .Thank youu I wish u could do more Typescript projects Really it is hard to learn Butt ..By your tutorial you make it easy to understand Thank u Wish u best

[tejalbhavsar]

This is one of the osm videos I have watched on react and typescript, thank you for the detailing and taking care of small explaingations. Please feel free to tell us about the different shortcuts also.

[Javascriptallabout-ssmy]

Wondering if it is the correct way of using BEM 🤔

[saikatdas]

basically i was searching to integrate TS with React fr a company project
And i found this!😄✌️
Thanks bhaiya fr ur awesome and much needed content
Keep the good work up🤩🤩🤩

[vamsinadh]

Thanks Bro Loved Doing it Learnt a lot

[harishgowdabp]

Please do more videos on react with typescript

[optimusprime]

Where is the second part of this Todo App?

[Fatima-iekj]

omg love u so much sir i have no word's to say thanks for this great video

[UnchartedWorlds]

Subscribed, excellent content. /Senior webdev engineer

[shivshankar]

please make a tutorial on crud with typescript and context

[right-network]

thanx bro... can u make one video on docker file and jenkins .. and how we can use in our REACTJS project.. i am waiting for that.. thanx in advance

[everObvious]

Did anybody have success implementing the Reducer challenge at the end? I'm having trouble, on my first pass.