Kate Kim



Development

UX / UI

Visual

About

React Project

Languages

React.js

HTML

CSS

Description

This project was to build a simple todo application using React to understand React and solidify some basic principles.

App Development

Todo List App

Todo List App
Design

SKETCH

Before I started coding, I specified the components to be created with a simple sketch to know what components to build the user interface with.

Todo list app sketch

TODO LOGO

The logo has a minimalistic feel by putting a thin font “TODO” in the box.

TODO Logo
Code

React.js

Initially, a component that can be used when returning the basic app component was created in App.js. Then I added a component called Form to give it permission to create a new item and select a list of categories.

Todo App Code

I built a function that lets a user go to the “Completed” category when the user presses a checkmark and a function that deletes the list when the user clicks a trash can icon.

I was able to understand React in more detail by creating the simple Todo list app that creates new information, updates existing information, and deletes the information.

Todo App Code

Styling Todo App

Finally, I entered style rules in a style sheet called App.css, such as the background shadow and button animation.

Todo App Code