sf-wdi-37 / react-todo-walkthrough-jquery

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

Component-Based Architecture

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

With Angular, we saw feature-based separation of concerns. React is organized with components that separate concerns further and reduce the potential of tight coupling.

When designing components for your app, think of the FIRST principles:

Focused

Components should do one thing and do it well.

Resist the temptation to pack too much information into a component. As you progress you will get a better sense of how to minimize component code.

Independent

Components should increase cohesion and reduce coupling.

Behavior in one component should not impact the behavior of another.

In other words, components should rely on each other as little as possible.

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 Project

We're going to be building this application from scratch!

Workflow Tips

If you get behind, refer back to these notes.

Pay attention to the error messages you'll get in terminal and in the chrome dev tools. Errors from React are usually very accurate and helpful, so please utilize them.

Think critically about code snippets. Some of them will be repetitions, to reiterate important points. Some of them will update existing files. Some will have brand new content, and you'll add the entire snippet to your project.

Sprints

Sprint 0: Getting Started

Sprint 1: React Router setup

Sprint 2: Containers and Nested Components

Sprint 3: Fetching data with AJAX

Sprint 4: Creating Todos

Sprint 5: Deleting Todos

Sprint 6: Edit/Update a Todo

react-todo-walkthrough-jquery's Issues

Sprint 5, step 5 TodoModel.delete method is missing todo ID part of url in AJAX call

Sprint 4, Todo Creation & AJAX, step 1 renders `Todos` component; should say `TodoList`

Additional resource on passing `key` prop when rendering an array of components

Thanks @heyjulieh

https://facebook.github.io/react/docs/lists-and-keys.html

structure updateTodo to more closely match deleteTodo in TodosContainer

specifically:

• could take in entire todo instead of id
• could use res._id for comparison in find instead of id
• in iterator method, instead of item, call items todo

Sprint 5, step 4 `TodoContainer` should be `TodosContainer`

Sprint 1, module.exports cannot be directly assigned to

I get an error that you cannot assign directly to module.exports; using export default instead works just fine.