How to build a modern to do

NOTE: This project is outdated. It does not implement a better way of passing multiple properties to children components such as making use of context and component composition that React offers. It also makes use of a combination of class components and function components. The standard migrates away from class components in favor of function components for readability, future support, and ease of use. This tutorial is kept for legacy purposes.

Below are the accompanying videos for this tutorial. It contains both part 1 and part 2 and on average are about 1 hour and 10 minutes long.

Create a new React application using the Create React App framework with Typescript and Node-Sass support. Open up terminal and issue the following commands:

npx create-react-app modern-to-do --template typescript
npm install node-sass --save-dev

Navigate to the newly created directory and start it.

cd modern-to-do
npm run start

The application will now be running and accessible at http://localhost:3000.

Below is a breakdown of the individual components that makes up our application. It shows both the files and visual element that makes up the component. They are broken down by function and it shows the relationship between each other.

Calendar

This component renders the current month's name (trimmed only to the first three letters), date and the string "Today". For the style, this component uses blue and white tint color and rounded borders.

List

This component keeps track of different view related data and lifts it to the parent. This renders the "NewItem" component and shows svg icons and different views. Completed - items that were marked as completed from the "In Progress" view. In Progress - items that were newly created using the "NewItem" component and items that were added back from the "Removed" view. Removed - items that were removed from the "In Progress" view

ListNavigation

This component keeps track of the selected view and lifts it up to the parent component. It shows the ellipsis svg icon and lists the different views with the selected one highlighted.

NewItem

This component accepts an input entered field and lifts it up to its parent. This component listen to the following events: keyboard, change and focus and captures most of the user interactions. It also renders an svg icon. For the styling, on hover shows or hides the hover icon. For the input field, remove the borders and use gray for the placeholder text for visual identification between states.

Footer

This component renders the footer link with dynamic text.

Todo

This parent component keeps track of all the children component's states and define event handler functions.

Interface

Shows the current month and date

App

Main component used to connect all components together

Once all of the components are created, the app is now complete. Refer to the completed app for the final result. Also view the project repository for the completed source code for reference.

You can view the live demo to see it in action or browse the source code to see how the project is built.