Daily Reading 5
Putting it all together
React Docs - Thinking in React
What is the single responsibility principle and how does it apply to components?
One component should only perform one task. Componentization makes your code more readable, and makes it easier to find where a problem lies if each individual component only is performing one “task.”
What does it mean to build a ‘static’ version of your application?
Build a version of your application that has all of the buttons and functionality visible but with no user interactions tracked in any way. State should be entirely unused for this step, and should be entirely render components.
Once you have a static application, what do you need to add?
All of the state tracking, and interaction that the user can take, and how it can change how your website looks, and what it does.
What are the three questions you can ask to determine if something is state?
It’s a value that has can be changed during runtime, is NOT passed down from a parent via a prop, and is NOT computed through the use of other state or props.
How can you identify where state needs to live?
States should be owned by the parent of anything that the state can be modified by, or can influence. State should not need to ever travel “upstream” to go back downstream to change a separate component from a component at an equal level in the hierarchy.
Higher-Order Functions
What is a “higher-order function”?
A higher order function is a function that takes in another function as an argument. Nested.
Explore the greaterThan function as defined in the reading. In your own words, what is line 2 of this function doing?
function greaterThan(n) {
return m => m > n;
}
let greaterThan10 = greaterThan(10);
console.log(greaterThan10(11));
// → true
it is a return statement, that is returning a new function called greater thann that compares and gives a true or false depending on a the argument passed in when it was created.
Explain how either map or reduce operates, with regards to higher-order functions.
Reduce will use an accumulator value that will gather every element in an array, and add them together into the accumulator, before returning the final result of all of the array added up with each other.