xiaoyunyang

Bundle Recommendation

• Bundle Recommendation
  • Overview and Goals
    • Background
    • Goals
      • User Story
      • Sub-problems
    • Non-Goals
• De-scoped

xiaoyunyang

Comments App

• Comments App
  • Overview and Goals
    • Background
    • User Story
    • Goals
    • Non-Goals
    • Pagination
• Frontend trigger for deleting all the comments

xiaoyunyang

Instead of always running source .env before running yarn, you can add your dev secrets like NPM_TOKEN or OPEN_AI_API_KEY to a global dev environmental variable file on your machine (e.g. dev.env) then add this to your .bashrc to source it on startup:

# dev.env
export NPM_TOKEN=<create one in npm settings>

# bashrc
source ~/dev.env

xiaoyunyang

What is nvm?

nvm is a version manager for node.js which lets you easily switch between different node versions. You can define an .nvmrc file in your node project which enforces the node version standardization with your codebase collaborators.

Install NVM

Install

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

xiaoyunyang

import React, { useState } from "react";

const UiState = {
  LOADING: "LOADING",
  ONLINE: "ONLINE",
  OFFLINE: "OFFLINE",
};

const UiStateMessageMap = {
  [UiState.LOADING]: "Loading...",

xiaoyunyang

import React, { useState } from "react";

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);

xiaoyunyang

function foo() {
  let res = ''
  let j = 10

  for(let i=0; i<j; i++) {
    // uncommenting ... the following line causes error
    // var j = 5
    res += `${j}, `
    j -= 1
  }

xiaoyunyang

The example is taken from TypeScript's quick start tutorial

In JavaScript

const greeter = (person) => "hello "+person;
greeter([1,2,3]) // "hello 1,2,3"

In TypeScript

xiaoyunyang

Flow to TypeScript Migration

Helpful Migration Guides:

• Migrating a Babel Project to TypeScript

Phase 1: Configure Project to use TypeScript

Delete Flow-related files

xiaoyunyang

What to Test

Testing interfaces

• Child component with the right props

import EditProfileForm from "../feedbackForm";
import Checkbox from "../checkbox";
import EmailInput from "../EmailInput";