reading-notes

reading notes for code fellows

Project maintained by dLeigh01 Hosted on GitHub Pages — Theme by mattgraham

Putting it All Together

Thinking in React

When you are creating a searchable data table using React, the first step is to create a mock and break the UI into a component hierarchy. To decide which things require their own component, you should use the single responsibility principle, which state that each component should only be doing one thing. After you know which things are components, you can make them into a tree showing parents and children/sibling relationships, which will work as your hierarchy.

The next step is to build a static version in React. You create the structure of the table without adding any interactivity to it to make sure everything looks right and to get the part with the most typing out of the way before you move on to adding interactivity, which requires more thought. When building a static version, you should only be using props and not state.

The third step is identifying the minimal complete representation of the UI. To do this, you need to figure out exactly what your UI needs to accomplish, then figure out what you can do to make that happen in the least code possible and without repeating yourself. Go through each component and figure out what needs to be determined by state and what can remain as props.

Step four is to identify where your state should live. For each piece of state in the application, you should figure out which component it needs to be inside and which components need to be able to edit it. The state should be owned by either a common ancestor of any components that need to be able to manipulate it, or anywhere in the hierarchy above that common ancestor.

Finally you need to add inverse data flow. To do this, you pass callbacks through from the component with the state that needs updating to the component updating the state so you can change the state higher up in the hierarchy.

  1. The single responsibility principal says that each piece of code should only do one things, this relates to components because each component should only be one snippet of code, and components should be nested as necessary so they aren’t doing more than one thing.
  2. A static version of an application is a version with no interactivity.
  3. Once you have a static application, you need to add state.
  4. Three questions you can use to determing if something is state are is it passed in via props, does it remain unchanged, and can you compute it based on any other state or props in your component.
  5. You can identify where state needs to live by finding a common ancestor of any components that need to access it.

Higher-Order Functions

Higher-order functions are functions that operate on other functions, either by taking them as arguments or returning them. These allow us to abstract over actions rather than values and they come in several forms. They can create new functions, change other functions, or provide new types of control flow.

  1. A higher-order function operates on other functions.
  2. Line 2 of the greaterThan function is returning an arrow function with 2 parameters when only one is being passed in to the original function, so you can pass in an argument to create a new more specific function that takes the second parameter.
  3. Map is a higher order function that has the ability to take in a callback function and use it to change the way it completes its task.

Things I Want to Know More About

I did not understand the higher-order functions as extensively as I would have liked.

[< table of contents]

[< home]