Todo List

Description

The classic starter app. Build a ToDo list with React and Styled-Components.

You will learn:

Create a tiny React app to manage a list of tasks
Simple usage of React hooks
Basic UI like buttons and inputs
styling your own components
keyboard interactivity

Lessons in this module

Hello Captain's Tasks

Adding styled-components to react app

Importing shared components

Styling a Button

React Card Example

Tasks Container

useState example: appending to array

CSS Grid row example with right aligned action

CSS Grid Icon button actions column example

React IconButton example

React Button Hover States

Styled components extend component example

Editing Tasks with conditional rendering

Dynamic row actions

React editing inputs

Saving task data

Reverting task data

Destroying tasks

Autofocus input on adding new task

Completing Tasks