React Js To-Do-List Web Application

To practice basic concepts

INTRODUCTION

In this project, I have developed a To=Do-List web application using famous frontend react.js library. Primary objective of this project is to gain a solid understanding in basic concepts such as functional components, JSX, CSS styles, click events, hooks, Props & props drilling, controlled inputs, Fetch API data and CRUD operations.

Project Structure

In this project folder, package.json, package-lock.json, Readme.md files are there. In package.json, project's dependency packages which were installed from npm website, are mentioned with there versions. Package-lock.json file is generated by the npm and It includes project title, script and dependencies. In src folder, number of functional components are present in which each component describe specific features in the application. In data folder, we have db.json file which created to store user data and used as database. CRUD operations are done with db.json file which achieved by using "json-server" package which is used to build fake api server.

Key Features

The main features of the To-Do-List app includes

• Adding task
• Deleting task
• Searching task
• Marking task as completed
• Fetching data from the external api

Implementation Details

• In src folder, Different components are developed to provide specific function for the application. They are Content.js, Header.js, Footer.js, ItemList.js, AddItems.js, SearchItems.js, RequestApi.js. App.css contains all the required styles and classes that make application look more user friendly appearance.
• React controlled inputs is used to get input from user through the form tag. The input is stored using the useState hook. The input data is get updated to the db.json file by using fetch function.
• When the app is rendered for the first time, the data in db.json file is fetched using the fetch function within the useEffect hook with empty dependency.

Conclusion

While developing this application, good practice of coding is followed. Basic to advanced concepts are studied and practiced through this project. Local storage concept is used to store the user data in the begining then for learning purpose Fake api is created to practice the Fetch api data concepts.

Special Thanks to Balachandra youtube channel for supporting in learning React Js www.balachandra.in Balachandra youtube Channel Link