- 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 but first, recall the FIRST principles for making high quality components:
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.
Components should increase cohesion (work together) and reduce coupling (not rely on each other).
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.
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 (that uses the older React Component syntax), 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 3: Fetching data with Axios
