No description, website, or topics provided.
Clone or download
Pull request Compare This branch is even with sf-sei-3:master.
kbbushman and GitHub Enterprise Update
Latest commit 5a58582 Aug 17, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets added assets/grass.jpg Sep 24, 2018
solution-code added assets/grass.jpg Sep 24, 2018
sprints Update Aug 18, 2019 Update Apr 30, 2019
react-render.png finish first draft Sep 6, 2016

React Todo

Learning Objectives

  • Build a todo app in React that persists with a backend
  • Use React Router to deep link
  • Use axios promise library to retrieve data from a back end
  • Pass state from parent components to children as props
  • Pass state from children components to their parents as arguments to functions


For today, we'll be creating a Todo app in React.

We've learned a tremendous amount about object oriented structures for web development. And they were great. We have also dabbled a bit with feature-based separation of concerns. React's component model takes that separation further and reduces the potential of tight coupling that often attends object oriented. Think of the FIRST principles:


Components should do one thing and do it well. It takes some time for most developers coming from an OOP background to adjust to React's component-based architecture. At first, a dev from an OOP background may pack too much information into a component. This is a fine starting point, but as you progress you will get a better sense of how to minimize component code.

Think back to the Post component from the intro's class.


Components should increase cohesion and reduce coupling. Behavior in one component should not impact the behavior of another. In other words, components should not rely on one another.

But they should compliment one another, just like our Comment component did for Post in the intro's class.


Components should be written in a way that reduces the duplication of code. Reusability keeps things DRY!


Ideally, components should be short and condensed.


Because the same input will always produce the same output, components are easily unit testable.

React Todo

Alright it's time to build! We're going to be building this application from scratch! It won't be exactly like the solution-code directory above, but it'll be pretty close and follow much of the same structure.

If you get behind, all code written today will be in the lesson plan. The error messages you'll get in terminal and in the chrome dev tools from React are usually very accurate and helpful, so please utilize them. Please keep questions pertinent to content. We should also note that some of the code snippets will be repetitions to reiterate points of learning. Some of them might just be updates to existing files. Some of them might be brand new content you have to add all of.

Sprint 0: Getting Started

Sprint 1: React Router setup

Sprint 2: Containers

Sprint 3: Fetching data with Axios

Sprint 4: Creating Todos

Sprint 5: Deleting Todos

Sprint 6: Edit/Update a Todo