No description, website, or topics provided.
Clone or download
Pull request Compare This branch is 14 commits ahead of sf-sei-5:master.
Latest commit ca5634a Dec 11, 2019
Permalink
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 Sprint4.md Dec 12, 2019
README.md Update README.md Dec 11, 2019
react-render.png finish first draft Sep 6, 2016

README.md

React Todo

Learning Objectives

  • Build a todo app in React that persists with a backend
  • Use React Router to deep link
  • Use fetch 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

Framing

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:

Focused

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.

Independent

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.

Reusable

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

Small

Ideally, components should be short and condensed.

Testable

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... Fetch

Sprint 4: Creating Todos

Sprint 5: Deleting Todos

Sprint 6: Edit/Update a Todo

list