ReactJS Fundamentals with a Project
We are going to build a simple project with ReactJS and with it learn many ReactJS fundamentals.
So, head over to your terminal and create a new react project with the npx command.
After that change to the directory, open with VS Code and do npm start.
Our project is running successfully at http://localhost:3000/
Now, as React project comes with a lot of boilerplate code, we will delete some the below shown files.
After that first go to index.js and remove the unnecessary stuff and it will look like below.
Now, we will first create the structure of our project, by creating a components and images folder. Create four files into the components folder as shown.
Next, let’s remove everything from App.js and it’s looks like below.
Next, we will add sematic UI in our project, which we have got from the cdn and add it in the index.html file.
Next, we will update our App.js to show the three components of Header, AddContact and ContactList. Notice that we are also importing them at the top.
Now, in the file Header.js put the below contact. Here, we have created a simple functional component and using some semntic ui classes to show a Contact Manager.
Now, we will add the code in AddContact.js file. Here, we are again using Semantic UI classes and giving two input fields and a button. We are creating a class based component here.
Next, we will add the code in ContactList.js file, by creating a simple functional component again.
Now, our app is showing a nice form in localhost.
Now, from App.js we will first pass and array of object contacts to the ContactList component. This way of passing data is called props.
Now, in ContactList.js file we will get this data as props and loop through it using map and display the name and email of each contact. We are also showing a thrash icon.
Now, since the code is repeating we will put it to a different component. So, in the ContactCard.js file put the code from ContactList. We are also adding an inline style for the trash icon. Also, notice that we are destructuring the props here.
Next, we will change our ContactList.js file to call the ContactCard component with the props as contact.
Now, we will see name, email and a red thrash icon in our app.
We have added an image in the images folder and now showing it in the ContactCard.js file.
We will also remove all styles in App.css and put these basic styles in it.
.main {
margin-top: 5em;
}.center {
justify-content: center;
padding: 10px;
}.ui.search input {
width: 100%;
border-radius: 0 !important;
}.item {
padding: 15px 0px !important;
}i.icon {
float: right;
font-size: 20px;
cursor: pointer;
}
Now, our localhost is looking perfect with user icon.
Now, we will add the logic to enter Name and email from the AddContact.js file. Here, we are first having name and email state in constructor.
After that we have an add function, in which we are checking if all fields are entered and then alerting if all are not entered.
We have added the onSubmit handler in the form. Also, added the value and onChange in name and email fields.
Now, we are able to submit name and email from the form.
Now, we want to remove the hard-coded values of email. We will get the values from AddContact component. Here, we are passing the values through a new props addContactHandler to the parent component of App.js.
We are also making the name and email as empty after passing the state.
Next in App.js we will remove the hard-coded contacts and create it as a state variable using useState. We are also passing the addContactHandler to AddContact component.
Inside the addContactHandler function, we are using the setContacts to set the state.
Now, in localhost we are able to submit the name and email and it been shown in the list.
We will add local storage in our app to store the data, but first for each contact we will also add a unique id. For this we will add the package of uuidv4
Now, we will first import the uuid and after that use the uuid() to add an id to each contact.
We are also using useEffect to first set the contacts array in local storage. We are also using the useEffect to run when the component mounts to get all data from the local storage.
Now, we have again saved two data, which are now also visible in the local storage of the application. Now, even when we refresh the browser, this will be retained.
Lastly, we will create the functionality for the delete button. And for that we need to pass the id from the ContactCard.js file to the ContactList.js file first.
So, we are passing it through the onClick handler and a props named clickHandler.
Now, from the ContactList.js file, we will pass the props back to the parent ie App.js file.
Now, in the App.js file we will finally use the id to remove the contact from the contacts array by filtering it.
Now, we are able to delete the contact from localhost and with this the project is done.
You can find the video for this article in this YouTube link.
