pjchender

// async function 本身會回傳 Promise，
// 因此 async function 之後也可以用 `.then()` 串起來
main().then(value => {
  console.log(value);
});

async function main () {
  console.log('start fn')     // STEP 1-1
  let val = await get()       // STEP 1-2

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

[CS] Computer Science 專有名詞（繁簡對照）

英文	台灣（繁體）	中國（簡體）
Array	陣列	數組
Object	物件	對象
variable	變數	變量
literal		字面量
expression	表達式	表達式
statement	陳述式	陳述式／語句

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 { 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

<!-- ./app/views/posts/_form.html.erb -->
<div class="form-group mb-3">
  <%= content_fields.label :body, class: 'col-form-label' %>
  <div data-controller="quill-editor">
  <div data-target="quill-editor.container" style="min-height: 250px;"></div>
    <%= content_fields.text_area :body, class: 'form-control d-none', placeholder: 'Content' %>
  </div>
</div>

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

// 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"]