librz

/**
 * example of a wrapper of browser's native fetch method
 * Assumptions:
 * 1. server uses JWT & bearer token for authorization
 * 2. client stores auth token in local storage
 * 3. response's content type
 *   a. "application/json" for normal response
 *   b. "application/octet-stream" for file download
 *   c. "text/plain" when error
 * 4. server returns 401 when auth token is invalid

librz

import { useState, FC } from "react";

const App: FC = () => {
  const [number, setNumber] = useState(1);

  const nextNumber = number + 1;

  function handleIncrease() {
    setNumber((num) => num + 1);
    console.log("current number is", number); // still the old number

librz

// ref: https://www.patterns.dev/posts/render-props-pattern/
// note: in many cases, render props can be replaced by hooks

import { FC, useState } from "react";

interface IContainerProps {
  children: (bg: "silver" | "gold") => React.ReactNode;
}

const Container: FC<IContainerProps> = ({ children }) => {

librz

// naive example code for "topic based publish/subscribe model"
// this is just to illustrate the idea, feature is incomplete, do NOT use in production
// reference: https://github.com/mroderick/PubSubJS

type TopicHandler = (data?: any) => void;

interface ISubscriber {
  topic: string;
  handler: TopicHandler
}

librz

/* define context */

import React, { createContext } from 'react'

// the biggest limitation of context is there's no way of refering to & setting state when defining context
// actions can only be implemented inside context provider
const LayoutContext = createContext<{
  collapsed: boolean,
  toggleCollapsed: () => void
}>({ 

librz

const allSelectors = document.querySelectorAll("*");

console.log(`In this page, there are ${allSelectors.length} HTML tags.`)

const selectorToCount = {};

allSelectors.forEach(it => {
  if (!(it.tagName in selectorToCount)) {
    selectorToCount[it.tagName] = 1;
  } else {