ReactJS Fundamentals with a Project

Photo by Surface on Unsplash

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.

create-react-app

After that change to the directory, open with VS Code and do npm start.

npm start

Our project is running successfully at http://localhost:3000/

localhost

Now, as React project comes with a lot of boilerplate code, we will delete some the below shown files.

Files removed

After that first go to index.js and remove the unnecessary stuff and it will look like below.

index.js

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.

Files

Next, let’s remove everything from App.js and it’s looks like below.

App.js

Next, we will add sematic UI in our project, which we have got from the cdn and add it in the index.html file.

index.html

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.

App.js

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.

Header.js

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.

AddContact.js

Next, we will add the code in ContactList.js file, by creating a simple functional component again.

ContactList.js

Now, our app is showing a nice form in localhost.

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.

App.js

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.

ContactList.js

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.

ContactCard.js

Next, we will change our ContactList.js file to call the ContactCard component with the props as contact.

ContactList.js

Now, we will see name, email and a red thrash icon in our app.

localhost

We have added an image in the images folder and now showing it in the ContactCard.js file.

ContactCard.js

We will also remove all styles in App.css and put these basic styles in it.

.main {
margin-top: 5em;
}

Now, our localhost is looking perfect with user icon.

localhost

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.

AddContact.js

Now, we are able to submit name and email from the form.

name

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.

AddContact.js

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.

App.js

Now, in localhost we are able to submit the name and email and it been shown in the list.

localhost

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

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.

App.js

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.

local storage

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.

ContactCard.js

Now, from the ContactList.js file, we will pass the props back to the parent ie App.js file.

ContactList.js

Now, in the App.js file we will finally use the id to remove the contact from the contacts array by filtering it.

App.js

Now, we are able to delete the contact from localhost and with this the project is done.

localhost

You can find the video for this article in this YouTube link.

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger