pjchender

import { STATE, useUsers } from '@/state/user';
import { useEffect } from 'react';

const UserList = () => {
  // STEP 4: useUser to get data from state and actions
  const { users, actions } = useUsers();
  const { removeUser, fetchUsers, resetUser } = actions;

  useEffect(() => {
    // if you want to get the newest users every time, otherwise the cache will be used

pjchender

// https://kentcdodds.com/blog/how-to-use-react-context-effectively

import { useCount } from './count-context';

const Counter = () => {
  const { dispatch, state } = useCount();

  return (
    <div>
      <p>{state.count}</p>

pjchender

import * as React from 'react';
import { ChangeEvent } from 'react';

import { ColorSlider } from './ColorSlider';
import { useContext } from './rgb-context';

export interface AdjustmentInputProps
  extends React.HTMLProps<HTMLInputElement> {
  id: string;
  label: string;

pjchender

import { DevTool } from '@hookform/devtools';
import { yupResolver } from '@hookform/resolvers/yup';
import { Button, makeStyles, TextField } from '@material-ui/core';
import { Controller, SubmitHandler, useForm } from 'react-hook-form';
import * as yup from 'yup';

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    flexDirection: 'column',

pjchender

// https://frontendmasters.com/courses/react-typescript/polymorphic-components/

// STEP 1：增加 as 這個 props 的型別定義
// as 的型別是泛型 E、它需要滿足 React.ElementType、且預設值為 React.ElementType
type ButtonBaseProps<E extends React.ElementType = React.ElementType> = {
  children: string;
  as?: E;
};

type PrimaryButtonProps = {

pjchender

// frontendmasters.com/courses/react-typescript/limiting-props/
/* eslint-disable no-restricted-syntax */
/* eslint-disable react/require-default-props */
type ButtonBase = {
  children: string;
};

type PrimaryButtonProps = ButtonBase & {
  primary: boolean;
  secondary?: never;

pjchender

FROM node:14-alpine

WORKDIR /app

COPY package.json .
RUN npm install

COPY . .

CMD ["npm", "start"]

pjchender

// source code: https://github.com/facebook/react/blob/master/packages/shared/shallowEqual.js
// TS Playgound: https://tsplay.dev/Nr272N

const shallowEqual = (objA: any, objB: any): boolean => {
  if (Object.is(objA, objB)) {
    return true;
  }

  if (
    typeof objA !== 'object' ||

pjchender

<div id="app">
  <!-- navigation -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="./index.html">Movie List</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">

pjchender

import React from 'react';
import { Formik, Form, useField } from 'formik';

const GENDERS = [
  {
    name: 'other',
    value: 0,
  },
  {
    name: 'male',