Birthday Reminder App | Building Real Project using React

so hi guys welcome to my youtube channel in this tutorial video we are going to create a birthday reminder with the help of react so here's the live example on my browser screen which you can see up here this is the birthday reminder project that we are going to create today we can see we are having a heading we are having the user's image user's name user when the user was born and we can see at the down below after our data we are having a button that is being displayed as clear all when the user clicks on the clear alt button the old data will be cleared that means the all data will be deleted as you can see when i just click on the button all data are deleted now when i just refresh my page the data will be back when i click on it back it's going to be deleted so this is the project that we are going to create in our today's tutorial video if till now you haven't subscribed to my youtube channel please do not forget to subscribe to my youtube channel and hit the notification bell so without wasting the time let's start creating our birthday reminder so here's my project that i'm going to create today so i'm going to open my vs code editor as you can see my project is successfully running all of the dependencies that i need for running my project is already installed it's going to save our time in our video now i'm just going to close my terminal because i don't need it all right so in this is our source folder in which i'm having all of the files that is being displayed in our browser as edit source app.js and save to reload the page so now it is saying me to edit inside my source folder there's an app.js file i need to edit that and our page will be changed so for that i'm going to come to my vs code editor up here in my app.js i'm going to select it and i'm going to remove the paragraph which is given up here and i'm going to change it to birthday reminder all right now let me save it and let me come back to the browser up here and now as you can see up here the paragraph is changed to birthday reminder this was just a basic review on react app so now let's start working on our project so for working on our project i'm going to delete all of the files that are included in our source folder so for deleting it together i'm going to press ctrl and i'm going to select all of the files given up here i'm going to select and i'm going to press the delete button on my keyboard to delete all of these files and i'm going to move it to the recycle bin all right so now when i come to my browser as you can see i'm getting an error that is being displayed up here that is saying failed to compile the code so what i'm going to do is i'm going to drag my browser screen at the right hand side and my vs code editor on left hand side so it will be really easy to see what is going live all right so i'm just going to make it a bit smaller and now what i'm going to do is inside my source file i'm going to create a new file that is going to be named as index.css in which we are going to be having all of our css code that is used in our birthday reminder so what i'm going to do is other than styling it i'm going to come to my sublime text editor in which i'm having already the code that i have styled in our birthday reminder project i am going to select it copy and paste it inside my css file that's it now let's save it so now i don't need my index.css file to be opened i can close it out now i'm going to create a new file that is going to be index.js so let me create that file up here so inside my index.js i'm going to be importing my react project from the react so import react from inside the single quotes i'm going to provide a pair react and after that i am going to be importing the react dome why we are going to import our react dome we are going to import our reactor so our component that is going to be our main app.js file we can render it in our root id which is there inside our public folder and we are having the html file i will show you let me come back to my js file up here and import the react dom react hyphen dom and now i'm going to end it with the semicolon now i need to add my css file also up here so for importing my css file i will be using the import single quotes concatenate operator forward slash and my file name that is index.css all right that's cool so now i'm going to be using the react dom dot render inside this render i will be using the react.strict mode up here all right inside this react.strict mode i'm going to import my component but before that we need to render this component in our html id so we can display it in our front end so when i come to my html file up here when we scroll down in our body section we can see up here we are having a div in which it is we are having an id of a root we are just going to include our app component in this div so for doing that i will be coming up here and i will be using the document dot get element by id and this i'm going to be having the double quotes and i will be providing the id that is provided to my div that is my route all right so now if i need to display anything inside my div which is having the id of a root i need to render that component in my react.strict mode so how will i do that i need to create a component that means i need to create a javascript file up here so for creating that i'm going to come inside my source folder right click create a new file and i'm going to name it as app.js inside my app.js file i will be importing my react all right comma because i will be using my use state hook in this project so i'll be importing my use state also from react now let me create a function up here that is going to be our app function and inside this app function if we are creating any kind of a function it should return something so i'll be having a return up here that will be returning a h1 tag that will be saying hello world now i need to export this app.js file so we can import it in our index.js so for exporting it i will be using export as a default file and i will be adding my function name that is app now i can just import my app.js file in my index.js file with any kind of name because it is exported as a default so when i come to my index.js file and i can access it up here by using the command import app from single quotes concatenate operator forward slash and your file name that is app now if i need to display it in our div which is having the id of a root inside my strict mode i'll be having less than sign my file name that is app i'm going to be having a forward slash and the greater than sign now when i just i save it now it should display me hello world in our browser screen so now when i reload the page it should display me hello world and it is being displayed up here that's cool that is really really amazing now let's start working with our project so our index.js in which we are importing our app js file is finished now we can just close our index.js file because we no need to work with it more so now we are going to be having the data like the user's image user's name when the user was born so for creating the data i'm going to create a new file inside my source folder that will be named as data.js inside this data.js i will be having x i'll say them to export it as default so we can access it with any kind of a name we like and inside this array we are creating an array in which we are going to be having an object in that object we are having a unique id for every single list item so the first item is having the id number one we are having a name that is bertie yes all right then we are having the age of the people that is going to be 25 and we are going to be having the user's image so we can just select the url that i'm having up here i'm going to select that so for selecting it i'm going to open my google up here select the url and copy and now what i'm going to do is i'm going to create image up here and paste the url in it so now we are having a unique key to the value of it the id is one the name is the user's name the age of the user is 25 and the user image key is having the user's image url so same thing i'm going to be doing with our three list items we are having an object in which we are having all of the users detailed store in it i am going to add a comma up here and after that we are going to be having all of this two more list items up here that looks really really cool and unique now our data dot js work is also finished so no need to do anything up here so now what we are going to do is we are going to come inside our app.js file in which we are going to display our heading and we are going to display our clear all button so for doing that inside this return i'm going to remove this h1 tag because we don't need it anymore okay inside this return i'm going to create a main tag inside this main tag we are going to be having a section which is going to be having a class name for styling it that is going to be a container mostly in html if you have seen for adding a class we will be using only class but if but if you are using the html in javascript you need to add class name all right so we are going to be having this section inside this section the first thing that we are going to display is our h3 tag in which we are going to display our heading that is going to be displaying birthday reminder or we can say birthday today and now when i save it it should display me birthday today in our container that's cool now what we are going to do is we are going to create a button which is going to be displayed as clear all so let me create a button up here which is not going to be having any kind of a class but we are going to display a text that is going to be clear all now when i save it we are having a clear all button that's really really cool and amazing now what i'm going to do is i'm going to create a new file up here that is going to be list dot js list.js file inside this file i'm going to be importing my react so let's import react from react and after that i'm going to create a component up here that will be named as list with the help of a fat arrow function and if we are creating any component or if there any component is there it should return something so we'll be having a return up here and we are going to export it as default so we can access it in our app.js file and we are going to provide the name of our component that is list now inside this return what we're going to do up here is that we are going to be using the react dot fragment up here or you can directly use the less than and greater than sign but it's better if you're using the react dot fragment up here all right so now we have created a react.fragment in it now we can just save it now we can come to our app.js file inside this app.js file we are having all of our users data in our data.js file in which we are having an array of an object we can import it up here import data from data all right that's cool and i can just name it as small data now what i'm going to do is before my return i'm going to create a use state hook so for creating it i will be having a constant square brackets and i'm going to name it as people and we're going to be having second argument that is going to take set people that equals to we'll be using our use state hook and we are going to store our data that is in which we are having all of our users data or we can say the people's data up here and we are importing it with the name of a data so i'm going to select it up here inside my use state hook and it is stored inside my people variable that's cool now let me save it okay so now what i'm going to do is i'm going to come to my list dot js file up here and up here i'll be having a curly braces and i'm going to save them to select my people i'm going to save them to select my people and i will be using the people dot map function up here people dot map function up here all right because it is an object and i need to display the user's id name image in a proper way so i'll be using the map function in which we are going to be having the another callback function up here or you can say a fat arrow function in which we are going to pass an argument that we are having a people in it every single person up here so i'm going to provide it an argument that is going to be named as person now let me create a cost up here that means we need to get the id we need to get the name we need to get the user's age and the user's image and that is there inside that is for our single person so i'll be passing my argument up here and now we are going to return now we are going to return our article up here which is going to be having a key so the react will understand if a single item is deleted the id that we have provided to that specific list item so the react will understand that this item is deleted or this item is modified so the key we are going to provide up here that is going to be id and now we are going to be adding a class name for styling our article that is going to be person and now how we need to display it we need to display the image and up here we are going to be having a source and the name of the property that is image and the alt up here we're going to be having in which we're going to display the name of the user if the image is not being displayed and after that you're going to be having a div in which day we are going to be having an h4 tag for displaying the user's name and then we are going to be having a paragraph tag to display the user's age all right so now when i save it it's not going to display me anything because we have not yet called my list component in my app.js which is rendering in my index.js file so now what i'm going to do is i'm going to come to my app.js file and call my list component after my heading and now when i save it as you can see we are getting an error that is saying the list is not defined because the list is not imported up here so let me import my list up here now let me end it with a semicolon and save it now when i save it up here we can see up here that it cannot read the property undefined of a map in which we are using person so how can we fix that so for fixing that inside this list item i'm going to select my people that is my variable name in which i'm having all of my data okay that equals to we are going to be having a curly braces and i will be passing my people back here so the list dot js file will understand which is the people this is our people up here that's going to be our property and this is our people that is going to be our function that we are including in our list dot js file so now when i save it it should work perfectly as you can see when i'm saving it this is our birthday project that really looks amazing we are getting the data from our data.js file awesome but now we are going to be adding the clear all functionality as you can see when i just click on the clear alt button nothing is happening so let's add one click function on it so on this button when the user clicks on this button we are going to be having a curly braces in which we are going to be having a call back function that means we are going to be having a parenthesis and a arrow function up here because we are going to be setting our use state hook up here we are just going to set our people because in our people variable we are having all of our data we can even edit it with our second argument that we have provided in use date hook that is our set people i can just select it and what i'm going to do is inside my data of course the objects are there inside an array what i'm going to do is inside this parentheses i'm going to pass an empty array what i'm saying up here when the user clicks on the button just set my people variable to an empty array that's cool now when i just click on the clear all button the data will be disappeared as you can see when i just click on it the data is disappeared this is how we create a birthday reminder with the help of react if you like the tutorial video please do not forget to subscribe to my youtube channel and hit the notification bell because i'm going to create some awesome projects on react this week thanks for watching and i will see you in the next video

Channel: Eazy2Code

Views: 139

Keywords: react, birthday reminder, react js, javascript, javascript project

Id: m3I1Z4yCBIg

Length: 18min 57sec (1137 seconds)

Published: Sat Nov 06 2021