Thinking In React

• Think in reuseable JSX
  • const myElement = <h1>React is {5 + 5} times better with JSX</h1>;
• Components can be as simple as
  • Great simple reference - W3 Schools

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

• Think in components
  • Imagine components within components
  • Imagine them being surrounded by optional contexts wrappers for passing common non UI data.
  • Components can have props and children.
    • children are also props {children, ...props} (props unboxed by std JS destructuring)
    • classed can be passed as props {children, classes, ...props}
    • event functions can be passed as props {children, onClick, ...props}
• Components hold state
  • State gets rendered and updated by events
• Events can be triggred
  • by user events
  • custom logic
  • passed on from parent components (either way)
• Thinking in basic hooks
  • useState to set state, useEffect for side effects
  • useEffect for on render or load of component, return in useEffect for unload