mfkimbell/react-docker-todo-list

Basic todo list implemented with React.

react-docker-todo-list

The purpose of this project was to familarize myself with React properties and concepts such as Props, Funcitonal and Class Components, State, and JSX as well as learn about containerization with Docker, specifically containerization of React apps.

Tools Used:

The application allows the user to input text and submit that text into an array that is displayed on screen:

• react for rendering jsx elements
• material ui for desinging css components
• .yml for storing configuration data for docker
• docker for containerizing the project
• npm as a package manager

Here is the container being upped with Docker-compose up --build: And here is the container shown in docker desktop:

The application allows the user to input text and submit that text into an array that is displayed on screen, or they can click the close button to delete the entry.

The Todo component has two functions that handle different events for the acutal displayed list of tasks. Checking a task as complete and deleting a task.

The TodoForm component handles the addition of tasks into the array of tasks.

The TodoList Component adds attributes for each entry in the task array. It stores the value, id, completed state, and removed state.

In App.js, we import all of the components needed to update our display. The useEffect() function allows us to store information in local storage so that when the page is refreshed, the tasks array does not reset to empty.

App.js implements the functionality of the functions called by the components. addtodo() adds a task to the array. toggleComplete() changes the state to either true or false depending on what it was previously. removeTodo() removes a task from the array by searching for a matching id. The final return passes the JSX elements to update the page. Because React is being used, a Virtual DOM is created, and when changes are made, it is compared against the actual DOM and only the changed elements are updated.

CSS was taken from @material-ui.