reading-notes

These are my reading notes for Code Fellows

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

Link Home:

Reading Notes Code 301: Day 3

Note: As with day 2, I accidentally read all of the Intro to React page for Read 01. My notes for that particular reading can be found in the day 1 reading here.

Lifting States Up

“Lifting a state up” in React is done by bringing an element up to it’s nearest parent/ancestor. That allows two inputs to be in sync. In the reading, Calculator contains the ‘shared state’, so it can influence both celsius and fahrenheit. It becomes the “source of truth” (quote taken from reading)
- That means Calculator can make both celsius and fahrenheit consistent with each other
Remember that props are Read-Only
onChange, onTemperatureChange, onNameChange, onTargetChange - new syntax
- Usually a prop

A couple examples of these changes, as discussed in the reading:

this.state.value becomes this.props.value
this.setState() becomes this.props.onValueChange()

The inputs stay in sync because their values are computed from the same state (source)

Every piece of data that is able to change should have one source of truth
If more than one component of your code needs to access this state, you lift it up to the parent they have in common (keep hierarchical top-down flow in mind)
Using this method greatly reduces the possibilities of bugs!

Lists and Keys

As we learned in today’s code challenge, the map() function can loop through an array
The code to display any array of numbers to a ul/li element is insanely dry:

const exampleNumbers = [2, 4, 6, 8, 10];
const showItems = exampleNumbers.map((exampleNumbers) =>
  <li>{exampleNumbers}</li>
);

ReactDOM.render(
  <ul>{showItems}</ul>,
  document.getElementById('root')
);

The above code displays the following (although it omits the highly-suggested key. Key’s give elements a “stable identity”):

- 2
- 4
- 6
- 8
- 10

Good practice is to name keys after the elements they represent (the reading uses <li key={}> as an example). The Article also strongly recommends against using indexes as keys

A[nother] good rule of thumb is that elements inside the map() call need keys.

(source)

Keys do not need to be unique globally, just unique to their siblings

The Spread Operator

The spread operator is a useful and quick syntax for adding items to arrays, combining arrays or objects, and spreading an array out into a function’s arguments.

(source)

A spread operator (or spread syntax) is ...

Trying to find the largest number in an array like this:

Math.max([2,8,55])

Would result in “NaN”. Using a spread operator like this:

Math.max(...[2,8,55])

Would correctly produce “55”!

I just have to include this following line of code that the author uses an example, it is just way too cool (and powerful) not to acknowledge (source):

const fruits = ['🍏','🍊','🍌','🍉','🍍']
const moreFruits = [...fruits];
console.log(moreFruits) // Array(5) [ "🍏", "🍊", "🍌", "🍉", "🍍" ]
fruits[0] = '🍑'
console.log(...[...fruits,'...',...moreFruits]) //  🍑 🍊 🍌 🍉 🍍 ... 🍏 🍊 🍌 🍉 🍍

The spread operator is super helpful with concatenating separate arrays
I am absolutely blown away by how cool this is!