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
    • specific instance of a component
    • React Hooks: Compound Components
  • 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