Routing and Component Composition

Reading: Routing and Component Composition

React Basics Recap

• The Component Lifecycle
  • Details the life of a component
  • A component can only be in one stage at a time
    • It starts with mounting and moves onto updating
    • It stays updating perpetually until it gets removed from the virtual DOM
    • Then it goes into the unmounting phase and gets removed from the DOM
• Mounting
  • The first method that runs is the constructor method
    • Typically, the constructor is where you would initialize component state
  • Render method which returns your JSX.
• Updating
  • This phase is triggered every time state or props change
• Unmounting
  • Last stage of the component lifecycle
  • You should use this method to clean up any open connections such as WebSockets or intervals
• Higher-Order Components
  • A higher-order component is a function that takes a component and returns a new component
  • Extremely useful because they let us reuse code and remove bloat
• React State and setState()
  • When there’s a state change, React will trigger a re-render on that component
  • The only way you should change state is via the setState method
• React Context
  • Allows you to create global context objects that can be given to any component you make

Props.children

• It is used to display whatever you include between the opening and closing tags when invoking a component

Browser Router Tutorial

• The Router
  • When starting a new project, you need to determine which type of router to use
    • For browser based projects, there are and components
      • should be used when you have a server that will handle dynamic requests (knows how to respond to any possible URI)
      • should be used for static websites (where the server can only respond to requests for files that it knows about)
• History
  • Each router creates a history object, which it uses to keep track of the current location and re-render the website whenever that changes
• Rendering a
  • Router components only expect to receive a single child element
• The
  • Our application is defined within the component
• Routes
  • The component is the main building block of React Router
  • Anywhere that you want to only render content based on the location’s pathname, you should use a element
  • Path
    • A expects a path prop, which is a string that describes the pathname that the route matches 
• Links
  • React Router provides a component to prevent page reload

Additional Resources

• Composition vs Inheritance

Bookmark

• Browser Router API Docs