reading-notes

React 2

SOURCES

VIDEOS

ARTICLES

Conditional Rendering React - Lists & Keys React - Forms React - Lifting State Up React - Composition vs Inheritance React - Thinking in React

NOTES

• conditional rendering
  • if/else
  • element variables
  • ternary operator
  • short circuit operator
• conditional rendering with && operator
  • if the condition is true, the element right after && will appear in the output
  • if the condition is false, React will ignore and skip over it
• conditional rendering with ternary operator
  • if the condition is true, the first element will appear in the output
  • if the condition is false, the second element will appear in the output
• conditional rendering with inline if with logical && operator
  • if the condition is true, the element right after && will appear in the output
  • if the condition is false, React will ignore and skip over it
• conditional rendering with inline if-else with conditional operator
  • if the condition is true, the first element will appear in the output
  • if the condition is false, the second element will appear in the output
• conditional rendering with prevent component from rendering
  • return null
• lists and keys
  • lists are a good way to render multiple components
  • lists can be rendered in React in two different ways
    • using an array of JavaScript objects
    • using an array of JSX elements
  • keys help React identify which items have changed, are added, or are removed
  • keys should be given to the elements inside the array to give the elements a stable identity
• lifting state up
  • often, several components need to reflect the same changing data
  • we recommend lifting the shared state up to their closest common ancestor
  • we can then pass the state back down to the components that need it as props
  • we can use the same stateful component for multiple different inputs
• composition vs inheritance
  • components can refer to other components in their output
  • this lets us use the same component abstraction for any level of detail
  • a component may refer to other components as either children or as a prop
  • this lets us use the same component abstraction for any level of detail
  • a component may refer to other components as either children or as a prop