Code 301 Class 05 Reading Notes
React Docs
- What is
single responsibility principle
and how does it apply to components? Using the same techniques for deciding if you should create a new funciton or object. A component should ideally only do one thing. If it starts to grow, it should be decomposed into smaller subcomponents. - What does it mean to build a ‘static’ version of your application? Building components that reuse other components and pass data using props. props are a way of passing data from parent to child. Don’t use state to build a static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don’t need it.
- Once you have a static application, what do you need to add? Start with building the components higher up in the hierarchy
FilterableProductTable
, or with the ones lower in itProductRow
. It’s easier to go top-down, and on larger projects, it’s easier to go bottom-up and write tests as you build. - What are the three questions you can ask to determine if something is state?
- Is it passed in from a parent via props? If so, it probably isn’t state.
- Does it remain unchanged over time? if so, it probably isn’t state.
- Can you compute it based on any other state or props in your component? If so, it isn’t state.
- How can you identify where state needs to live?
- Identify every component that renders something based on that state.
- Find a common owner component (a single component above all the components that need the state in the hierarchy).
- Either the common owner or another component higher up in the hierarchy should own the state.
- If you can’t find a component where it makes sens to wn the state, create a new component solely for holding the state and add it somewhere in the hierarchy above the common owner component.
Higher-Order Functions
- What is a “higher-order function”? Functions that operate on other functions, either by taking them as arguments or by returning them.
- Explore the
greaterThan
function as defined in the reading. In your won words, what is line 2 of this function doing? parameterm
is being determined if it is greater than argumentn
which will result in a boolean. - Explain how either
map
orreduce
operates, with regards to higher-order functions. The map method creates a new array populated with the result of calling a provided function on every element in the calling array. So map, itereates over the array, going over every element and creates a new array.
Things I want to know more about
More understanding on Map. I feel I get the general idea, but I would like to see more examples on various ways it can be used.