This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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', |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 = { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
FROM node:14-alpine | |
WORKDIR /app | |
COPY package.json . | |
RUN npm install | |
COPY . . | |
CMD ["npm", "start"] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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' || |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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"> |
NewerOlder