Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/amirdh17/react-to-do-list-app

This project was done to practice basic react concepts such as click events, props drilling, controlled inputs, hooks, fetch api data and CRUD operations. This is a "To Do List" web application where user can write items as a list. I have used fake rest api for CRUD operations by utilizing the "json-server" package.
https://github.com/amirdh17/react-to-do-list-app

css html javascript react-components react-hooks reactjs

Last synced: 4 days ago
JSON representation

This project was done to practice basic react concepts such as click events, props drilling, controlled inputs, hooks, fetch api data and CRUD operations. This is a "To Do List" web application where user can write items as a list. I have used fake rest api for CRUD operations by utilizing the "json-server" package.

Awesome Lists containing this project

README 

        
# 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](https://www.balachandra.in/)

Balachandra youtube Channel [Link](https://www.youtube.com/@Balachandra_in)