Front-end Web Development with React (Week 2)

• Component Types
  • Presentational / Skinny / Dumb / Stateless
    • receive data, purely responsible for rendering the view
  • Container / Fat / Smart / Stateful
    • responsible for storing state, pass props to presentational components

• Presentational Components
  • Mainly concerned with rendering the “view”
    • markup, styles
  • Based on the data that is passed to them in props
  • Do not maintain their own local state

• Container Components
  • Data fetching, state updates
  • Make use of presentational components for rendering
    • wrap presentational components
  • Provide the data to presentational components
  • Maintain state and communication with data source

• Updating Lifecycle Methods
  • Called when a component is being re-rendered
    • props or internal state changed
    • getDerivedStateFromProps()
    • shouldComponentUpdate() – return a boolean
    • render() – every time re-rendered
    • getSnapshotBeforeUpdate() – E.g. record scroll position
    • componentDidUpdate()
  • deprecated methods
    • componentWillReceiveProps()
    • componentWillUpdate()

• Class Components
  • Extend React.Component
  • Render() method to return “view”
  • Local state
  • Lifecycle hooks
• Functional Components
  • Simplest way to define React components
  • JavaScript function that returns a React element, or a collection of React elements that define the view
  • Receives a “props” object as input parameter
  • No local state, no access to lifecycle hooks

• React Virtual DOM
  • A React Object and a lightweight representation of the Browser DOM
  • In-memory tree data structure of plain JS objects
  • Manipulations extremely fast compared to modifying the browser DOM (?)
  • Created completely from scratch on every setState
• Updating the DOM
  • Diffing algorithm will detect nodes that are changed
    • Updates the entire sub-tree if difference detected on a node
    • “Key” in list attribute to indicate list item(s) need updating
  • React Fiber
    • New reconciliation algorithm
    • Incremental rendering

• React Router
  • Collection of navigational components
    • Enables navigation among views
    • Router components, route matching components and navigation components
  • Browser-based URLs of a client-generated view
    • support optional parameters

• Router component: <BrowserRouter>
  • Creates specialized history object
  • <HashRouter> if static file server
  • Enclose app in BrowserRouter

• Route matching components: <Route> and <Switch>
  • <Route>’s path prop points to current location’s pathname
  • <Route>’s component prop points to the corresponding view for the location
    • pass in function when there are parameters/props
  • ‘exact’ attribute to ensure the path must be exactly matched
  • <Redirect> points to default route
  • <Switch> groups together several routes
    • will iterate children and return the first match

• Navigation components: <Link> and <NavLink>
  • <Link> creates links, render as <a> tag
  • <NavLink> attaches the ‘active’ class to the link when its prop matches the current location

• Single Page Applications (SPA)
  • Web application or website that fits in a single page
    • No need to reload the entire page
    • UX like a desktop/native application
    • Most resources are retrieved at the first load
    • Redraw parts of the page when needed without requiring a full server roundtrip but only the data
  • Challenges
    • Search engine optimisation
    • Partitioning the responsibility between client and server
    • Maintaining history
    • Analytics
    • Initial page load speed

• Route Parameters
  • Paths:
    • specified as URL
    • carry parameter values as a token
  • specified as a link parameter <Link to={`/menu/${dish.id}`} />
  • Route passes three props to the component
    • match, location, history
  • match Object
    • provides information about how a <Route path> matches the URL
      • params: an object that contains key/value pair parsed from the URL corresponding to the dynamic segments of the path
      • if path is specified as /menu/:id, ‘/menu/42’ => match.params.id = 42