Learn React JS Fundamentals With Project | React Tutorials for Beginners

hey guys welcome back so in this video i'm going to cover react fundamentals and basics that you need to get started with react as a developer we are going to build this contact management application and we are going to break this application into functional components and class components so in this application you can see that we have a header then we have a component which is the add contact and we are going to see how we can handle the input fills of the form then we have the contact list which is going to display all the list of the contacts that we have added so let me add a contact so we will add a contact as test at the rate gmail.com and if i click on add then you will see that the test contact is added in the list and we can also click on the delete icon and we can delete the contacts and you will notice that if we refresh the page we still purchase the contact list and we are storing this contact list in the local storage also if we try to submit the empty form then we have an alert which says all fills are mandatory even though the application looks simple but we are going to cover a lot of react concepts and that is going to help you to build a solid foundation for react skills so if this sounds interesting then watch the video till the end 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 before we start with this project i want to tell you that what all things that we are going to cover in this video so in this video we are going to see how we create the react app how we use the components class components function components what are states props how we pass data between parent to child and child to parent how we handle the events forms and we are not going to cover the api calls and react router so in the next video which will be the announcement of this same project we are going to use the react router and we are going to create the fake apis to fetch the data but for the part of this video we are going to persist our data in the local storage so the first thing what we need is we need to have node.js installed on our machine so if you don't have node.js installed quickly install the node.js on the official website so this is the official website of the node.js you can click on the current version and you can download the installer and you just need to click next next next and you will be able to install node.js on your machine so if you need any help in the installation part then i have a video on it you can click on the card above and jump to it directly so once you have installed the node.js you can go to the terminal so right now i'm going to my terminal and i can simply type node hyphen v and it's going to give me the version of the node.js that is installed all right so now we have installed the node.js the next thing we need to do is we need to create a react app and to create the react app let's go to the github page of react app so this is the github page of the react app and if we scroll down then we will see that how we can actually create the react app so we are going to use npx create react app and the app name so let's create a react app so what i'm going to do i'm going to write npx create react app and i'm going to name as contact app and hit enter and this is going to take some time to initialize and download all the dependencies so we'll take a pause here all right so now our app is created and let's see actually what all happens when we run the npx create react app so when we actually run the create react app it actually downloads a lot of dependencies and we can see here that 1904 packages have been added as the dependencies for this project and it also gives you in the last that what all the commands you can use directly so to start the development server we can use npm start and in order to build our application for a production deployment we can run the npm run build and that is going to minify all our files and if we want to run the test cases then we can use the npm then we have the npm run eject which we don't use generally much and now let's start this application so to start the application we are going to go to the directory so i am in the contact app directory and then i'm going to write nbm start and this is going to start our development environment on a localhost sport 3000 by default so let's wait for it meanwhile let's see the folder structure of the application so we have the node modules where all our dependencies are then we have a public folder then we have a source folder this source folder is the folder where we are going to write all our application code we have a get ignore file to ignore the files and folders then we have the package.json this package.json is containing all the dependencies and you can also see the scripts which you can run so you can run the npm start build test eject then this is the readme file of the project let's go to the public folder so in the public folder we have the fair icon the index.html and in the index.html you will see that we have only one div with an id of root so all our application which we are going to create through react is going to be in this root div then we have some images which we got by default with the project we have a manifest file and robots.txt which we don't want for this project in the source file if we see that we have the app.js we the main is the index.js which is the starting point of this application so in the index.js you will see that we have a react and react dome library imported and here the react dome dot render which is actually going to render our application in the root div which we saw in the index.html so if you see that we are very familiar with this code get element by id so we have took that root element reference and in that root element reference we are actually embedding this app component next we have the app.js which is the default functional component this is a functional component which is created from the react project and we have the css for the css file all right so our development server is started now let's go to the development server and this is the initial app component which we are seeing on the screen so this is how we can run the application now let's go and delete all the default stuffs because we are going to create everything from scratch so i will go to the public folder i'm going to remove all these files we don't want so i'm going to delete them okay and here we don't want this app test we don't because we are not doing anything with the tests at the moment and then we are going to remove all these files all right so let's delete them and let's go to app.js we don't want all this stuff let's remove these we don't have css file anymore all right and then what we are going to do is we are going to create our own folder structure so what we have we are going to create multiple components so let's create a directory of components that will contain all our components all right and we are also going to have some images so i'm going to create one more directory for images so that will have images all right and all our components will be in this component file so let's go and create some components so we have the header component so i'm going to go here and first create the header component so i'm going to go here i'm going to write a header dot js so this is our header component and then we need a add contact dot js then we need the contact list so i'm going to create the contact list dot js then i'm going to create the contact card so i'm going to create this contact card dot js all right and we already have the app.js so let's move this app.js into our component and also move the css into our component all right so this is how our folder structure now looks like we have an index.js file and then we have the app in our component file so let's go to the app.js right and we are going to remove this logo we don't want the logo and we are going to remove all this stuff let's go and return it to and i'm going to say hello wall all right and let's save this okay and now let's see how it looks so if i refresh this page we can see a hello world so for this project we are not going to focus on the css so for the css i'm going to use semantic ui library so let's go to the semantic ui so this is the semantic ui official website you can explore it later on and i'm going to copy this because i'm going to use the css so i'm going to copy this and we are going to add it in the index.html so in the index.html i'm going to remove this manifest and i'm going to add my all right let's save it and let's see how it looks now all right so the font size is and font family is changed so that means our semantic ui is working properly so let me minimize this screen all right so we don't want this index.js now to be open so let's close this let's close this as well and let's close all other components also so let's understand first what is this components and all about so a component is a piece of reusable code which you can be reused at any point and it's an individual piece of code which has its own inputs which has its own outputs and it has its own functionality so this is the app component and we are returning from the app component of hello world and this looks like an html but it's not an html it is called the jsx which is a combination of a javascript and html because you cannot write an html in a javascript file which looks like this and you can do all this is because we are using the react library so let me import the react library here so you can import a react library simply like this go that react all right and then what we are going to do that our application has three components in it so the first one is the header component so let's go and import the header so i'm going to import the header from header so we have the header next we are going to import the add contact so let's import the add contact so i'm gonna do add contact from add contact and the last one we need is the contact list from contact list so we have imported all these three components but right now there is nothing in those component files so what we can do is we are going to actually return so if we want to return more than one div or more than one element so then we can use this parenthesis and then we can actually add a div here all right and this day will return all those components so first it's going to return the header component and you can use this header components as a custom html elements because right now if you see that header it similarly looks like an html element so you can use it either the self closing part or if you want to add some data in it like this then you can actually do the closing of the element tag so right now i'm just going to do a self closing and then i need to have an add contact so i'm going to add the add contact and in the last we will have the contact list so let's add the contact list and you're not going to see anything on the screen at the moment because we don't have anything on them so let's go and write some code in our header contact list and contact so i'm going to go here and i'm going to open my header js my add contact js and my contact list all right and first we are going to do the same import react from react all right and we are going to create an another functional component so i'm going to do a constant header this will be and function expression i'm going to use a arrow function and this is going to return so let's return the header from so i'm going to use the semantic ui so i'm going to use some classes of the semantic ui so let's create a div with a class name so you will notice that you cannot use class as a selector here because class in javascript are the classes for the object-oriented programming so that's why you need to use a class name so this is a difference between writing a simple html and writing a jsx so i'm going to use some classes here ui fixed menu all right and inside them i'm going to create an another class and this is going to contain the ui container center all right and then i'm going to do an h2 and this h2 will be having my contact manager all right so now we have created this functional component and we are getting an error and that is because we haven't exported this header and we are using this header in our app.js so we need to export this so how we can export this we can do the export default and the header all right so now we have exported the header and if i refresh my page then i'm going to see an error and this is obvious because i don't have these components yet so i'm going to comment this out for the moment so if i comment this out now we can see that we have the header so the next thing we are going to do is we are going to create the add contact which will have the contact form so let's go and create the add contact form so i'm going to go to the add contact and this time i'm not going to create a functional component i'm going to create a class component so you can create the component in both the ways so either you can use the function or you can use the class so let me show you how you can do the class component so i'm going to add the react here all right then in order to create a class component you just write the class at contact extends react dot component and this is our class component and in the end we are going to export this so i'm going to write export default add contact all right and while writing the class component you cannot simply just write a return and you have you need to use a render method so i'm going to use this render method and then i'm going to return what i want to return from this render method so what we want from this render method is we are going to create a form with the name and email id so let's create the form i'm going to use a div with a class name of ui main so you don't need to worry about all this css and the classes they are coming from the semantic ui which is actually not relevant for this video then we are going to have the ad contact and after this we need to create a form so let's create a form with a class name of ui form all right and then we need to create a class name of field filled inside the field we are going to create a label and this label will be name then i'm going to create an input of type text name will be named to it then let's create a placeholder so i'm adding a placeholder of name all right and then we are going to create an another input file so what i'm going to do i'm just going to copy this and paste this so let's copy this and let's add it all right so now we have both the fills and let's go and check here so i'm going to uncomment this out again and now let's comment on this one all right and if i save it then we we can see that we have the add contact name email so now we need to have an add button so let's add the button so in the end i'm going to go to the div and here i'm going to add the button all right and for the button i'm going to use the class name ui button blue and i'm going to add add here all right so now we have the button as well and the next thing we are going to do is we will just create a functional component this time again in the contact list so let's add the import react from yeah so i'm going to write a constant contact list is equals to an arrow function and then we can export this default contact list a list and for now we are just going to return it do with a class name ui cell list and then i'm going to write here contact list all right and now let's uncomment this as well so now we have the contact list as well so we have created all the components which we needed and what we are going to do is we are going to style this app component a little bit so i'm going to add a class name and let's add a class name of ui space container all right so now we will see that how we can actually render a list in react so in order to render a list in react what i'm going to do i'm going to create a list here so let's have a list of contacts and this is going to be an array and it's going to have the filled as id and i'm going to name as id1 then it's going to have a name i'm going to give name as the page then it's going to have an email i'm going to give at email as malvia at the rate gmail.com all right and let's create one more list so i'm going to copy this and i'm going to add this let's make this two make this as nikesh and let's make this as nick's all right so now we have two contacts so in order to pass this contacts in the contact list so we can use props so in order to use the props i'm going to write here as contacts as a property name and i'm going to pass the prop which i want to pass so i want to pass my contacts array so let me add the contacts array all right so now i have passed this contact list with a contact as a property and a contact array and this contacts can be accessed in the context list via props so if you want to access the props you have a default parameter here called props and if i actually do a console.log of this props then you should be able to see the props so if i inspect it all right and if i expand this then you can see that we actually get the contacts and now once we have the context object we can do anything with the context object so let's go to the contact list and let's render the list i'm going to create a function here so you can create a function and you can do a render contact list and this function is going to take the props of contacts and we are going to map them this is going to have a contact and then we are going to have an arrow function and inside the contact we are going to return a jsx blocks so i'm going to create a div with a class name of item inside the item i want a div with a class name content inside the content i'm going to create a div with the class name of header and this is going to have the name so we have two properties name and the email id sorry this should be contact dot name so i'm gonna do a contact dot name and the other one is do with a contact dot email so this is going to give us the email address as well all right and then we also want the trash icon so let's go and add the trash icon so i'm going to add the icon here class name as trash alternate outline icon so now we have created this render list function and now we actually want to render this so i'm going to copy this and i am actually going to return this from here so if i hit enter and i add this so in order to reference this we are going to add this so i'm not actually adding this parenthesis because i don't want to execute this function at the moment so i'm just going to reference the render list all right now if i save it then you can actually see that we get the list so this is how you can actually create the list and render the list in react the next thing we are going to do is it seems that this part is being repeating we can actually remove this part and we can create a component of this part so i'm going to go here and so i already have the contact card and we are going to move this piece of jsx into our contact card so let's go and create the contact card first so i'm going to do an import react from react constant card contact this is going to be an arrow function all right and then we are going to export the default contact card and this function is going to return the jsx of this card component so let's add that jsx so i'm going to do a return here and inside the return i'm going to copy this block and i'm going to add this block here so i have added copied this as well all right so now we have this contact card and if we want to add the inline styles so i'm going to add a style here and to add the style you will have the curly braces and inside the curly braces you are going to have another curly braces which will contain our css properties so i'm going to give a color of red to my trash icon and i'm also going to give a margin top so usually when we write the css we write margin hyphen top but we we don't use hyphens while doing the while writing it in the jsx so we use usually the camel case so i'm going to write the top and the stop will be 7 pixel all right but we don't have this contact name and contact email address so we have to get these from the contact list and we are going to use the props again so i'm going to add the props here so let me add the props all right so i will have to pass the props from the contact list so let's go to the context list let's remove this we don't want this now and instead of this we are going to pass the contact card all right and let's import the contact card here so i'm going to import the contact card from contact card and we need to pass the contact here so i'm going to pass the contact and let's pass the contact all right and now we have passed the contact and we will use this contact in our contact cards so here we will do one thing we are going to use a destructuring so we don't have to repeat every time your props dot contact dot name props dot props.contact.email so what i'm going to do i'm going to write a constant here and then i'm going to add the id the name and the email and this will be equals to props dot contact all right and now we can use this name here directly so we can use the name here and we can use the email here all right so we are getting an error that contact card is not defined so let's see what we have done oops i have actually returned wrong it should be contact card and let's copy this and let's add this okay let's go back here contact card contact card all right so now we actually render the contact list properly so now we have the contact card here and we will do one thing we have an image here so let's add the image so if you want to add the images in the react so i already have the image here so let me show you the image so in the images folder i have the user.png so in order to add the user.png here we are going to import the image first so let me import the image user from images slash user dot png all right and now i'm going to add an image here so i'm going to add an image tag with a class name and this image tag will have a class name of ui avatar a mage and the source will be the user which we are adding source will be the user and let's give the alt tag of user and then let's close the tag all right and if i save it then you will see that you have a proper image now and our list properly and we have the the trash icon as well so the next thing we are going to do is we are now going to build the functionality right now we have only set the components and placed all the components now we are going to actually build the functionality so what we are going to do first we are not going to use these two static lists so we will go to the app component all right and in the app component i will actually going to remove this and instead of this we are going to make use of a state so if we are using a functional component then we are going to make use of react hooks i'm going to add here use state so this is a react hook in order to use the states in our functional component we use the react hook so in the react hook how you can do is i'm going to create a constant i will have the contacts and set context and this will be equals to use state and this will be the what will be the initial value of your contact so initially the contacts will be an empty array so let me add an empty array here so now we have created the state of this contacts and what we want is if we add anything the name and the email and if we click on the ad we actually want to add the contacts in the contacts so what we are going to do we are going to go to the add contacts and in the ad context we are actually going to create the state and this state will be the class state we are not going to use any react hook in the class component we can actually create a state directly and we are going to have an object and this state will have the name so we have to fill's name and email so i'm going to add the name and email and in the input what we can do is that we're going to write an event on change so let me add an on change and this on change we have an arrow function so this is going to return an event and i'm going to update the state do the set state so if you want to update the state you use the set state and inside the set state i'm going to have the name and the value of name will be the event dot target dot value all right and we are going to use same state as a value in the input so i'm going to use a value here and this value will be this dot state dot name all right and we're going to do the same thing in our email as well so let's go to the email and add the same thing here and we're just going to change the state as email and this will be get changed as email and now when we actually click on the ad we need to submit this form so for the form let's go to here and so i'm going to write a on submit and on submit i'm going to call a function this dot add so right now we don't have this add functions so i'm going to create a function add an arrow function all right and i'm gonna use event dot prevent default because i'm using a button and i don't want my page to get refresh so i'm using a prevent default and i'm gonna do that if this dot state dot name is equal to equals if it's empty and this dot state dot email if this is equals to empty then i'm going to do an alert and this alert will say all the fills are mandatory and we are going to return this function but if it's not let me console.log so if i do a console.log of this dot state let's see what we have so i'm going to do an inspect here all right so if i write the page here and i'm going to add a the page at the rate gmail.com and if i click on the add then i actually get the object here but i need to pass this object to my app component because my app component is the one which will actually going to add this contact into the contacts area so we saw that we if we want to pass a data from a parent to a child we use the props but if we want to pass something from a child to the parent we can actually use the prop so we are actually going to pass a handler here so i can pass a function as and prop so what i'm going to do i'm going to do a add contact handler will be equals to add contact handler so let me add the add contact handler and once i have the handler i need to define this function so i'm going to write constant handler is equals to and this is going to get a contact from the add contact component this will be an arrow function and i'm just going to do a console dot log contact all right and now let's go and add this in here now the handler which we pass from the app component we can use that handler as prop so this dot prop dot add contact handler and we can pass the state here because our state contains the name and email id so now if i add the page here and test and if i click then i can see that i can get my object in the app.js as well so this is what we wanted but what we want that once we actually click on the ad we want to clear this fields so to clear the field what we will do we are going to set the state so this dot set state and we are going to clear the name and email so let's clear the name and email and save it and let's remove this console log as well all right and now if i pass the page and test the page and if i click then all right so i added the name as empty and it still got submitted so this should become or we don't want any of the fill to be empty so now if i add the page and if i add test and if i click then i get the object in the app.js and my fields are also cleared so this is what we wanted now we have passed the fills now we need to add this fills into our contact state so if i go here i get the contacts here and i'm going to do a set contacts and when you do a set contacts you never directly manipulate the contacts you always use set contacts to update the state so you never directly update the state with this contact you have to use the set contact so what i'm going to do i'm going to take all the previous state which i was there in the context so i'm going to use a rest so i'm going to use contacts and then i want to add the new contacts so to add the new contact what i'm going to do i'm going to simply write the contacts all right so now we have set the state so this is an array so i have to add the array all right and now let's add the page and test and if i click it then i can see that i can actually add it so if i add an another one then i can actually add it but if i refresh it then you will see that these list gets we are not processing the data so in order to process the data we are actually going to use the local storage so for using the local storage i'm going to use one more react hook which is the use effect and what this use effect do is actually whenever the value actually changes the use effect help us to render the component again so i'm going to use the use effect and inside the use effect it actually takes a arrow function and here you are going to add the dependency for us it's the contacts so i'm going to add the contacts here all right oops i added a use effect yep all right and inside this what i'm going to do we are actually going to add this in the local storage so i'm going to use local storage dot set item and inside the set item i need to have a key so let me add a key here constant local underscore storage underscore key and this key will be equals to so let's add the contacts here all right so i'm going to use the key now here so i'm going to add the local storage key contact and i'm going to do the json.stringify the contacts all right so now we have stored it in the local storage and now let's go and inspect that whether we are able to store it in the local storage or not so i'm gonna go to the application tab and inside the application i'm going to go to the contacts so right now i can see the contacts is empty so let's add the page here and click so as soon as i click it then you will be able to see that the data is being entered into the local storage now we also want that when we actually refresh the page we want grab the information from the local storage and display it so for that we are going to use one more use effect so let me copy this and i'm going to add the one more use effect and this will become the get item and we are only going to get the item of the contacts and after getting the data from the local storage i need to store it into a variable so let me store it into a variable so i'm going to do a contacts okay and i need to pass this string so let me add a json dot parse and this is going to parse the string all right so now i have retrieved the data back from the local storage now i have to set the state of set context so let me add the set contacts and inside the set context i'm going to use the retrieve contacts and i only want to do this if the retrieve contract is available so i'm going to add here retrieve contacts this will be an empty array all right so now let's refresh it and let's go to the console all right we don't have anything and now let's add it so i'm going to add the page test and i click it gets added let me add the other one if i click it get edit and let me refresh it so when i refresh it i still able to retrieve it so that means our use effects for storing and retrieving is working very well all right so we have done the addition we have done this now the only thing we need is we want to delete the contacts so if i want to delete the contact what i want i want the id of the contact and right now our contact is not having any id so let's go and inspect at each child in the list should have a unique key and we don't have the unique key because right now we are only having name and email which is not the unique so what we are going to do we are going to use a package to generate the uuid so i'm going to do cd contact app and i'm going to install the npm install uuid v4 and this is going to give us the unique id for each of our contact right so our package is installed and now let's add the let's import the uuid so i'm going to do an import and we are going to use the uuid from uuid version 4 and we are going to use it we actually add the data so this is here what we are going to do we are going to create an object and inside the object i will have the uuid all right and then i need the name and the email so i'm just going to use the rest operator and i'm going to use the contacts all right and now if i refresh it everything is still works the same so now we are actually going to delete the contact based on this id so let's write the delete function so i'm going to write here constant remove contact handler and this is actually going to get an id and then based on the id we are going to create the copy of the contacts first so let me create the copy of contact list and then once we get the copy we are going to filter out the contacts so i'm going to do contacts dot filter and this is going to have a individual contact all right and then we are going to do a return contact dot id is not equals to id all right and now i have the new contact list and now i'm going to change the contacts state so let's do the set state new contact list all right and now i have to pass this handler to the contact list so i'm going to pass the handler here so i'm going to give a property name as get contact contact id and this contact id will take my handler all right so in the contact list we are going to create the function so i'm going to use the delete contact handler so in order to get the id the id is available inside the contact card so inside the contact card we have this icon and on this icon we can actually write a click handler so i'm going to do on click so when you actually click what you are going to do you are going to run an arrow function and this arrow function is going to take a prop of click handler and with the prop it's going to pass the id because it has the access to the id now we have to pass this click handler and this click handler can be passed from the contacts so let's go here and add the handler so click handler will be equals to the we need to pass this here so now we are passing the click handler from the inner child to the its parent and then from parent to its parent which is the contact card it will give the id to the contact list from the contact list is going to give the id to the app js so there is a better way of doing it but for now let's let's stick to the basic part how we can do these stuffs let me write this contact handler so this is going to get the id from the contact card all right and once we get the id what we are going to do we are actually going to use the props dot get contact id and pass the id all right so on the app dot js we have passed the contact id as a property so this contact id as a property is going to get the id from the delete contact handler and this delete contact handler we have actually passed to the click handler which is go to the contact id all right and now if i save it then if i click here then i should be able to get it and it's actually deleting everything so let me refresh it all right and let me add a new so there is something wrong and let's go and inspect it right so if i go here and i see then yeah one thing we need to do is we actually need to add the key here so let's add the key and this key will be equals to contact dot id all right and let's refresh it and let's try it again so i'm going to add the page so something is wrong with the structure so let's go here and make this structure correct so this should be contact all right and now if i refresh it then let's add an another one test and if i click it i'm able to add let's add one more mike mike at the rate gmail.com so if i click it then it's going to add and another one and if we click on it we can actually going to delete and if we refresh it we can going to retrieve it so this app was actually simple in terms of the functionality but the concepts which we have used is is is very important we have used a lot of react concepts we have used hooks we have used states we have used function component class components style the react jsx we know how to use the local storages how to retrieve the data back so in the next video what we are going to do is we are going to enhance this more this time we have used local storages to persist the data but in the next video we are actually going to create the json db and we will store the data in the json db retrieve it using the axios and we are also going to see the react router so i don't want to overwhelm you with the long video everything in the one video so let's go and step by step and that's all i have for this video i hope you like the video a thumbs up is appreciated and if you learned something from this video please like and subscribe and share it thank you thanks for watching

Channel: Dipesh Malvia

Views: 29,904

Rating: 4.9354839 out of 5

Keywords: React, react for beginners, learn react js 2020, react components, react course, javascript for beginners, react state and props, react tutorial for beginners, react fundamentals, react js, reactjs tutorial, learn react js, reactjs tutorial for beginners, react crash course, learn react in 30 minutes, react js tutorial, reactjs crash course, reactjs, react tutorial 2021

Id: QoJGKwo20is

Length: 47min 13sec (2833 seconds)

Published: Fri Jan 22 2021