- 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
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:
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.
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.
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.
We're going to be building this application from scratch!
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.
Sprint 2: Containers and Nested Components
Sprint 3: Fetching data with AJAX
