Frontend Introduction

m4_fe_rundown_for_be.md

Rundown

• What is react
  • How would you do things without it - grandiose Sarajevo
    • Have elements on page
    • Target those elements and add event listeners
    • Disadvantages is very bulky, and you might want to do things conditionally depending on the status of different page interactions
      • To do this in vanilla you end up with loads of handler functions
  • Enter react
    • React allows you to create components that help isolate responsibilities and functionality
    • Does so by building a template to display similar to ERB
    • State allows you to keep track of user interaction for that component
• Structure of a react component
  • Two types, functional and class based
    • Functional are simple components generally without state
      • *react hooks can be used to create and handle state
    • Class components denser, have state, inherit methods from react framework
  • constructor
  • React methods
    • Component did mount
      • Fetch requests
    • Render
  • props
  • State
  • JSX & conditional rendering
  • propTypes are just a type checking enforcement
  • As components are ideally single responsibility, there’s often a lot nesting, especially in dev.to
• Some useful knowledge
  • Importing/exporting
  • Deconstruction
  • Spread operation
  • event
    • Elements have built in methods
  • Prototype chain
  • asynchronus
  • Class syntax
    • Constructor similar to initializer
    • State goes in there
    • Super inherits parent methods
    • Other methods go outside the constructor
  • This - Similar to self, generally refers to the class it’s present in, but this can vary depending on where it is used
• Other FE concepts
  • How is styling working in this app
    • Anything that renders HTML can hook into style sheets
    • They’re using SASS, syntactically awesome style sheets, another way of writing css
  • Testing?