Steps for Designing In React:
- Develop a Component Hierarchy
- draw boxes around each component and sub-component and assign names
- use the single responsibility principle - each component should only do one (1) thing, if a component starts handling too much it should be broken down into sub-components
- UI and data models tend to both follow the same information architecture
- each component should match one piece of your data model
- Build a Static Version
- component hierarchy uses data model and render the UI
- no interactivity
- use only props, do not create any state
- render() is the only method
- results in library of reusable components
- Identify MVP of UI State
- need minimal set of mutable state required to have functioning app
- DRY - Don't Repeat Yourself
- determining state:
- passed via props? ❌ state
- unchanged over time? ❌ state
- computable by other state or props? ❌ state
- Identify Where the State Lives
- determine which component mutates or owns each state
- remember React is one-way data flow
- foreach(state)
- identify each component that renders something based on the state
- find common parent component
- state should live in common parent or even higher in hiearchy
- if common parent doesn't exist, make one
- Inverse Data Flow
- use callbacks to update state where required from child components
Higher-Order Functions - functions that operate on other functions by using them as arguments or returning them.
Greater than function:
function greaterThan(n) {
return m => m > n;
}
let greaterThan10 = greaterThan(10);
console.log(greaterThan10(11));
// → true
- takes in a number n
- returns an arrow function that takes an argument m and compares it to n using greater than
Higher-Order Functions are great for handling data
- built in methods like filter() utilize an array and a built in test to test against that array.
map()functions by applying a function to all of the elements arguement array- the application of the this function to transform data and push into a new array makes map a higher-order function
reduce()builds a value by repeatedly combining a single element from an array with the current value- it does this with array, combination function, and start value parameters
- How the developer of React built it