sarasaurus / to-do-app

To Do List App with React

Author: Sarah Bixler Version: 1.0.1

Overview

This is a to-do list single page application built using the React library. It uses three main components to manage content, with an App component that handles routing and rendering for the whole application. This app uses good inheritence practices, with one parent component, Dashboard, which manages the state of the whole application and passes that down to two child components, noteItem and noteList. NoteList renders the noteItems to the page, based on the current state of the dashboard component. Each noteItem component inherits a method of the dashboard component as a property, which is called when an event listener is triggered. The method takes in the eventlistener target in the noteitem component which is used to delete a note from the application's state, because notelist uses the current state to render the noteitems this triggers the re-rendering the notelist component, and the list of items immediately reflects the state change.

Getting Started

• fork this repo
• npm i to install dependencies
• npm run watch to open a tab in your default browser which runs the app

Architecture

This SPA is built using the React library to manage state, and components, React Router is creating the navigational components-- allowing bookmarkable and functional URLS, Babelis used for transpiling, Webpack is used for bundling, SASS is the extension language used to add functionality to the CSS, mini-css-extract-plugin is creating a single CSS file for Webpack's JS file, allowing on-demand-loading of CSS and SourceMaps, eslint is used for linting... uuid is making unique resource identifiers. Jest is used for testing with the enzyme utility which makes it easier to to manipulate, traverse and assert the output of the React components this app is built with.

Change Log

05-23-2018 4:59pm - Application has a form that allows users to create notes, immediately see a list of created notes and to select notes from the list to delete.

05-24-2018 4:59pm - Application has a modal component that allows users to update notes, some styling has been added