Learn React TypeScript & Bootstrap with one Project | React TypeScript Tutorial for Beginners

This video is an easy and complete React + TypeScript + Bootstrap tutorial for Beginners. In this video we will build a Notes Application from scratch and understand everything about how we can use TypeScript with React.

⭐️GitHub link for Reference⭐️

⭐️ Support my channel⭐️

🔥 Video contents... ENJOY 👇
0:00:00 - Intro
0:00:22 - Application Demo
0:02:06 - How to Setup React TypeScript Project
0:02:57 - Understand React TypeScript App Folder Structure
0:05:16 - Installing Bootstrap to Project
0:06:18 - Installing TypeScript React code snippets Extension
0:07:00 - Create Application Folder Structure
0:08:42 - Why we use TypeScript with React ?
0:12:05 - Use TypeScript with State
0:15:12 - Adding TypeScript Interface
0:17:55 - Create Header Component
0:21:55 - Create NotesList Component
0:24:00 - Use TypeScript with Props
0:30:12 - Create Notes Component
0:33:55 - Use TypeScript with Functions
0:39:27 - Create Note Component
0:45:37 - Use TypeScript with Ref
0:48:43 - Use TypeScript with Events
0:50:00 - Form Validation
0:57:56 -Testing the Application
0:59:30 - Outro

***React Roadmap for Developers in 2021***

🔗 Social Medias 🔗

⭐️ Tags ⭐️
- React with TypeScript Crash Course
- React TypeScript Notes Application
- React Typescript Projects For Beginners
- Learn TypeScript with React js
- TypeScript Tutorial

⭐️ Hashtags ⭐️
#react #typescript #beginners #tutorial

Disclaimer:
It doesn't feel good to have a disclaimer in every video but this is how the world is right now.
All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.

[DipeshMalvia]

Guys, if the video is helpful to you or you learned something than please appreciate and hit the LIKE and SUBSCRIBE button and help this channel to GROW😉

[dylan]

Thanks for sharing this video. In the "CreateNotes" component there is no need to pass the "notes" array as a prop and then utilise it. It is better to use a callback function when invoking the useState setter function (in this case, "setNotes") which will then provide access to the state of "notes" at that precise moment.

[gregoryvonarx]

Thanks for this course. I was stuck with a project and this totally got me up to speed with React, React-Bootstrap, and Typescript. Thank you!!! Very well thought out and paced.

[mahmudrazani]

Please cover redux toolkit query and entity adapters. Much awaited

[stafa]

Very great tutorial Dipesh!!! It has helped me gain a good understanding of why I usually did somethings in Typescript.

[n_ah]

Shukriya for the Video 🙏🏻
Make some more complex projects with typescript & redux-toolkit

[arghyamitra]

Thank you for listening to us 😊 great video

[n_fan]

bit confusing to me on 39:20, setNote is a hook to update the notes state and i thought we only change these states only from its parent which is App in the case, now we also can do the same from the a child component (nodelist) by only pass the useState (setNotes) as prop to nodeList and de whataver with ??

[MrTouchFair]

Thank's sensei. Ur a great teacher!

[abhishekraghunath]

Hey, at 28:33, why did not you add array brackets when you declared the type of note.

interface INotesProps{
note = Note
}

[MultiMtech]

Nice video on React with typescript... while defining types what should we use ? interface or type?

[l.seciltuncay]

again and again thank you for your effort :)

[sethusuresh]

When I try to use react-bootstrap components I get the below error
'Container' cannot be used as a JSX component.
Its return type 'ReactNode' is not a valid JSX element.
Type 'undefined' is not assignable to type 'Element | null'.
This is happening only for certain specific react-bootstrap components.

Awesome!! Question: which snippet extension have you installed so 'tsrs' trigger is available?

[RavindraSingh-lppl]

please make a fullstack application using typescript +React

[sagarchaitanya]

Hii i need a blog website using typescript with react front end and backend

[kirtisingh]

Hello sir, thank you so much for the tutorial just had one thing to ask i replicated this tutorial but i also want to implement that even after refreshing or reloading the notes dont disappear but be stored in a local storage i tried using usseffect for it but did'nt solve my problem can you please help on this feature.

[malavnaagar]

Plz Make Video To Mobx State Mangement To typescript And Also Create a tutorial For GraphQL

[kothaib]

Hi Dipesh . Thanks for the amazing video. Can you please make a video on material UI

[jyothijadoun]

Can u please do with using java script also pls