- times
- start up time: the time from "the command is executed" to the time "load event is triggered in browser".
- root HMR time: the time from "the root file is changed" to the time "that file is executed in browser".
- leaf HMR time: the time from "the leaf file is changed" to the time "that file is executed in browser".
- cold/hot start
- cold start: the dependency optimization cache is deleted before each run
- hot start: the dependency optimization cache exists by each run
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
"workbench.activityBar.visible": false, | |
"github.copilot.enable": { | |
"*": true, | |
"yaml": false, | |
"plaintext": false, | |
"markdown": false, | |
"env": false | |
}, |
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
// usage | |
function Comp() { | |
const [language, setLanguage] = useLocalStorage('mykey', 'typescript') | |
} | |
// definition | |
function useLocalStorage(key, initialValue) { | |
const [storedValue, setStoredValue] = React.useState(initialValue); | |
React.useEffect(() => { | |
// Get from local storage by key |
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
// Reflect Object - built-in object that provides methods for interceptable JavaScript operations | |
// All methods are static | |
// has no constructor cannot use `new` | |
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect | |
const log = console.log; | |
let alex = { | |
name: 'Alex', | |
id: 93, | |
hello: function (a, b) { |
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
/* eslint-disable no-unused-vars */ | |
/* eslint-disable no-else-return */ | |
// JSX constructor, similar to createElement() | |
export const h = (type, props, ...children) => { | |
return { | |
type, | |
// Props will be an object for components and DOM nodes, but a string for | |
// text nodes | |
props, |
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
// // with thanks | |
// https://dev.to/emreloper/react-router-v6-in-two-minutes-2i96 | |
// https://github.com/ReactTraining/react-router/blob/dev/docs/installation/getting-started.md | |
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/9d29adedf662de685356f711951ef8b9e8342865/types/react-router/index.d.ts#L1 | |
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/9d29adedf662de685356f711951ef8b9e8342865/types/react-router-dom/index.d.ts#L1 | |
// // release notes | |
// https://github.com/ReactTraining/react-router/releases/tag/v6.0.0-alpha.3 | |
declare module "react-router-dom" { |
This list shows the most basic view with a counter in various libarries and patterns.
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
/** | |
* OnLayout is built upon: View (and ResizeObserver), StyleSheet | |
*/ | |
const elementBreakpoints = { | |
small: { minWidth: 200 }, | |
medium: { minWidth: 300 } | |
large: { minWidth: 500 } | |
}; | |
NewerOlder