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

hey what's going on guys welcome back to another video so this is a crash course on react with typescript and bootstrap we will build a notes application and we will see how we can use typescript for states props functions and events for the css we are going to use react bootstrap components and classes let me show you the demo that we are going to build in this video so this is the application that we are going to build and we have a header component which has a title of react type script bootstrap tutorial then we have a notes component which actually lists all our notes and inside that we have an individual note which is a note card and we have a note meetings which is the title of the note then we have the note text and the time stem when the note was created then we have a delete button so when we click on the delete button the notes will be deleted so let me click on this delete button and now we see that we don't have any notes and the other section is the create note where we actually going to create the new notes so i'm going to type a react type script and then check out for this new tutorial and we can also select the color of our note card so i want to keep the default note card color and i'm going to click on the submit so you will see that we have added a new note so let's create a different note so i'm going to add test and i'm going to add test as a text and this time i'm going to change the color of my note card and i'm going to click on submit so we see that we have a new note card with a different color and if we try to submit the empty form then we are going to get an error that all fills are mandatory and the complete ui we have built with the help of the react bootstrap component and classes so if this sounds interesting then stick around also don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one so let's get started [Music] all right guys so i have already created a react typescript application and let me show you how we can create the react typescript application so in my terminal if you see then we can use the npx create react app as usual and then when we add the create react app we just have to add a template so if you see here then we have the hyphen hyphen template here and then we just have to add the type script so if we add this type script then we are going to have a react application with a typescript as its template and once you have it then all your files in your react project will be having an extension of tsx instead of dot js so let me give you a quick walk through that when we bootstrap a react application with a template of typescript what we get so this is our application folder structure and we see that we have a tsconfig.json file and if i open this file we will see that what we have here is we have some default configuration of your typescript into a react project and most of the time we don't have to touch this file because this will contain all the basic and the default configuration that we need for our typescript into our react application then we have the package.json which is containing all our dependencies that we are using for this project then we have the git ignore file which is simply going to ignore all our files which we don't want to commit into our git repository then we are going to have a public folder which will contain the fab icon and the index.html so nothing is changing here it will be same as it is which we have in our usual react project with the javascript and next in the source folder you will see that we have all the files with the extension of tsx and not the js so this tsx is the extension for the typescript files and we have a lot of files which we don't want actually like the report web vitals setup test.ts but i'm not going to delete them i will just keep them as it is and then i have a file with a react app file and this actually contains some basic settings so in case if you bootstrap your application with a template of typescript and you run into some problem with the jsx runtime then you can actually add this hack and you will find this hack on the internet very easily and i have added this hack because when i created or when i boot up the react application i was running into some error with the jsx runtime so that's why i have added this and if we go into our index.dsx then we have a very standard code of adding our app component into our html element with an id of root now let's go to the index.css this is the default css i'm not going to touch anything on this then here is our app.tsx file which contains a default code and if we run this application on a local development environment then we are going to see something like this so i'm running my application on a local development environment and i see the default logo of the react and i have installed one more dependency in my project which is the bootstrap so if i go to the terminal and let me open the terminal and if i go here then you will see that i have also installed the react bootstrap so this is how i have installed npm installed react bootstrap and the version of the bootstrap is 5.1.1 so if i go to the official documentation of the bootstrap so this is the official documentation and you will find all the details about how to install it and how we can use them in our projects or how to use the components in our project so you can install it like this and then you have a different ways of how to import the components so we can import the component as import button from react booster button so let's go back to our application and if i go to my package.json then we will see that we have a dependency which is for the bootstrap so this is the dependency for the bootstrap and this is going to help us to provide us the react bootstrap components so that we don't have to write our own css next thing i want to show you is that i am using a extension on the vs code which actually helps me to speed up my development for the react type script so if i go to the extension tab and inside the extension step you will see that i have a snippet which is the typescript react code snippet and this snippet helps us to get the boilerplate typescript components very quickly so if i scroll down then we will see that we have a lot of snippets that triggers the components like this all right i want you to install this snippet because i'm going to use the snippet as we are more familiar with our typescript components all right so now let's go back to our application and inside the application what we are going to do is first we are going to create the folder structure so what i want is uh inside this source folder i'm going to create a folder of components so i will go here i'm going to click here and i'm going to give here as components all right and this is going to contain all my components now how many components i need to build this project the first one will be the header component so let's go and create the header component so i'm going to click here and here i'm going to have the header dot tsx now you will notice that instead of adding the extension as javascript or the js we are using the tsx which is the typescript all right so we have the header component uh next component i want is the notes list so let me have the notes list dot tsx all right then i want to create a component for the create notes so let me have the create notes dot tsx and the last component i will need is the note card so for that i'm going to create a notes dot tsx all right so we have created all the four components uh which we will need for this application and the next thing i want to do is uh i will go to my app.tsx and inside the app.tsx i'm going to remove all this stuff which i don't want so i'm going to select this and i'm going to remove this and i'm just going to add the app here all right now if we go here then we see that we have the app here so let me zoom a little bit all right so now we were very comfortable in using the react with the javascript then why there is a need to use the react with the typescript template so most of the organization when we work on the react projects they use the typescript because typescript brings a discipline in the code and it's a typed language so you cannot add any type of a value on your variables you have to define a type and that actually helps us to identify the errors early so let's take an example so if i go here and what i'm going to do is i'm going to create a constant and then i'm going to write a name and let's have this name as the page all right and then what i will do is i'm simply going to add this name here so let me add the name here all right so now we can see that we have the page in the output now what i want that i want to change the value of the page to something else so what i'm going to do is i'm going to remove this and i'm going to add 10 here all right and we are going to see that we have the 10 on the screen so there is no type definition have been added so the first benefit of typescript is that it actually helps us to add the type definition to our variables so what i will do is if i uh have a type like this and i want to have a type of string all right and as soon as i do a string then i get an error so if you see here and if i hover it then it says that the type number is not assignable to a type string so what we have to do is so i have to remove this number and i have to add a string here so as i add the string i don't see any errors so this is actually one of the benefit of the type script that it actually helps to identify the errors early or to catch the errors early so let's take an example so what i'm going to do is i'm going to import a use state all right and what i will do is i'm going to do a constant and i'm going to have a name i'm going to have a set name all right and this will be equals to the use state all right and i'm going to add an empty all right and now if i hover on this name then you will see that this name is a string and that is because typescript has inferred because we have added the empty string so typescript has inferred that this name is a type of string so let's change this to a number so i'm going to do a 10 here all right and now if i hover on this name then you will see that typescript has inferred the name is a type of number so now let's change this back to a string and i'm going to add a the page as string and i'm going to have a constant and i'm going to create a function change name and this will be equals to an arrow function and inside this i'm going to set a name as let me set a name as a different name so i'm going to set the name as nikesh all right and i'm going to save it then we can see that we don't get any errors but suppose let's say that i want to make this as a 10 and now you will see that typescript has immediately identified that this name is a type of string and you cannot add a number to this type all right so we have understood what is typescript and why we need to use the typescript into our project now let's start working on our note application so what i'm going to do is i'm first going to change this name to our notes array and this will become the set notes all right and for the use state uh i'm not going to add anything at the moment and i want to define the type of my notes so for that what i will do you can actually define the type of your notes with the help of this angular brackets all right and inside this angular bracket what i will do is i'm going to have a object so let me have the object and what values this object will have so my notes is going to have the id which will be a type of string all right then my notes is going to have a title and the type of the title will be a string then we are going to have the text which is also be a type of string and then we are going to have a color which is a type of string and the last we are going to have the date so let me add the date and the date will be of type string all right so this is how we have added the type of my notes and this is going to be an array so for that what i'm going to do is this is going to be an array of objects and for the value what i will have is i'm going to have this bracket which will define that it's an array and inside the array i'm going to have a single notes entry so what i will do is i'm going to have the id so for the id i'm going to add the new date so it is a type of string so i'm going to add dot to string all right and then after the id what i have is that you will see that i'm getting an error and that is because if i hover on it then you will see that the id string is missing the following properties that is we have the properties of title text color date and these properties are missing so we have to add that properties as well the next property i want to add is the title so let me give a random title of meetings all right and then i'm going to have the text so let me give the text as schedule meeting with ui ux team all right and then i'm going to add the color so let me add the color as df df df so this should be a string all right and the last we need to have a date so let me add a date and date will be the new date and i'm going to change this date to to string because the date is a type of string all right now you will see that as soon as i make these changes there is no error and let's remove this we don't want this anymore all right so we don't see any error now and that is because we have created this and this is a type of our notes and then this is a array of objects so that's why we have added this array here now we can actually simplify this and what we can do is we can actually create an interface so let me add an interface here so what i'm going to do is you can actually create interface in typescript with this interface and then let's give the name of the interface as note and this is going to be equals to an object so now what i will do is i'm simply going to copy this and i'm going to add this here so let me add it here all right so now i have the note and note object and this interface i can actually use it here so let me remove this and instead of this i'm going to add a note here and you will see that now it looks more simplified and this notes can be used at various components so for that what i will do is i'm not going to keep this note here i'm actually going to create a separate model file so what i'm going to do is let's go to the source and inside the source i'm going to create a new folder and i'm going to name this folder as models and this model is going to contain all my interfaces which i'm going to use throughout my application so i'm going to go here and i'm going to create a new file and let's name the file as note model dot ts all right and i'm going to do a simply export of that interface so let's go to our tsx file and i'm going to cut this from here and i'm going to add this here so this is how i have created the model and now i can import this model throughout my application wherever i want so i'm going to save this let's go back to our tsx file and let's delete all this all right we don't have the logo so i'm going to remove the logo as well and let's save this now we will see that we get an error here immediately and that is because note is not defined or we haven't imported the node so let's go here and i'm going to import the node since i haven't made the node as a default export so that's why i have to add the curly braces here and this will be coming from the dot slash models and then inside the models we have the node model all right so we have imported it and now we don't see any errors here and we also have one notes already created now what we are going to do is we just need to display this note on our screen so what i'm going to do is let's go to our jsx for this and inside this jsx what we are going to add is we are going to add some bootstrap components so let's go to our bootstrap website so this is our bootstrap and what we are going to do is first we need to create a header so if i go here to the component section and inside the components i will go to the nav bar and where we will see that how we can actually create the header so which header i'm going to use is i'm going to use this one so i'm going to create this header so let's go back to our code and inside the code what we will do is i'm going to go to my headers component so let's go to my headers component so this is my header component and we have added the typescript react snippet which is actually going to help us to get the boilerplate component so what i will do is i'm going to write ts then i'm going to have the rsfc and this is what you will see that we already get the complete boilerplate of our component and i'm going to change this to header all right and this is the interface if i want to have some props in my header component then those props will be of type this i header props all right but we don't have any props at the moment and we see that the header is giving us an error that is because we don't have anything in our return so i'm going to add this here all right and now what we need to do is we need to add the jsx for this header so if we go here then you will see that we have a lot of headers here and we can use one of the navbar from here so let's go back and i'm going to have here a nav bar so let me have the nav bar and i need a fixed on the top and then i need the background so what i will do is i'm going to have the bg as dark and let's have the variant so i'm going to add the variant as dark all right and you will notice that i'm not doing anything different i am getting all these uh components from the react bootstrap official documentation so you can go through the documentation and you will see that this is what we are using at the moment so i need a navbar which has a background of dark and a variant of dark so let's go back here and then i'm also going to have the container so let me add the container and inside the container what i will do is i'm going to have the nav bar all right and then i'm going to have the nav dot brand so this is going to give us the brand in the navbar and i'm going to add the react type script bootstrap so let me add the bootstrap tutorial and now what we just need to do that we have to use this header component into our app component so let's go back to our app component uh this is the app component and inside the app component we have to create a structure a layout so for the layout if we go here in the layouts then we have to create this kind of a layout we need to have a container then we need to have a row then we have need to have a column so let's go back uh to our application and here what i'm going to do is i'm going to add an empty fragment and inside this fragment i'm going to have the header component so let me have the header all right so i need to import this header component as it's not getting auto imported so let me have the header from slash components and then i'm going to have the header all right and i will save it and if i save it then we see that we see the react type bootstrap tutorial but we don't see that bootstrap classes so what i will do is let's go to the documentation of the bootstrap and if i go here then we see that if we want to add the styles and we have to add the either we have to import it or we have to add the cdn link so what i'm going to do is i'm going to copy this cdn link and let's go to the application i'm going to go to the index.html and inside this index.html i'm going to add the link here all right now if i save it and if i go back then we will be able to see that we see the css for the bootstrap all right so now we have the header and the next thing we need to do is we have to create our notes list where we can actually display all our notes so let's go to our notes list so let's create the component with the snippet so i'm going to write as ts r s f c and this is going to give me the boilerplate of my component so i'm going to change this to as notes list all right and what we need to do is we need to add some jsx so let me add the jsx first so i'm going to add the empty fragment and inside the empty fragment what i will do is i'm going to have the h2 tag and this h2 tag will contain the notes all right and i'm going to give some classes to it so let me add a class of margin top 3 which is going to give some margin from the top so if we go here we don't see anything at the moment so we have to add this node list into our app component so let's go back to our app component and inside the app component let's add some more jsx so what i will do is i'm going to add the container of the bootstrap all right and inside the container i will need a row so let me add a row all right and then i'm going to add a column and inside the column i'm going to add the notes list component now let's import this notes list component so i'm going to go here and i'm going to do an import notes list and this will be coming from the components and inside the components we have the notes list all right and the other thing we need to do is i have to add some more classes here so let me add a class name and i'm going to give a margin top 5 all right and i will save it now we can see that we have our notes list component and now let's go to the notes list component now what we want is in order to display all the notes in our notes list we have to pass a drop so if we go to our app component then we will see that we have the nodes here and the set nodes here so we have to pass the prop of nodes so that i can have all my nodes in my nodes list component and i'm going to add it here and i'm going to pass the nodes here and if you will see that as soon as i save it then i'm going to get a error compile error and that is where the typescript is now checking that you have passed a notes but there are no props of type notes in our notes list so if we go back to our notes list then what we have to do is we have to define a prop here so what prop we are passing from here is we are passing the notes so i'm going to copy these notes and i'm going to add it here all right and these notes are what are the type of these notes is the type of note array so i'm going to have the array here all right and now if we go back then we will see that we don't have the error anymore so if i go back here then there is no error so what we can do is now let's go here and we are going to destructure the props so let me destructure the props here so these props have notes and now the other thing you want to notice here that when we created this snippet what actually happened is we have this component as node list but there is a type of this component and which is a react function component as this is a function component so either we can have that react dot function component or we can also write fc which is also a function component so you can use either either you write the complete function component or you can use the fc and this function component have some props and there should be a type of that props which is the i notes list props which we have the interface of and now here we are going to have the props and we know that the type of this prop if we hover it then you will see that the type of this prop is i nodes list props so we have this notes and what i'm going to do is i'm going to do a d structure so let's restructure the notes okay now we have the notes now we just need to look through all the notes and we have to display them on the screen so what i'm going to do is i will go here i'm going to have a div and inside there i'm going to write a render notes so let me have the render notes as a function all right we don't have a function so that's why it's going to give us an error so let's create the function so i'm going to go here i'm going to write a constant i will have the render notes and this is going to be an arrow function all right and then inside the arrow function what i want is i'm going to take the notes so let's take the notes then i'm going to do a map on that notes then let's have a note here and then this will be an arrow function and now what i want to do is uh i have to return a new component from this node so you have already create a component for the notes card which is the individual notes cut so let's write a component first so i'm going to use the snippet again all right and in the snippet i'm going to write the notes all right and this is going to take an individual note so if we go back to our notes list then what i will do is i'm going to have the notes all right so let me import the notes so i'm going to go here import notes from notes all right i will save it and then i have to pass this note so i'm going to add the note here and this will equals to the note all right and i'm also going to add the key so i'm going to add a key and let's have a key which will be equals to so let me add a note and the other good feature of this type script you will see that as soon as i have the note here and if i do a dot then i see that what all the properties are added on this note object so i'm going to add the id here all right i will save it and let's go to our notes and here we have to add the prop so let me add a prop here so i'm going to have a prop of note which is a type of note all right then here i just have to do a restructuring of my notes so let me add a note here all right and we have to return some jsx so let's have the jsx right now i'm simply going to add a div and i'm going to give a note card here so that we can see at least something on our screen all right uh we are getting a problem because there's no note imported so let's import it so i'm gonna go here i'm gonna have the import note from so i'm going to have dot dot slash and this will be models slash nodes so let me add the notes here all right so now let's go back here and here we have a problem so now what we have to do is we have to actually return this so let's add the return here all right now if i save it and if we see that we don't see the note card so if i go to our notes then we should be able to see this note card on the browser but then there is something a problem so let's go to our notes list and if we hover on this render notes then we will see that it is actually returning void and that is avoid array but we want to return this jsx so what i'm going to do is i'm going to do a return of this all right and if i do a return then now you will see that we are able to see the note card and if we hover on this now then we will see that it is a type of jsx element of array so i'm going to copy this and i can go here and i can add the type so let me add the type here and now if i save it then we should be able to see the note card here all right so now we are able to do the loop of all the notes we are able to display it on the screen now let's add the notes card component and let's add the jsx here so i'm going to change this to an fc first so it's not required it's not necessary to change it to fc but let me change it to fc as a function component and here what i'm going to do is i'm going to create a div with a class name of let me add a class name and i'm going to give a class name of margin bottom three and let's end the div and then inside the div what i want is i'm going to have a card so this card is actually the react bootstrap component so if we go to the react bootstrap website so let's go here and if we go to the components so this is the card component i am using for the nodes card so if i scroll down then we are using this one so what i will do is i'm simply going to add the component all right and then inside the card what i will have is i'm going to have the card dot title all right and this title will be equal to the note dot and if i do a dot then we will be able to see the properties we have on this note object all right so we have the card and then inside the card we are going to have the text so let me add the text and this is going to be equal to the node dot text all right and then the next thing we are going to have the card dot sub title so let me add the subtitle and this subtitle will be equals to the note dot date and for this i want to have a different styling so i'm going to add a class name text muted so this is a bootstrap class which i am adding all right and then in the end what i want is i also want the delete button so let me add a delete button so i'm going to add a button i'm going to give a class name to the button of margin bottom 3 and then i'm going to add the variant to the button so this will be a red color button so i'm going to add a danger as a variant delete here so let me add the delete all right so we don't have the buttons imported so let's add the button so i'm going to go here import button from this button will be coming from the react bootstrap slash button so we have the card and inside the card i have to actually add a card body so let me add the card body so that i can get a proper styling and then i have to add the card body all right and now if i save it then we should be able to see it more better all right so now we have this card and we see that there is a no space between the buttons so instead of the margin bottom i'm going to add the margin top all right but one thing we are missing is we have to add the color to our card notes card so for that what i will do is i'm going to go to the card and i'm going to add the style here all right and inside the style what i'm going to do is i'm going to add the background so let me add the background color and the value of this color is already we have added in our notes object so let me add the note dot color and we see that we have the color on the notes card all right so this part is done uh the next thing we need to do is uh we have this but we are not able to create the new cards but before going to that let's add the delete functionality to this application so right now if i click on the delete nothing is going to happen so what i'm going to do is i'm going to have a on click here so let me have the on click all right and inside this on click i'm going to have a arrow function but what i want is when i click on the delete i want the id of my note so what i will do is i'm going to go to my notes list and inside the notes list i'm actually going to pass a event as a prop so let's go here and i'm going to have the handle delete this will be equals to the handle delete all right we have the prop but we have to define the function here so now let's go and let's add the function and then i'm just going to add a constant handle delete all right and this will be equals to the arrow function so let me add the arrow function and this function is going to get the id based on the id we are going to delete the note so i'm going to have the id and the type of our id is string and if you want to see the type of our id then we can go to our model and you will see that we have the id of a type string so how we can actually get the id so for getting the id what we are going to do is uh now let's go and if i hover on this then you will see that we get a problem because there is no prop which we have added in our notes component so if i go to the nodes component and i have to add a prop here so my prop name is the handle delete all right and now we want to identify what is the type of this handle delayed so to identify the type of the handle delete the best way what we can do is let's go to this note list and let's hover on this handle delete and it is returning a void so i will go here and i'm going to add this here all right so now we have added it and what i have to do is i have just going to use this handle delete function so i will just destructure it so let me add it here all right and then i'm going to use it here so let me add it here and i have to pass the id so i have the note dot id so let me add the id all right so now you can see that we don't have any errors since we have added it so we have this id here and if we go to our notes list then inside the notes list we should be able to receive the id so let me do a console.log of the id all right and i'm going to have a the note to be deleted all right i will save it and now let's go and let's check the inspect element and if i go to the console and let's clear the console and if i click on the delete then we see that we get the id so now we get the id now based on this id we can actually delete our note from the notes array so to delete that what we have to do is we need to have access of the set notes in our notes list component right now we only have the nodes but we don't have the set nodes so what we will do is let's go to our app component and inside the app component we are going to pass the set nodes so i'm going to have the set nodes and this is going to be equal to the set notes all right i will save it and if we go here then we have the sets notes so i have just added the set notes here but as soon as i added you will see that we have an error now this error is because we don't have the prop which is in the nodes list so let's add the prop here so i'm going to have the prop as set notes and what will be the type of this so i already told you that if we want to find the type of this so let's go back here and i'm just going to hover this on the set notes so let me add the sets note and we see that the type is react dot dispatch and something something and then it's a type of note array so i'm going to copy this and i will come here and i'm going to add it here all right so now we have it we have the access on the sets nodes now we can actually make use of a delete so what we can do is inside this i'm going to set the notes all right and in this what i want to do is i have the access to the notes i just want to filter the results so let me add the filter all right and in this filter i'm going to have the note individual node and that will be equals to the node dot id should not be equal to the should not be equal equals to the id so i just want to remove that particular node which i have the id of and i have to display all the other nodes all right now if i save it then i get an error and that is because if i hover on the set node then it says cannot find the name set nodes and that is because we have the set notes here but we don't have the set notes here so let me destructure it and i'm going to add the set notes here okay and if i remove this and now let's click on the delete and let's see that are we able to delete our notes or not so i'm going to click on this delete and i see that it's deleted let me refresh it then i'm going to see it again because we have added a default note in our notes list so now our delete functionality is are working now the only thing we need to do is what if i want to add a new nodes so let's go to the create nodes component all right and i'm going to create the nodes component with our snippet so i'm going to have the tsrsfc so i have it and i'm going to add the create notes all right first we are going to create the form to add the notes so if i go back to my react bootstrap so let's go to the react bootstrap and in this i'm going to use the form so let's go to the forms all right and now i'm going to use this form to create my form in the application so let's go to the application again and i'm going to create the empty fragment first so let me have the empty fragment all right and then what i will do is inside the empty fragment i'm going to create the h2 tag and this h2 tag will actually be for the create notes all right and then after that what i want i want to create a form and i'm going to add the class name to the form so let me add the class name of margin top 3 and margin bottom as three all right and inside the form what i want is i will have a form dot group so let me add the group and inside the form group what i want is i want to have a form label so let me add the form label and i'm going to give a label of title all right for the form group i want to give a class name so i'm going to add a margin bottom of 3 and let me add the control id uh form basic what i will do is i'm just going to close this for now and here i'm going to add the form basic title all right then i have the form label and then i want to have the form control so let me add the control all right and inside the form control what is i need to have a type of text so you're going to find all this on the documentation of the react bootstrap so there's nothing to worry about this so i'm going to add the placeholder so let me add the placeholder as enter title for the note all right and then i'm just going to copy this and i'm going to add this for the text and the color all right for the text what i'm going to do is i'm going to change this to text this will label become text i will just remove this and this placeholder will become enter your notes all right and this will be a text area so let me add the text area and which will have the rows so i'm going to have the rows as three all right so i have that and for the last one we have it for the color so where we can actually select the color so i'm going to change this form label and i'm going to add the label here as html4 this will be equal to the color input and let's change this to i'm going to give the notes color all right and for the control the type will now become the color and let's add the id so the id will be color input and we will also need to provide a default value so let's add a default value of hashdfdfdf all right and then we're going to have the title so let's remove this and let's add the title and this title will be choose your color all right so now we have this form and last we need to add the button so let's add the button i'm going to go here i'm going to add the button of type equals to submit all right and i need a variant of primary and i'm going to give a button as submit all right so we have the create notes and now let's use this creates note into our app component so i'm going to go here and i'm going to go to the app component all right and inside the app component what i'm going to do is i'm just going to copy this i'm going to add it here again and i'm going to just change this to create notes i will pass the notes and set notes to the create notes all right i will save it and let's go and let's add the create notes so i'm going to import create notes from components slash create notes all right now you will see that we have a problem and the first problem will be that if we go back to our creates notes component so now let's close this and we don't want the header we don't want the notes list as well so let's close this as well and let's go to here okay and here you will see that what we have is uh we don't have the button imported so let's import the button first so i'm going to have the import button and this button will be coming from react bootstrap slash button all right so we have this and if we see then we have this okay so we have a problem so if i refresh my page then we see we have the title we have the text we have the notes color which is actually not a proper color we have added and we see that we have a problem here default so it should be a default value all right so we have the default value so we can see the default value here and we see the submit as well now what we want to do is first we want to do a validation on it so to do the validation what we are going to do is we want to make use of the used ref so that we can get the value so what i'm going to do is if i will just close this and what i will do is i'm going to write a constant and i'm going to have the title ref and this will be equals to the use rep all right and similarly i'm going to create another constant which will be a text ref and this will be equals to the use ref and the last one will be for the color so i'm going to have the color ref and this will be equals to the used left all right and now as soon as i do it let's add the reference so what i will do i will go here and i'm going to add the reference so let's add the reference i can do this as a self closing tag so let me remove this i'm going to remove this and i'm going to have a set closing tag here and let's remove this as well and i'm going to have a self closing text here all right so now let's add this ref so on this form control i will go here and i'm going to add the ref as title ref so let me add the title ref i'm going to copy this and i'm going to add the reference on the text area so this will get changed to text ref and the last one will be the color rep so let me add the color ref all right so now we have added the reference so if we have the use ref or if you don't know about the used ref then i have a video on it you can click on the card above and jump to it directly but now as soon as i have added the use ref you will see that i'm start getting the errors on the user f that is because we have to define the type so how we can define the type so if i go here and if i hover on this ref then you will see that it is an instance of the html input element or the null so i'm going to copy this and i'm going to add it here so i will go here and i'm going to add this here let me add the null here all right i'm going to do a very similar thing to this one so i'm going to add this here and i'm going to add the angular brace and then i'm going to have the null but for the text ref it's a different because it's a text area so if we over it have the text area so let's go back and let's add the text area so i'm going to add it here and i'm going to add the text area all right and i'm going to define the value as null all right now if i hover on this use ref then you will see that we have a problem and we see that we don't have so what i'm going to do is i'm going to simply add react dot user left so let me add the react dot use ref and for this one also i'm going to add the react dot user f all right so now we don't have the error and we have the references for the ref as well so now what we are going to do is whenever i click on the submit i have to first check or do the validation of the form so what i'm going to do is i have the button which is a type of submit so i'm going to go here and i'm going to have an on submit and i'm going to have here as handle submit all right and and i just need to add an error function so i'm going to have an event here all right and i will pass this event to this handle submit all right and now i have to define this handle submit so i'm going to go here and i'm going to have a constant with a handle submit and this is going to be equals to the arrow function all right and now you will see that it's going to get an event so let me add the event here and what will be the type of this event so if i hover on this event then we see that it is a type of react form event html form element so i'm going to copy this and i'm going to add it here and then this function is not going to return anything so i'm going to add void here so the first thing we will do is let's do the event dot prevent default so that the page will not refresh whenever i do a submit and i will make a check for the title or the text should be empty or not so what i will do is if title ref dot current dot value and if this equals to empty or we have the text ref dot current dot value if this triple equals to empty then in both the cases what i want is i want to return an error so let me return an error so i'm going to do a return error but i don't have anything at the moment to capture this error so what i'm going to do is i'm going to create a state so i will have a constant and i'm going to have the error so let me add the error that error and this will be equals to the use state and the type it will going to have is a string so let me add the string and i'm going to have the empty string here all right and now what i want to return here is i'm going to do a set error and now i want to add the error so i'm going to add all fills are mandatory all right and we see that we have a problem with the use state so let's import the use state or let's add the react dot use state and here we can see that if i hover on it then we see that we have an object is possibly null so that means this current i sometime can also have the null value because we have the null so what we can do is i'm going to add a question mark here all right so that means if we i add a question mark that means it's an optional fill so it's going to check that this value can be an empty or it can have a value so i'm going to add the option here as well all right and now what i want to do next is that if we have the values in our title and in our text and in that case we have to add the new note to our set notes but for that what we need to do is we need to have a set notes in our create notes component so we have to pass it through a prop so let's go here and here if we see that i already have a nodes prop but if you see that i hover on it then it gives an error and for the set nodes it doesn't give an error but that is not the case it always gives the first error so if i remove this then you will see that it's going to give an error on the sets notes now so that means it's an error on both the props so what we will do is let's go here and let's add the prop so the props are very similar to the node slits so i'm going to go to the notes list and i'm just going to copy this so let me copy this and let me add it here so i'm going to add it here and i'm just going to do a d structure so let's add a d structure of note and then let's add a d structure offset nodes all right so we have added that and now what we need to do is uh first we have to do the set error as empty because we have set the value of the error as all fields are mandatory in case of an error but if there is no error then i want to keep this value as empty all right and then i'm going to do a set notes all right so if i do a set notes which is an array and before manipulating the set notes array what i want is i'm going to have i'm going to take all the existing notes and then i'm going to add the new nodes so to add the new nodes what i have is i'm going to have the id first so let's add the id as new date and this will be equals to the 2 string then next what we are going to have is we are going to have the title and to use the title what we can do is we can make use of the title ref dot current dot value all right and then we are going to have the text so let me add the text which will also be equals to the text ref dot current dot value and the next one will be the color so let's add the color and the color will be the color ref dot current dot value and the last one will be the date what is the date when the note was created so this will be equals to the new date and i'm going to have the two string all right i will save it and now let's see what we actually have so if i go here if i refresh my page then we see that we have a problem with the notes and i have added a note here so it should be notes we haven't imported the note so let's import the notes so if i go back here and i'm going to copy this and i'm simply going to add it here so let me add it here so that we have the note model now the only problem we see that we have a problem with the title ref dot current and what could be the problem so if i make it as an optional then it's going to create a problem because our title in the note model is not optional so if we go back here and if i go here then we haven't added a question mark here that it can be an option it can have a value of a string or it can have empty so what we have to do is here i did a bit of research and what i found here is that if i hover on this then you will see that the object is possibly null what we have to do is uh as we have added the value as null initially so the typescript inferred the value of the current as null but we can explicitly set the type so what we can do is i'm going to add a brackets here and i want to explicitly invert the value of the text ref.current as html input element so that i can have the value on that all right now you see that as soon as i have explicitly added the type of the title ref.current then i don't get the error so now we can do the same thing on uh the text ref as well so i'm going to have the text ref and i'm going to has this as html text area element and for the color i'm going to have the same as uh input element so i'm going to copy this i'm going to add this here all right if i save it then we see that we don't have any errors so let's refresh our page and we should be able to see now all right so we can see so what i have to do is i'm just going to try something so let's add a react type script and let's add a test here and i'm going to change the color so let me add the color something like this and i'm going to do a submit so as soon as submit i see that i'm able to add a new note to my notes list but if i click on the delete then i should be able to delete as well now the problem is that when we submit it we are not able to clear these fields so let's clear this field so to clear the title and the text what we can do is i can actually copy this same and when i do a copy of this then what i will do i'm going to add this here and i'm going to add the empty value because this value will actually have a type of string so it's going to take the value as string so if i hover on this then you will see that html input element dot value is a type of string all right and the last thing we are pending is the validation so what i have to do is so if i remove this if i remove this and if i click on the submit then it's not submitting but we are not able to see the error message because when we click on the submit it actually checks the value of the uh title ref and the current rep and set the error message so let's display this error message so i will go here and what i'm going to do here is i'm going to see that if we have some value in the error then in that case what i want is i want to display an alert and this alert is coming from the bootstrap alert all right and here i'm going to add the error so let me add the error and i want the variant of my alert to be danger because this is going to be an error message so i'm going to add danger here all right and now if i click on the submit then we see that we have an error message that all fills are mandatory now let's add the fills so we have the meetings i'm going to add the react type script all right and here i'm going to add that please watch the react type script tutorial and i'm going to change the color so let's add the color so i want to do something color of this one so let's add this and i'm going to click on the submit so we are able to add the new note in our notes list and let's add one more so i'm going to this time do a react type script there are a lot of videos on react plus java script all right i want to change the color i don't want this color and let's have this one color all right and i'm going to submit so we see that we are able to add the notes in our notes list the only drawback of this application that we are not using anything local storage or any storage or the api to store our notes so that's why when i refresh my page we will not be able to see the react typescript and the react javascript notes all right so let me refresh it so i can refresh it and if i add it again let's add the test i'm going to click on submit and now let's delete it so if i click on it then it's deleted so that's all i have and we have built this complete with the help of the react type script and bootstrap components so i hope you like the video a thumbs up is appreciated you can also connect with me via facebook or instagram you can follow me on twitter for latest updates and before you go please don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one thank you thanks for watching

Channel: Dipesh Malvia

Views: 2,916

Keywords: react, typescript, react js, React with TypeScript Crash Course, React TypeScript Notes Application, dipeshmalvia, react typescript tutorial, react typescript, react typescript tutorial for beginners, typescript react tutorial, react bootstrap tutorial, react-bootstrap tutorial, react-bootstrap form, learn typescript for react, react typescript project, typescript vs javascript, javascript, react crash course 2021, learn react in one video, props in typescript react, react channel

Id: HMP5e5utTwg

Length: 59min 48sec (3588 seconds)

Published: Thu Nov 11 2021