2021 02 20

Learnt about React Router for client side routing using the <Switch> and <Route> components.

• the <Route> can take a path prop which will dictate what component to show depending on the url path

• to show a component at spefic path use the component prop which takes a React component as it’s input

  • if you want to provide a prop along with it too, you need wrap the component in a function like so:

  function App() {
    const renderComponentWithProp = (props: any) => {
      console.log("screenC props", props);
      return <ScreenC {...props} message="This is some data" />;
    };
  
    return (
      <div className="App">
        <Switch>
          <Route path="/c/:userid" component={renderComponentWithProp} />
        </Switch>
      </div>
    );
  }

• There are a bunch of additonal props availabe on your component when used withe the <Route> component such as history, location and match. This let you have programatic access to the react-router api. Alternatively you can tap into the react-router api using new hooks such as useHistor and useParams.

Revising the fundamental of creating an API with node.js using the http module.

• Status codes
  • 2xx - success
  • 4xx - user/request/browser error
  • 5xx - server error
• Headers, metadata of the response
  • User-Agent - what browser & OS is sending the response
  • Referrer - the URL was on before linking to the current URL
  • Cookie - text files which container more info about the user and session specific to the current website. Server can add almost anything into a cookie file. Usually has a session identifier and token.
  • Content-Type - the type of data which is in the body of the request e.g application/json
  • Access-Control-Allow-Origin - Used with CORS to allow a different URL to make requests to the server. * means any URL is allowed
  • Allow - indicates which HTTP verbs are supported.
• When handling data in POST requests. The data streamed in. Therefore we need to make use of the data and end events triggers to know when data has completed streaming in an async pattern, to then perform the required actions on the data. the patten is for the stream to be captured in an array which is then but into a “memory buffer” then finally we can consume it as for example a JSON object.