ReactJs JSX

JSX

  • how react uses jsx?
    • jsx is an extensions for js
    • jsx allows react to create an internal tree of elements to traverse (performant one)
    • new ui -> compare -> calculate -> update
  • children prop is a powerful feature
    • containement
      • some components don’t know their children ahead of time
      • allows to use any kind of component to be used
    • specialization
    • types of children
  • spread operator (…myObj)
    • this is a javascript feature
    • spread operator needs to be last in the element - the order matters
  • HoC - Higher-Order-Components - encapsulates logic
    • it does not mutate the original component rather it enhances it - this is the recommended approach
    • with is a prefix and convention, such as withMousePosition for HoC
  • render props
    • a prop named render that is a callback that returns what needs to be rendered