React JS Tutorial For Beginners With React JS Project Step By Step Tutorial 2024

hi guys welcome back to another video of great estack in this video we are going to learn reactjs from beginning we will learn all the important concepts of reactjs like react components how jsx Works rendering list user State us ref use effect passing props event handling Etc we will also create a project that will be a to-do list app so that you will get the Practical knowledge of react after watching the single 1hour tutorial of react you can easily develop any front-end website in react like portfolio website e-commerce website and social media website so now what is react react is a front-end JavaScript library that is used to build interactive user interface using react we can create single page application so what is single page application let's take the example of YouTube if we open any section let's click on playlist so this website is not reloading and we have navigated to the playlist section similarly if I click on community we have navigated to the community section and the URL path has been changed without reloading the website so YouTube is loading only one time and we can go to any page without reloading the website this type of application is known as single page application in react we use jsx that stands for JavaScript syntax extension where we can write HTML and JavaScript in single file in react we divide the website in multiple components that makes the website development much easier for example sidebar navigation bar header so we can easily develop the website by dividing them in multiple components in react we work with props using props we can easily send the data from one component to another component in react we also works with hooks and pre-built packages using that we can efficiently create any react project in the current time react is a high demand and well-paid skill in the software development industry so in this tutorial we will learn the important concepts of react and we will also create a project which is to-do list app so watch this video till the end and let me know in the comment section which project you will create using react so let's start with the setting involement for react so first we will install the nodejs application for that we will come to web browser and here we will search for nodejs now we will click on download link here we will download the installation file according to system architecture so my system is 64bit so I will click here to download the application now click here to install this app now click on next accept then next again next again next next and install now click on finish our nodejs application has been installed on our system now to verify this one we will open the terminal and in this terminal we will add npm version so you can see the version 9.7.19 white latest now we have to give the name of our project so here we will add first project after that we have to select the our framework so we will select react then we will select JavaScript plus s swc now you can see our project folder has been created now close this terminal and open this project folder with vs code editor so more open with code now here we will open the integrated terminal and here we will type npm install using npm install it will install all the dependencies from this package.json now to run this project we will type npm run Dev command now our project is running just copy this URL address and open this in our web browser so you can see our react project is successfully running on our browser now we will see how react works so here we have the index. file let me hide this one here we have one div with the ID root and here we have the SRC folder and we have one file main. jsx this main. jsx file is our entry point of our react project here we have react Dom that is also known as virtual Dom it is creating a root where we have document. get element by ID and the ID is Root in this root ID we are rendering our components so here we have the app component if I come to app.jsx file this app.jsx file is a function based component where we are returning the HTML tags and in this HTML tag we are using JavaScript that's why it is called as jsx file where we can add the HTML and JavaScript together so first we will clean this file and here we will use RC let's remove this import now our project has been cleaned now we will see how to create the multiple components for that we will come to SRC folder in this one we will create new folder and here we will add the name name components within this components folder we will create the multiple components of our project so first we'll create new file and here we will add Navar do jsx and the Navar file has been created now we can convert it into component using rafc so we have two types of component which is functional component and class-based components so we will be using functional waste component in all our project so we will use RFC let's remove this import now the component is ready and in this one we will type Navar now if I come to browser there is no change here because we have not mounted this component yet to mount this component we will come to app.jsx file and here we will add Navar select this snipet after selecting it it will automatically import our file now we have to close this component SL closing Arrow now we will come to web browser so here you can see the Navar it is in the center because we have not removed the CSS properties so come to app. CSS file and clear this one come to index. CSS file and let's clean everything from here now the navard is on the top similarly if I want to create multiple components like sidebar footer Banner for that we will create multiple files in this components folder and we can convert that file in component using RFC and we can mount that component in app.jsx file after that we will delete this nav bar. jsx file and remove this Navar remove this import now we will see how jsx file works so in this function before this return statement we can write the JavaScript logic so if I create let X is equal to and here we will add any name greatest Tack and if I want to display it on our website so within this D we can use this variable to use any variable in jsx we will use curly Braes in this curly Braes we will add the variables name so we will add X now save this and if I come to the website you can see greatest stag over here that is coming from this varable now let's suppose we have aray and in this aray we have five strings user one 2 3 4 5 so we have five users now I want to display individual users on the web page for that we will use the map method so here we will use the curly and in this one we will use add a do map in this map method we will pass one Arrow function here we will send the individual user then we will return that user whatever we will return here that will be returned multiple times based on the number of users in this array so here we will return one h2 tag and in this h2 tag we will add codly Braes and here we will add user now we will get all users one by one and we will return it in h2 tag so you can see we have the user 1 user 2 user 3 user 4 and user 5 like this we can render our components multiple times according to our data now we will see how we can do the conditional rendering for that let's clear this one remove these variables and array and here we will create two H1 tag after that we will add boy and in the second one we will add girl and here we will create one variable let data is equal to let's add by in string now I want want if the data is y then this first H1 will be displayed and the second one will be hidden and if this data is gir then the first one will be hidden and second one will be displayed for that we will use the conditional rendering for that let's add the curly Braes and here we will compare our data first we will compare the data using the Turner operator so let's add data is equal to Bo if the data is equal to Bo then the first one will be displayed so we will add it here after this question mark if it is false then the second tag will be displayed so we will add it here after this column if I save this one and come to the web browser you can see the boy is displaying because the data is boy now if I change it to good then the girl is displaying here now this data is getting compared here and if it is why the first H1 tag is displaying if it is not equal to Y then the second H1 tag is displaying now we will see the event handling so let's clear this one here we will create one button tag and in this button we will add the button text click me and here we will add one on click function on this on click event we will run a functions so let's create one function here we will add const vdn click equal to one Arrow function to run this function in on click we will pass one Arrow function within this Aro function we will call this BTN click function here we will type BTN click parenthesis so this function will be called so when this button is clicked we will log one message in the console so we will add console.log clicked now if I come to browser and we have the button here let's open the console Tab and if I click on this button you can see it is displaying clicked if I click again you can see it is clicked two times now let's create one variable let X is equal to 0 and before this button I want to display that variable X and when we click on the button the variable value will be increased by one so here we will add x++ now save these changes and now you can see we have zero before this button and if I click on this button if I click here you can see it is displaying clicked in the console but the value is still zero so if I want to display this variable in console we will add console.log X if I click on the button you can see it is displaying clicked and one if I click again you can see it is displaying clicked and two so this value is increasing in console but it is not displaying on the browser because the react interface gets changed only when the state is changing and we have declared it as a normal variable so by updating this variable our UI is not getting updated for that we will use the user State hook so instead of this variable we will use one user State variable to create a user State variable we will type const square bracket and in this we will add the variable name so the variable name is X and then we will provide one function so let's add the function name set X and we will initialize the value using user State variable so we will add user State select this user state from the snippit so it will be imported automatically and in this one we will add the initial value of this x so let's initialize this x with zero so we have one variable X and the function set X now if I want to change the value of this variable then we cannot change this value directly like this we have to use set X function to update the value of x so remove this increment and here we will type set X function and in this one we will pass a new value so the new value will be x + + 1 if the X is0 then x + 1 will be 1 so this setex function will update the value of x now if I come to browser and click on this button you can see the interface is also getting updated because we have not added the normal variable we have used the user State variable now we will create a new component So within this component folder we will create create a new file first component do jsx within this component we will use rafc if this rafc option is not coming in your vs code then come here in extensions and we have to install one extension that is known as es7 react Redux snippit after installing this you will get this snippit rafc now click on this rafc and now we will Mount this component in app.jsx so in this div we will add first component close this component now the component has been mounted remove this import and now we will learn how to pass the data from one component to another component now we will pass this x variable that we have created using user State variable to pass this x value in the first component we will use the props to pass the props we will use data is equal to and in this data we will pass the value of x save this file now we have passed the props data is equal to X in this first compon component now let me remove this X from here and we will display this x using this first component jsx file to get the value from the props in this component we will add props then we will type curly bres and here we can add props Dot and the name that we have passed for our props so the name is data so let's add data then save this now you can see the number zero this number is coming from the first component that we have mounted in our app.jsx file if I click here you can see the value is getting updated like this we can pass our props or we can also use the D structuring to use the D structuring instead of this props we will use the cut early Braes and the name of the props that we have passed so we will type data and here also we will write data now if I save this one still you can see this number is displaying on the web page and it is getting increased because we have done the destructuring in the props parameter now we will learn how we can pass a function using props so here we have a function set X now we will pass this function using props so here we will add the props name that will be FN and in this one we will pass the function that will be set X now we will save this now we will destructure that function in this first component so we will add one comma then we will add the name that we have provided for that props that will be FN now we have this function here now we will create one button and in this button we will add the name set 10 and here we will add on click function in this one we will pass one addo function and in this one we will call our function and in this one we will pass one value that will be 10 now save this and come to the browser if I click on click me button then value is getting increased by one and if I click on set 10 the value of the data becomes 10 it means the function that we have passed through props that is working successfully now we will learn how to use the used rep to get any element so first we will clear this one and first we will create one input tag type will be text and after that we will create one button and the button text will be submit now we have input field and button now I want to display the input field data in the console when we click on the submit button for that we will use the US ref us ref is a react hook using that we can take reference from any element for example we will create one variable const now we will name this variable input ref equal to use ref select this use ref from snippit and in this one we will type null now we will link this input ref with the input field so we will type ref is equal to input ref in curly Braes now our reference is linked with the input field now we have to add a onclick event in this button so here we will add on click equal to and in this one we will pass one Aro function and here we will add the console log so let's add console log and in this log we have to get the value of this input field so for that we will use input ref dot current do value now save this now if I add anything in this input field working click on submit button you can see it is displayed in the console like this we can use use ref to get the reference of any element now if I want to display only input ref in the console and click on submit button you can see it is displaying one input element where we have lots of methods and functions available now we will create one user State variable so here we will add const and in this one we will add one variable name data then we will add the function name that will be set data equal to user state and we will initialize with one empty aray we will render this aray after this button so here we will add curly bres data that is an array then dot map and in this map we will pass one Arrow function here we'll pass the individual data so we will add the item and we will return this item in the S2 tag so in this S2 tag we will add the item now we are getting one error missing key prop for element to solve that we will add comma and index index number of this item and in this S2 tag we will add the key property and in this key property we will pass index now the error has been resolved now in this areay we don't have any element here also we don't have any element now what I want is if anyone types any data in this input field and click on the submit button that will be displayed below this input field for that we will remove this console.log from this on click function and here we will add set data so as it is one AR so we will use one spread operator so in this one we will add a square braet triple dot data then we will append our input field data so to get the input field data we will type input R do current do value now if I save this one and here if I type first and click on submit it is displaying below this input field so the text from this input field is getting saved in user State data and by changing the state react is rendering this and displaying on this web page similarly if I type second click on the submit button it is displaying second using these basic concepts we will create the Todo list app in reactjs first we will clean this project so we will remove this one and remove these variables and remove this import now we will delete this component folder and delete the assets folder also now come to index.html file here we will replace the title so the title will be to-do list save this file now the react project is clean now we will create the folder structure for our to-do list app first we will create new folder and the folder name will be components in this folder we will create another folder with the name Assets in this components folder we will create another folder with the name CSS in the assets folder we will store the assets like images text and in this CSS folder we will place the CSS file of our components so we will create the component in this components folder and the file name will be too. jsx and here we will use our AFC to convert it into component here we will remove this importer statement after that we will create another component in this components folder and the name will be to-do items. jsx here also we will use ad AFC and we will remove this import statement now we will create the CSS file for these components so come to CSS folder and here we will create new file and the file name will be too. CSS after that we will create another file that is too items. CSS now now we have to import these CSS file in the components to import that we will add import then we have to provide the file path of the CSS file so we will type do/ CSS folder slash and the file name that is too. CSS and save this file now come to to-do items . jsx file here also we will import the CSS file so we will type import do/ CSS folder SL too items. CSS and save this file now we will Mount this Todo component in the app component come to app.jsx file and here we will type opening Arrow too select this too from the snippit and close this/ closing Arrow now the too component has been mounted in the app component now we will come to too. jsx file and here in this we will provide one class name we will add the class name too in this one we will create one div with the class name to-do header so let's add div. too header within this div we will add to-do list after this D we will create another D with the class name too add so let's add div. too add within this D we will insert one input tag so let's add input type will be text then we will provide the placeholder so the placeholder will be add your task then we will provide one class name so the class name will be too input after this input field we will create another div with the class name to do add button so let's add div do to do at BTN and in this div we will type add after this div we will create another div with the class name to-do list in this D we will map the Todo data so we will add the CSS properties for this to-do class name come to too. CSS file and here we will add do too here we will add width of 600 pixels minan height 732 pixel border radius of 20 pixels background white margin of Auto margin top 174 pixels and display Flex Flex Direction column padding 0 pixels and 44 pixels padding bottom 30 pixels margin bottom of 100 pixels after that we will come to index. CSS file and here we will add some CSS properties for the body tag so we'll add the body and let's add the background down this color code and save these changes now you can see the container here where we have the input field now we will add the CSS properties for this to-do header so here we will add that class name to do header here we will provide margin top 84 pixel color this color code font size will be 3 6 pixels font weight 600 line height of 34 pixels now save these changes now we will add the CSS properties for this too add here we will add display Flex justify content Center align items Center margin top of 45 pixel now save these changes now we will add the CSS properties for this input tag in this one we have the class name Todo input just copy this class name we will add this class name here in this CS file and here let's add the CSS properties border radius of 50 pixel background the color code border none outline none width of 576 pixels height 80 pixels padding left 35 pixels and font size 20 pixels so this input field looks good now we will add the CSS properties for the add button so here we have the class name too add BTN write this class name to do add BTN and here we will add border radius of 50 pixel background this color code width of 187 pixels height 80 pixels display Flex justify content Center align item Center margin left minus 100 pixels color white font size 26 pixels and font weight 600 cursor pointer this button is also looking good after that we will create one user State variable where we will store our to-do list so here we will add const and the variable name will be toos and the function name will be set toos equal to user State we will initialize it with empty array after that we will create one input reference for the input field so we will add the const input ref is equal to use ref in this reference we will type null after that we have to add this reference to input field so in this input field we will add ref and in this one we will type input ref after that we have to add the function for this add button so here let's add const add equal one Arrow function now we will execute this function when this button is clicked here we will add on click event and pass one Arrow function and call this add function within this event so we will type add now here we will type set todos in this set todos we will use a spread operator so in the old todos we will add one object in this object we we will be having Tod do number too text and TOD do display so first we will add number and in this number we will provide any number so first we have to add one variable let count is equal to0 and now we will use this count in the number so we will type count after assigning the count we will increase it by one now we will type text in this text we will save the values from the input field so here we will type input ref do current do value after that we have to add display for now we will use one M string now this objects will get added in the todos after that we will clear the input field data so here we will add input ref. current. value is equal to empty array when the todos gets updated we will display that in console for that let's type use effect and in this one we will pass one Arrow function after this Arrow function we will add the comma and we will add the state name that is todos when the todos gets updated then this function will execute so here we will add console.log and we will print the toos use using this use effect when the todos gets updated we will log the message in console now save this file and now we will come to the web browser and we will open the console now here we will type anything in the input field let's type first and click on the add button you can see in this are we got one object the number is zero text is first and display is one empty string if I add one more second you can see in this aray we have two object here we have text first and text second we have the number zero and one now using this data we will render the to-do item component so first we will come to to-do item items. jsx file and here we will add one class name to do items within this div we will create another div and let's add the class name Todo items container in this div we will insert one image tag let's create a copy and in this image tag we will add one check icon and cross icon so we have to import these icons so come to assets folder and select reveal in file explorer here we have these icons we will copy this one and we will paste it in our first project SRC folder components assets and P it here so here in this assets folder we have three icons now we have to import these icons in our to-do items. jsx file for that we will type import then we will type the name of the image that will be tick from and path of that image file so here we will add do/ assets folder SL and here we will type the file name tick.png similarly we will import other two images so in this one we will provide not tick icon and in the second image we will provide tick icon after that we will create one div and we will provide the class name Todo items text after this dip we will insert one image tag and in this image tag we will use cross icon now we will save it and in this div we will render the to-do items according to our Todo data so here we will type cly bres and in this one we will type todos do map and in this we will pass one Arrow function and here we will pass the individual item and index number after that we will return the to-do items component so we will type to-do items and close this one after that we will pass the props and in this props we will pass the number that will be item do number after that we will pass display and in this one we will pass item. display and after that we we will type text and in this text we will pass item dot text and here we will pass the key prop so in this one we will pass this index now we will use these props in this too item components so for first we will D structure it here we will type number display text after that in this div we will use text and save this now we have the to-do items rendered according to our to-do's data if I type here third and click on ADD button you can see the data we have the third entry and here we have the to-do list now we will add the CSS properties for the to-do item components so first We'll add the CSS properties for the to-do items class name come to to-do items. CSS file and here we will type too items let's add display Flex justify content space between padding of 16 pixels and 0 pixels align items center after that we will add the CSS properties for the to-do items container here we will type display Flex now we will add the properties for the to-do item text here we will type padding left 16 pixel color this color code font size of 22 pixels now we will add the CSS properties for the cross icon so in this IMG tag we will add one class name and let's add the class name to do items cross icon now just copy this class name write it here here we will add cursor pointer padding right of 25 pixels now after adding these to-do list if I refresh the website all things has been removed so we have to solve this problem for that let's come to too. jsx file and here we will use use effect and in this use effect when the todos gets updated we will create one local storage and in that local storage we will store our todos to create the local storage we will type local storage dot set items and in this we will pass the key name so the key name will be todos and in this one we will save the todos data but to store the data in the local storage we have to convert it into string so to change it into string we will type json. stringify and in this one we will pass toos so when the todos gets updated that will be stored in the local storage also now to check the local storage we will come to browser and click on application then we have the local storage option click here so here we have todos key and the value is empty if I type first and click on ADD button so here you can see the data has been stored in this browser if I refresh the website still it's get removed to solve this one here we will create one more use effect in this use effect when the page gets reloaded we will get the data from the local storage and we will store it in our user State variable for that we will add set toos local storage dot get items in this one we will pass the key name but this format will be a string to convert it into Json we will use json. pars so now we have two use effects to run this use effect first we have to insert the Second Use state code in the set timeout so here we will use set timeout and here we will set the timeout 100 milliseconds and in this one we will use our statement after that we want this use effect to be executed on page reload so here we will add comma and a square bracket save this and here if I add first click on ADD button so we have the local storage updated now if I reload the web page still you can see the first this data is available now if I add the second one second so in this data you can see number for both the data is zero that we are going to use as ID so to fix this one let's come back after cleating this input box we will add local storage do set items and in this local storage we will create one storage for our todos count and in this one we will store the count variable after getting the to-dos data we will also take the cter data and we will set it into count variable so here let's add count is equal to local storage dog items and here we will type the key that is to-do's Count now we will save it now let's delete it and reload the web page and here if I type first and add button now the count is one if I type second now the count is two and the number is 01 and if I reload the page still you can see the count is two and here we have 0o and 1 if I type third now we have the different numbers 0 1 2 after that we have to use this display property to display the tick and untick icon so here we will use the Turner operator let's add display if the display is empty string then we will use the non-tick string cut this one and paste it here if the display is not empty string then we will return the second image tag that is Tick icon now save this file now we have the untick icons now we have to add the logic when we will click here the display property will get changed and this icon will be converted into tick icon so here we will create one function and the function name will be toggle and here we will use the to-do's data from the local storage and save it in the variable so let's add let data is equal to and here we will type local storage. get item and here we want to-do's data we will get the data in a string so we have to pass it so we will add json. parts now we got the data now on this div we have to add the on click event and in this one we will pass one Aro function and here we will call the toggle function now when I click here this display should change so for that here we will pass the number that we got through props so we will type number using this number we will find that entry from this data for that we will use the for Loop let I is equal to 0 and here we will add the condition I less than data do length then I increment by 1 in this for Loop we will use if statement here we will type if data and in this one we will pass the index if data index do number is same as the number then we have to modify that data so here we will add one more if a statement and in this one we will check data I dot display if it is empty string so we will change it and add a new value and in this one we will type line through else if the display property is something else then just copy this one and we will make it empty string after this else statement we will add the break statement so the task gets completed and it will terminate the for Loop we have modified the data after that we have to set the data in toos for that we have to pass the set todos function in the toos items component so here we will add set todos equals set toos after that we will use the DS structure so let's add set todos now we will use this set todos after this for Loop set todos and in this one we will pass the data that we have modified now if I come to web browser and click on this one in this data you can see it is displaying display line through if I click again it again becomes empty string and you can see the icon is also getting changed from tick to untick now we will use the logic when it is checked or ticked then we will add the CSS properties of line through on this text for that we will convert this class name in template literal we will add it in curly bres then we will use the back tick and after after that we will add the dynamic class name so we will use the dollar sign C lies and here we will type the display property if we click here we will get the class name line through and if I click again it will be unticked and we will not get any class name now for this line through we have to add the CSS properties so come to the CSS file and here we will type do line through and in this one we will type text decoration line through solid this color code and 3 pixel now we have added this CSS properties for this class name now if I click here you can see one line through effect on this text now the display data has been modified now if I reload the web page still the data is same because we are using the local storage to save the data in the browser now we will add this properties for this cross icon so that if I click here this entry should be deleted for that we will come to to-do items. jsx and here we will create one Arrow function and the function name will be delete in this one we will pass the prop that will be the ID number and using this number we will find the entry and delete that so first we need that data so let's copy this one after getting the data we have to find the entry with the help of this number for that we will use do filter method so we will type data equal to data. filter in this method we will pass one Aro function in this data we will pass the individual to-do and here we will filter if too do number is not equal to number then we will save that data and if this condition is false then that entry will be removed now we will set this data in todos so we will use set todos and in this one we will pass the data now we will link this function in the cross icon in this image tag we will add onclick event here we will pass one Arrow function and call that function that is delete here we will pass the number that we got through props here we are getting we cannot use the keyword name in the function name so we will rename it so let's change the function name to delete too and here also we will update delete too now save this and if I click on this cross icon the entry has been deleted and it has been removed from the local storage Also let's delete the another one you can see the local storage has been updated and the to-do list has been removed now if I reload the web page now we have only one data if I add one more entry to do completed now the entry has been updated in the local storage if I refresh the website still it is available in this video we have learned the basic concepts of react and using these Concepts we have created the to-do list so using these reactjs basic concepts you can create your own react project so let me know in the comment section which project you are going to create I hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this video and also subscribe my channel greatest stack to watch more videos like this one thank you so much for watching this video

Channel: GreatStack

Views: 99,333

Keywords: react js project, react projects, react js tutorial, react js beginner tutorial, react js tutorial for beginners, react js full tutorial, react js step by step tutorial, react js complete tutorial, react js tutorial project, react js tutorial with project, react js project tutorial for beginners, complete react js with project, react.js project tutorial, react js full project tutorial, web development

Id: gbAdFfSdtQ4

Length: 64min 48sec (3888 seconds)

Published: Mon Oct 23 2023