├── .gitignore ├── .prettierrc.json ├── .vscode └── settings.json ├── CONTRIBUTING.md ├── Date └── README.md ├── LICENSE ├── README.md ├── babel └── README.md ├── challenges ├── 25 │ ├── index.html │ └── index.js ├── 26 │ ├── index.html │ └── index.js ├── 27 │ ├── index.html │ └── index.js ├── 28 │ ├── index.html │ └── index.js ├── 29 │ ├── index.html │ └── index.js ├── 30 │ ├── index.html │ └── index.js ├── 31 │ ├── index.html │ └── index.js ├── 32 │ ├── index.html │ └── index.js ├── 33 │ ├── index.html │ ├── index.js │ └── util.js ├── 34 │ ├── index.html │ ├── index.js │ └── util.js ├── 35 │ ├── index.html │ ├── index.js │ └── util.js ├── 36 │ ├── edit.html │ ├── index.html │ ├── notes-app.js │ ├── notes-edit.js │ └── notes-functions.js ├── 37 │ ├── edit.html │ ├── index.html │ ├── notes-app.js │ ├── notes-edit.js │ └── notes-functions.js ├── 38 │ ├── edit.html │ ├── index.html │ ├── notes-app.js │ ├── notes-edit.js │ └── notes-functions.js ├── 39 │ ├── edit.html │ ├── index.html │ ├── notes-app.js │ ├── notes-edit.js │ └── notes-functions.js ├── 41 │ ├── edit.html │ ├── index.html │ ├── notes-app.js │ ├── notes-edit.js │ └── notes-functions.js ├── 43 │ ├── edit.html │ ├── index.html │ ├── notes-app.js │ ├── notes-edit.js │ └── notes-functions.js ├── 44 │ ├── index.html │ ├── todo-app.js │ └── todo-functions.js ├── 46 │ ├── index.html │ ├── todo-app.js │ └── todo-functions.js ├── 50 │ ├── index.html │ └── index.js ├── 51 │ ├── app.js │ ├── index.html │ └── index.js ├── 52 │ ├── app.js │ ├── hangman.js │ └── index.html ├── 53 │ ├── app.js │ ├── hangman.js │ └── index.html ├── 54 │ └── person.js ├── 55 │ ├── app.js │ ├── hangman.js │ └── index.html ├── 60 │ ├── app.js │ ├── hangman.js │ ├── index.html │ └── requests.js ├── 61 │ ├── app.js │ ├── hangman.js │ ├── index.html │ └── requests.js ├── 62 │ ├── app.js │ ├── hangman.js │ ├── index.html │ └── requests.js ├── 63 │ ├── app.js │ ├── hangman.js │ ├── index.html │ └── requests.js ├── 64 │ ├── app.js │ ├── hangman.js │ ├── index.html │ └── requests.js ├── 65 │ ├── app.js │ ├── hangman.js │ ├── index.html │ └── requests.js ├── 66 │ ├── images │ │ └── favicon.png │ ├── index.html │ ├── scripts │ │ ├── app.js │ │ ├── hangman.js │ │ └── requests.js │ └── styles │ │ └── styles.css └── README.md ├── chrome-extensions ├── .gitignore ├── README.md ├── sample_1 │ ├── .gitignore │ ├── icon.png │ ├── index.css │ ├── index.html │ ├── index.js │ ├── manifest.json │ └── options.html ├── sample_2 │ ├── .gitignore │ ├── icon.png │ ├── index.css │ ├── index.html │ ├── index.js │ ├── manifest.json │ ├── options.html │ └── options.js └── sample_3 │ ├── .gitignore │ ├── background.js │ ├── icon.png │ ├── index.css │ ├── index.html │ ├── index.js │ ├── manifest.json │ ├── options.html │ └── options.js ├── electron └── README.md ├── examples ├── example-1 │ └── index.html └── example-2 │ ├── index.html │ └── index.js ├── nodejs ├── README.md └── nvm │ └── README.md ├── npm-packages ├── README.md ├── eslint │ └── README.md ├── husky │ └── README.md ├── lint-staged │ └── README.md └── prettier │ └── README.md ├── package-managers ├── README.md ├── npm │ └── README.md ├── pnpm │ └── README.md └── yarn │ └── README.md ├── react ├── .gitignore ├── README.md ├── auth0 │ └── README.md ├── challenges │ └── README.md ├── create-a-react-application │ ├── README.md │ ├── cdn │ │ └── README.md │ ├── cra │ │ └── README.md │ ├── deno │ │ └── README.md │ ├── npm │ │ └── README.md │ └── vite │ │ └── README.md ├── data-fetching │ ├── README.md │ ├── react_query │ │ └── README.md │ └── swr │ │ └── README.md ├── playwright │ └── README.md ├── projects │ └── tm │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── .yarnrc.yml │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── postinstall.js │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── ApiKey.tsx │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ │ ├── tsconfig.json │ │ ├── tsconfig.node.json │ │ ├── vite.config.ts │ │ └── yarn.lock ├── re-render │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── pages │ │ │ ├── Parent │ │ │ │ └── index.tsx │ │ │ └── ParentChild │ │ │ │ └── index.tsx │ │ └── setupTests.ts │ ├── tsconfig.json │ └── yarn.lock ├── react-component-libraries │ └── README.md ├── react-error-boundaries │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── logo.svg │ │ ├── pages │ │ │ ├── GlobalError.tsx │ │ │ ├── LocalError.tsx │ │ │ └── components │ │ │ │ └── CardData.tsx │ │ ├── react-app-env.d.ts │ │ ├── server.js │ │ └── setupTests.ts │ ├── tsconfig.json │ └── yarn.lock ├── react-hooks │ └── README.md ├── react-lifecycle │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── logo.svg │ │ ├── react-app-env.d.ts │ │ ├── reportWebVitals.ts │ │ └── setupTests.ts │ ├── tsconfig.json │ └── yarn.lock ├── react-testing-library │ └── README.md ├── snippets │ └── README.md ├── state-managers │ ├── context │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── data.json │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.test.tsx │ │ │ ├── App.tsx │ │ │ ├── index.css │ │ │ ├── index.tsx │ │ │ └── setupTests.ts │ │ ├── tsconfig.json │ │ └── yarn.lock │ ├── data-redux │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── data.json │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.test.tsx │ │ │ ├── App.tsx │ │ │ ├── index.css │ │ │ ├── index.tsx │ │ │ ├── logo.svg │ │ │ ├── react-app-env.d.ts │ │ │ ├── reportWebVitals.ts │ │ │ ├── setupTests.ts │ │ │ └── store.tsx │ │ ├── tsconfig.json │ │ └── yarn.lock │ ├── jotai │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── data.json │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.test.tsx │ │ │ ├── App.tsx │ │ │ ├── index.css │ │ │ ├── index.tsx │ │ │ ├── logo.svg │ │ │ ├── react-app-env.d.ts │ │ │ ├── reportWebVitals.ts │ │ │ ├── setupTests.ts │ │ │ └── store.tsx │ │ ├── tsconfig.json │ │ └── yarn.lock │ ├── native-data │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── data.json │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.test.tsx │ │ │ ├── App.tsx │ │ │ ├── index.css │ │ │ ├── index.tsx │ │ │ ├── logo.svg │ │ │ ├── react-app-env.d.ts │ │ │ ├── reportWebVitals.ts │ │ │ ├── setupTests.ts │ │ │ └── store.tsx │ │ ├── tsconfig.json │ │ └── yarn.lock │ ├── react-query │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── data.json │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.test.tsx │ │ │ ├── App.tsx │ │ │ ├── index.css │ │ │ ├── index.tsx │ │ │ ├── logo.svg │ │ │ ├── react-app-env.d.ts │ │ │ ├── reportWebVitals.ts │ │ │ ├── setupTests.ts │ │ │ └── store.tsx │ │ ├── tsconfig.json │ │ └── yarn.lock │ ├── redux │ │ ├── .gitignore │ │ ├── README.md │ │ ├── README.old.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.test.tsx │ │ │ ├── App.tsx │ │ │ ├── index.css │ │ │ ├── index.tsx │ │ │ ├── logo.svg │ │ │ ├── react-app-env.d.ts │ │ │ ├── reportWebVitals.ts │ │ │ └── setupTests.ts │ │ ├── tsconfig.json │ │ └── yarn.lock │ ├── use │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── data.json │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ ├── reportWebVitals.js │ │ │ └── setupTests.js │ │ └── yarn.lock │ ├── usecallback │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.test.tsx │ │ │ ├── App.tsx │ │ │ ├── index.css │ │ │ ├── index.tsx │ │ │ ├── logo.svg │ │ │ ├── react-app-env.d.ts │ │ │ ├── reportWebVitals.ts │ │ │ └── setupTests.ts │ │ ├── tsconfig.json │ │ └── yarn.lock │ ├── useeffect │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ ├── names.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.test.tsx │ │ │ ├── App.tsx │ │ │ ├── index.css │ │ │ ├── index.tsx │ │ │ ├── logo.svg │ │ │ ├── react-app-env.d.ts │ │ │ ├── reportWebVitals.ts │ │ │ └── setupTests.ts │ │ ├── tsconfig.json │ │ └── yarn.lock │ ├── usememo │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.test.tsx │ │ │ ├── App.tsx │ │ │ ├── index.css │ │ │ ├── index.tsx │ │ │ ├── logo.svg │ │ │ ├── react-app-env.d.ts │ │ │ ├── reportWebVitals.ts │ │ │ └── setupTests.ts │ │ ├── tsconfig.json │ │ └── yarn.lock │ ├── usereducer │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.test.tsx │ │ │ ├── App.tsx │ │ │ ├── index.css │ │ │ ├── index.tsx │ │ │ ├── logo.svg │ │ │ ├── react-app-env.d.ts │ │ │ ├── reportWebVitals.ts │ │ │ └── setupTests.ts │ │ ├── tsconfig.json │ │ └── yarn.lock │ ├── useref │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.test.tsx │ │ │ ├── App.tsx │ │ │ ├── index.css │ │ │ ├── index.tsx │ │ │ ├── logo.svg │ │ │ ├── react-app-env.d.ts │ │ │ ├── reportWebVitals.ts │ │ │ └── setupTests.ts │ │ ├── tsconfig.json │ │ └── yarn.lock │ ├── usestate │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.test.tsx │ │ │ ├── App.tsx │ │ │ ├── index.css │ │ │ ├── index.tsx │ │ │ ├── logo.svg │ │ │ ├── react-app-env.d.ts │ │ │ ├── reportWebVitals.ts │ │ │ └── setupTests.ts │ │ ├── tsconfig.json │ │ └── yarn.lock │ ├── valtio │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── data.json │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.test.tsx │ │ │ ├── App.tsx │ │ │ ├── index.css │ │ │ ├── index.tsx │ │ │ ├── logo.svg │ │ │ ├── react-app-env.d.ts │ │ │ ├── reportWebVitals.ts │ │ │ ├── setupTests.ts │ │ │ └── store.tsx │ │ ├── tsconfig.json │ │ └── yarn.lock │ └── zustand │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ ├── data.json │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ ├── src │ │ ├── App.css │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── logo.svg │ │ ├── react-app-env.d.ts │ │ ├── reportWebVitals.ts │ │ ├── setupTests.ts │ │ └── store.tsx │ │ ├── tsconfig.json │ │ └── yarn.lock └── storybook │ ├── README.md │ ├── sb-automation │ └── README.md │ ├── sb-cra │ ├── .gitignore │ ├── .npmrc │ ├── .storybook │ │ ├── main.js │ │ └── preview.js │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── reportWebVitals.js │ │ ├── setupTests.js │ │ └── stories │ │ ├── Button.jsx │ │ ├── Button.stories.jsx │ │ ├── Header.jsx │ │ ├── Header.stories.jsx │ │ ├── Introduction.stories.mdx │ │ ├── Page.jsx │ │ ├── Page.stories.jsx │ │ ├── assets │ │ ├── code-brackets.svg │ │ ├── colors.svg │ │ ├── comments.svg │ │ ├── direction.svg │ │ ├── flow.svg │ │ ├── plugin.svg │ │ ├── repo.svg │ │ └── stackalt.svg │ │ ├── button.css │ │ ├── header.css │ │ └── page.css │ ├── sb-rollup-docker │ └── README.md │ └── sb-rollup │ ├── .gitignore │ ├── .npmrc │ ├── .storybook │ ├── main.js │ └── preview.js │ ├── README.md │ ├── components │ └── index.ts │ ├── package-lock.json │ ├── package.json │ ├── stories │ ├── Button.stories.tsx │ ├── Button.tsx │ ├── Header.stories.tsx │ ├── Header.tsx │ ├── Introduction.stories.mdx │ ├── Page.stories.tsx │ ├── Page.tsx │ ├── assets │ │ ├── code-brackets.svg │ │ ├── colors.svg │ │ ├── comments.svg │ │ ├── direction.svg │ │ ├── flow.svg │ │ ├── plugin.svg │ │ ├── repo.svg │ │ └── stackalt.svg │ ├── button.css │ ├── header.css │ └── page.css │ └── tsconfig.json ├── scripts ├── README.md ├── get_jira_issue_names.js └── get_medium_posts.js ├── typescript └── README.md ├── vue ├── README.md └── nuxt │ ├── README.md │ └── tailwind-app │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── app.vue │ ├── assets │ └── css │ │ └── main.css │ ├── nuxt.config.ts │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── public │ └── favicon.ico │ ├── server │ └── tsconfig.json │ ├── tailwind.config.js │ └── tsconfig.json └── webpack └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 4, 3 | "useTabs": false, 4 | "bracketSpacing": true, 5 | "semi": true 6 | } 7 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "esbenp.prettier-vscode", 3 | "editor.formatOnSave": true, 4 | "files.trimTrailingWhitespace": true, 5 | "editor.codeActionsOnSave": null, 6 | "prettier.useTabs": false 7 | } 8 | -------------------------------------------------------------------------------- /babel/README.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | We can use the Babel tool to write code in the most recent JavaScript version. Babel will compile our code to a supported version for wider Browser compatibility. 4 | 5 | ```mermaid 6 | flowchart LR 7 | index.js --> Babel --> bundle.js 8 | ``` 9 | 10 | In 11 | 12 | ```js 13 | // ES2020 nullish coalescing 14 | function greet(input) { 15 | return input ?? "Hello world"; 16 | } 17 | ``` 18 | 19 | Out 20 | 21 | ```js 22 | function greet(input) { 23 | return input != null ? input : "Hello world"; 24 | } 25 | ``` 26 | 27 | [Source](https://github.com/babel/babel) 28 | 29 | 30 | # Intallation 31 | 32 | ```shell 33 | npm install -g babel-cli 34 | babel --version 35 | # 6.26.0 (babel-core 6.26.3) 36 | cd babel 37 | npm init 38 | npm install babel-preset-env 39 | ``` 40 | 41 | # Resources 42 | 43 | 1. [Minimal Babel Setup](https://kheohyeewei.medium.com/minimal-babel-setup-b12b563ee2ca) 44 | -------------------------------------------------------------------------------- /challenges/25/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Todos

11 |

Clean the kitchen

12 |

Book flights

13 |

Research museum

14 |

Walk the dog

15 |

Finish this course!

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /challenges/25/index.js: -------------------------------------------------------------------------------- 1 | const ps = document.querySelectorAll("p"); 2 | 3 | ps.forEach((p) => { 4 | if (p.textContent.toLowerCase().includes("the")) { 5 | p.remove(); 6 | } 7 | }); 8 | -------------------------------------------------------------------------------- /challenges/26/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Todos

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /challenges/26/index.js: -------------------------------------------------------------------------------- 1 | let todos = [ 2 | { 3 | text: "todo 1", 4 | completed: true, 5 | }, 6 | { 7 | text: "todo 2", 8 | completed: true, 9 | }, 10 | { 11 | text: "todo 3", 12 | completed: true, 13 | }, 14 | { 15 | text: "todo 4", 16 | completed: true, 17 | }, 18 | { 19 | text: "todo 5", 20 | completed: false, 21 | }, 22 | ]; 23 | 24 | const getThingsToDo = (todos) => { 25 | return todos.filter((todo, index) => { 26 | return todo.completed === false; 27 | }); 28 | }; 29 | 30 | const summary = document.createElement("h2"); 31 | summary.textContent = `You have ${getThingsToDo(todos).length} todos left`; 32 | document.querySelector("body").appendChild(summary); 33 | 34 | todos.forEach((todo) => { 35 | const p = document.createElement("p"); 36 | p.textContent = todo.text; 37 | document.querySelector("body").appendChild(p); 38 | }); 39 | -------------------------------------------------------------------------------- /challenges/27/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Todos

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /challenges/28/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Todos

11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /challenges/29/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Todos

11 | 12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /challenges/30/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Todos

11 | 12 |
13 |
14 | 15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /challenges/31/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 |

Todos

10 | 11 | 15 |
16 |
17 | 18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /challenges/32/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 |

Todos

10 | 11 | 15 |
16 |
17 | 18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /challenges/33/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 |

Todos

10 | 11 | 15 |
16 |
17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /challenges/34/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 |

Todos

10 | 11 | 15 |
16 |
17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /challenges/35/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 |

Todos

10 | 11 | 15 |
16 |
17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /challenges/36/edit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Home 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /challenges/36/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

Notes App

9 |

Take notes and never forget

10 | 11 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /challenges/36/notes-app.js: -------------------------------------------------------------------------------- 1 | const notes = getSavedNotes() 2 | 3 | const filters = { 4 | searchText: '' 5 | } 6 | 7 | renderNotes(notes, filters) 8 | 9 | document.querySelector('#create-note').addEventListener('click', function (e) { 10 | const id = uuidv4() 11 | 12 | notes.push({ 13 | id: id, 14 | title: '', 15 | body: '' 16 | }) 17 | saveNotes(notes) 18 | location.assign(`/edit.html#${id}`) 19 | }) 20 | 21 | document.querySelector('#search-text').addEventListener('input', function (e) { 22 | filters.searchText = e.target.value 23 | renderNotes(notes, filters) 24 | }) 25 | 26 | document.querySelector('#filter-by').addEventListener('change', function (e) { 27 | console.log(e.target.value) 28 | }) -------------------------------------------------------------------------------- /challenges/37/edit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Home 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /challenges/37/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

Notes App

9 |

Take notes and never forget

10 | 11 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /challenges/38/edit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Home 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /challenges/39/edit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Home 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /challenges/41/edit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Home 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /challenges/43/edit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Home 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /challenges/44/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

Todos

7 | 8 | 11 |
12 |
13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /challenges/44/todo-app.js: -------------------------------------------------------------------------------- 1 | let todos = getSavedTodos() 2 | 3 | const filters = { 4 | searchText: '', 5 | hideCompleted: false 6 | } 7 | 8 | renderTodos(todos, filters) 9 | 10 | document.querySelector('#search-text').addEventListener('input', (e) => { 11 | filters.searchText = e.target.value 12 | renderTodos(todos, filters) 13 | }) 14 | 15 | document.querySelector('#new-todo').addEventListener('submit', (e) => { 16 | e.preventDefault() 17 | todos.push({ 18 | id: uuidv4(), 19 | text: e.target.elements.text.value, 20 | completed: false 21 | }) 22 | saveTodos(todos) 23 | renderTodos(todos, filters) 24 | e.target.elements.text.value = '' 25 | }) 26 | 27 | document.querySelector('#hide-completed').addEventListener('change', (e) => { 28 | filters.hideCompleted = e.target.checked 29 | renderTodos(todos, filters) 30 | }) -------------------------------------------------------------------------------- /challenges/46/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

Todos

7 | 8 | 11 |
12 |
13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /challenges/46/todo-app.js: -------------------------------------------------------------------------------- 1 | let todos = getSavedTodos() 2 | 3 | const filters = { 4 | searchText: '', 5 | hideCompleted: false 6 | } 7 | 8 | renderTodos(todos, filters) 9 | 10 | document.querySelector('#search-text').addEventListener('input', (e) => { 11 | filters.searchText = e.target.value 12 | renderTodos(todos, filters) 13 | }) 14 | 15 | document.querySelector('#new-todo').addEventListener('submit', (e) => { 16 | e.preventDefault() 17 | todos.push({ 18 | id: uuidv4(), 19 | text: e.target.elements.text.value, 20 | completed: false 21 | }) 22 | saveTodos(todos) 23 | renderTodos(todos, filters) 24 | e.target.elements.text.value = '' 25 | }) 26 | 27 | document.querySelector('#hide-completed').addEventListener('change', (e) => { 28 | filters.hideCompleted = e.target.checked 29 | renderTodos(todos, filters) 30 | }) -------------------------------------------------------------------------------- /challenges/50/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

11 |

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /challenges/51/app.js: -------------------------------------------------------------------------------- 1 | const puzzleEl = document.querySelector('#puzzle'); 2 | const guessesEl = document.querySelector('#guesses'); 3 | const game1 = new Hangman('Cat', 2); 4 | 5 | puzzleEl.textContent = game1.getPuzzle(); 6 | guessesEl.textContent = game1.remainingGuesses; 7 | 8 | window.addEventListener('keypress', (e) => { 9 | game1.makeGuess(String.fromCharCode(e.charCode)); 10 | puzzleEl.textContent = game1.getPuzzle(); 11 | guessesEl.textContent = game1.remainingGuesses; 12 | }) 13 | -------------------------------------------------------------------------------- /challenges/51/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

11 |

12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /challenges/52/app.js: -------------------------------------------------------------------------------- 1 | const puzzleEl = document.querySelector('#puzzle') 2 | const guessesEl = document.querySelector('#guesses') 3 | const game1 = new Hangman('Cat', 2) 4 | 5 | puzzleEl.textContent = game1.getPuzzle() 6 | guessesEl.textContent = game1.getStatusMessage() 7 | 8 | window.addEventListener('keypress', function (e) { 9 | const guess = String.fromCharCode(e.charCode) 10 | game1.makeGuess(guess) 11 | puzzleEl.textContent = game1.getPuzzle() 12 | guessesEl.textContent = game1.getStatusMessage() 13 | }) -------------------------------------------------------------------------------- /challenges/52/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

7 |

8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /challenges/53/app.js: -------------------------------------------------------------------------------- 1 | const puzzleEl = document.querySelector('#puzzle') 2 | const guessesEl = document.querySelector('#guesses') 3 | const game1 = new Hangman('Cat', 2) 4 | 5 | puzzleEl.textContent = game1.getPuzzle() 6 | guessesEl.textContent = game1.getStatusMessage() 7 | 8 | window.addEventListener('keypress', function (e) { 9 | const guess = String.fromCharCode(e.charCode) 10 | game1.makeGuess(guess) 11 | puzzleEl.textContent = game1.getPuzzle() 12 | guessesEl.textContent = game1.getStatusMessage() 13 | }) -------------------------------------------------------------------------------- /challenges/53/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

7 |

8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /challenges/55/app.js: -------------------------------------------------------------------------------- 1 | const puzzleEl = document.querySelector('#puzzle') 2 | const guessesEl = document.querySelector('#guesses') 3 | const game1 = new Hangman('Car Parts', 2) 4 | 5 | puzzleEl.textContent = game1.puzzle 6 | guessesEl.textContent = game1.statusMessage 7 | 8 | window.addEventListener('keypress', function (e) { 9 | const guess = String.fromCharCode(e.charCode) 10 | game1.makeGuess(guess) 11 | puzzleEl.textContent = game1.puzzle 12 | guessesEl.textContent = game1.statusMessage 13 | }) -------------------------------------------------------------------------------- /challenges/55/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

7 |

8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /challenges/60/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

7 |

8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /challenges/61/app.js: -------------------------------------------------------------------------------- 1 | const puzzleEl = document.querySelector('#puzzle') 2 | const guessesEl = document.querySelector('#guesses') 3 | const game1 = new Hangman('Car Parts', 2) 4 | 5 | puzzleEl.textContent = game1.puzzle 6 | guessesEl.textContent = game1.statusMessage 7 | 8 | window.addEventListener('keypress', (e) => { 9 | const guess = String.fromCharCode(e.charCode) 10 | game1.makeGuess(guess) 11 | puzzleEl.textContent = game1.puzzle 12 | guessesEl.textContent = game1.statusMessage 13 | }) 14 | 15 | getPuzzle('2').then((puzzle) => { 16 | console.log(puzzle) 17 | }).catch((err) => { 18 | console.log(`Error: ${err}`) 19 | }) 20 | 21 | getLocation().then((location) => { 22 | return getCountry(location.country) 23 | }).then((country) => { 24 | console.log(country.name) 25 | }).catch((err) => { 26 | console.log(`Error: ${err}`) 27 | }) -------------------------------------------------------------------------------- /challenges/61/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

7 |

8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /challenges/62/app.js: -------------------------------------------------------------------------------- 1 | const puzzleEl = document.querySelector('#puzzle') 2 | const guessesEl = document.querySelector('#guesses') 3 | const game1 = new Hangman('Car Parts', 2) 4 | 5 | puzzleEl.textContent = game1.puzzle 6 | guessesEl.textContent = game1.statusMessage 7 | 8 | window.addEventListener('keypress', (e) => { 9 | const guess = String.fromCharCode(e.charCode) 10 | game1.makeGuess(guess) 11 | puzzleEl.textContent = game1.puzzle 12 | guessesEl.textContent = game1.statusMessage 13 | }) 14 | 15 | getPuzzle('2').then((puzzle) => { 16 | console.log(puzzle) 17 | }).catch((err) => { 18 | console.log(`Error: ${err}`) 19 | }) 20 | 21 | getLocation().then((location) => { 22 | return getCountry(location.country) 23 | }).then((country) => { 24 | console.log(country.name) 25 | }).catch((err) => { 26 | console.log(`Error: ${err}`) 27 | }) -------------------------------------------------------------------------------- /challenges/62/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

7 |

8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /challenges/63/app.js: -------------------------------------------------------------------------------- 1 | const puzzleEl = document.querySelector('#puzzle') 2 | const guessesEl = document.querySelector('#guesses') 3 | const game1 = new Hangman('Car Parts', 2) 4 | 5 | puzzleEl.textContent = game1.puzzle 6 | guessesEl.textContent = game1.statusMessage 7 | 8 | window.addEventListener('keypress', (e) => { 9 | const guess = String.fromCharCode(e.charCode) 10 | game1.makeGuess(guess) 11 | puzzleEl.textContent = game1.puzzle 12 | guessesEl.textContent = game1.statusMessage 13 | }) 14 | 15 | getPuzzle('2').then((puzzle) => { 16 | console.log(puzzle) 17 | }).catch((err) => { 18 | console.log(`Error: ${err}`) 19 | }) 20 | 21 | getLocation().then((location) => { 22 | return getCountry(location.country) 23 | }).then((country) => { 24 | console.log(country.name) 25 | }).catch((err) => { 26 | console.log(`Error: ${err}`) 27 | }) -------------------------------------------------------------------------------- /challenges/63/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

7 |

8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /challenges/64/app.js: -------------------------------------------------------------------------------- 1 | const puzzleEl = document.querySelector('#puzzle') 2 | const guessesEl = document.querySelector('#guesses') 3 | const game1 = new Hangman('Car Parts', 2) 4 | 5 | puzzleEl.textContent = game1.puzzle 6 | guessesEl.textContent = game1.statusMessage 7 | 8 | window.addEventListener('keypress', (e) => { 9 | const guess = String.fromCharCode(e.charCode) 10 | game1.makeGuess(guess) 11 | puzzleEl.textContent = game1.puzzle 12 | guessesEl.textContent = game1.statusMessage 13 | }) 14 | 15 | getPuzzle('2').then((puzzle) => { 16 | console.log(puzzle) 17 | }).catch((err) => { 18 | console.log(`Error: ${err}`) 19 | }) 20 | 21 | getCurrentCountry().then((country) => { 22 | console.log(country.name) 23 | }).catch((error) => { 24 | console.log(error) 25 | }) -------------------------------------------------------------------------------- /challenges/64/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

7 |

8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /challenges/65/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

7 |

8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /challenges/66/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/challenges/66/images/favicon.png -------------------------------------------------------------------------------- /challenges/66/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hangman 6 | 7 | 8 | 9 | 10 |
11 |
12 |

13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /chrome-extensions/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /chrome-extensions/README.md: -------------------------------------------------------------------------------- 1 | # Resources 2 | 3 | 1. [Manifest](https://developer.chrome.com/docs/extensions/mv3/manifest/) 4 | 2. [Extensions](https://developer.chrome.com/docs/extensions/) 5 | -------------------------------------------------------------------------------- /chrome-extensions/sample_1/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /chrome-extensions/sample_1/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/chrome-extensions/sample_1/icon.png -------------------------------------------------------------------------------- /chrome-extensions/sample_1/index.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | background-color: mediumseagreen; 3 | } 4 | -------------------------------------------------------------------------------- /chrome-extensions/sample_1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Extension 8 | 9 | 10 | 11 |

Extension

12 |

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /chrome-extensions/sample_1/index.js: -------------------------------------------------------------------------------- 1 | const element = document.getElementById("data"); 2 | element.textContent = "Hello world"; 3 | -------------------------------------------------------------------------------- /chrome-extensions/sample_1/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 3, 3 | "name": "Extension name", 4 | "version": "1.0.0", 5 | "description": "This is an Extension", 6 | "icons": { 7 | "16": "icon.png", 8 | "48": "icon.png", 9 | "128": "icon.png" 10 | }, 11 | "action": { 12 | "default_title": "Extension Title", 13 | "default_popup": "index.html" 14 | }, 15 | "options_page": "options.html" 16 | } 17 | -------------------------------------------------------------------------------- /chrome-extensions/sample_1/options.html: -------------------------------------------------------------------------------- 1 |

Options

2 | -------------------------------------------------------------------------------- /chrome-extensions/sample_2/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /chrome-extensions/sample_2/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/chrome-extensions/sample_2/icon.png -------------------------------------------------------------------------------- /chrome-extensions/sample_2/index.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | background-color: mediumseagreen; 3 | } 4 | -------------------------------------------------------------------------------- /chrome-extensions/sample_2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Extension 8 | 9 | 10 | 11 |

Extension

12 |

13 |

14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /chrome-extensions/sample_2/index.js: -------------------------------------------------------------------------------- 1 | const element = document.getElementById("data"); 2 | const userName = document.getElementById("user-name"); 3 | element.textContent = "Hello world"; 4 | 5 | chrome.storage.sync.get(["name_key"], (result) => { 6 | const val = result.name_key ?? "Set user name from options page"; 7 | userName.textContent = `User name is: ${val}`; 8 | }); 9 | -------------------------------------------------------------------------------- /chrome-extensions/sample_2/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 3, 3 | "name": "Extension name", 4 | "version": "1.0.0", 5 | "description": "This is an Extension", 6 | "icons": { 7 | "16": "icon.png", 8 | "48": "icon.png", 9 | "128": "icon.png" 10 | }, 11 | "action": { 12 | "default_title": "Extension Title", 13 | "default_popup": "index.html" 14 | }, 15 | "options_page": "options.html", 16 | "permissions": ["storage"] 17 | } 18 | -------------------------------------------------------------------------------- /chrome-extensions/sample_2/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Options 8 | 9 | 10 |

Options

11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /chrome-extensions/sample_2/options.js: -------------------------------------------------------------------------------- 1 | const nameIn = document.getElementById("name"); 2 | const save = document.getElementById("save"); 3 | save.addEventListener("click", () => { 4 | const val = nameIn.value; 5 | console.log(val); 6 | 7 | chrome.storage.sync.set({ name_key: val }, () => { 8 | console.log("Value is set to " + val); 9 | }); 10 | }); 11 | 12 | chrome.storage.sync.get(["name_key"], (result) => { 13 | nameIn.value = result.name_key ?? ""; 14 | console.log("Value currently is " + result.name_key); 15 | }); 16 | -------------------------------------------------------------------------------- /chrome-extensions/sample_3/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /chrome-extensions/sample_3/background.js: -------------------------------------------------------------------------------- 1 | chrome.alarms.create({ 2 | periodInMinutes: 1 / 60, 3 | }); 4 | 5 | chrome.alarms.onAlarm.addListener((alarm) => { 6 | chrome.storage.sync.get(["timer_key"], (result) => { 7 | let val = result.timer_key ?? 0; 8 | val += 1; 9 | chrome.storage.sync.set({ timer_key: val }, () => { 10 | console.log("Value is set to " + val); 11 | }); 12 | chrome.action.setBadgeText({ 13 | text: `${val}`, 14 | }); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /chrome-extensions/sample_3/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/chrome-extensions/sample_3/icon.png -------------------------------------------------------------------------------- /chrome-extensions/sample_3/index.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | background-color: mediumseagreen; 3 | } 4 | -------------------------------------------------------------------------------- /chrome-extensions/sample_3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Extension 8 | 9 | 10 | 11 |

Extension

12 |

13 |

14 |

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /chrome-extensions/sample_3/index.js: -------------------------------------------------------------------------------- 1 | const element = document.getElementById("data"); 2 | const userName = document.getElementById("user-name"); 3 | const userTimer = document.getElementById("user-timer"); 4 | element.textContent = "Hello world"; 5 | 6 | chrome.storage.sync.get(["name_key"], (result) => { 7 | const val = result.name_key ?? "Set user name from options page"; 8 | userName.textContent = `User name is: ${val}`; 9 | }); 10 | 11 | const timer = () => { 12 | chrome.storage.sync.get(["timer_key"], (result) => { 13 | const val = result.timer_key ?? 0; 14 | userTimer.textContent = `User timer is: ${val}`; 15 | }); 16 | }; 17 | 18 | timer(); 19 | setInterval(timer, 1000); 20 | -------------------------------------------------------------------------------- /chrome-extensions/sample_3/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 3, 3 | "name": "Extension name", 4 | "version": "1.0.0", 5 | "description": "This is an Extension", 6 | "icons": { 7 | "16": "icon.png", 8 | "48": "icon.png", 9 | "128": "icon.png" 10 | }, 11 | "action": { 12 | "default_title": "Extension Title", 13 | "default_popup": "index.html" 14 | }, 15 | "options_page": "options.html", 16 | "permissions": ["storage", "alarms"], 17 | "background": { 18 | "service_worker": "background.js" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /chrome-extensions/sample_3/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Options 8 | 9 | 10 |

Options

11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /chrome-extensions/sample_3/options.js: -------------------------------------------------------------------------------- 1 | const nameIn = document.getElementById("name"); 2 | const save = document.getElementById("save"); 3 | save.addEventListener("click", () => { 4 | const val = nameIn.value; 5 | console.log(val); 6 | 7 | chrome.storage.sync.set({ name_key: val }, () => { 8 | console.log("Value is set to " + val); 9 | }); 10 | }); 11 | 12 | chrome.storage.sync.get(["name_key"], (result) => { 13 | nameIn.value = result.name_key ?? ""; 14 | console.log("Value currently is " + result.name_key); 15 | }); 16 | -------------------------------------------------------------------------------- /electron/README.md: -------------------------------------------------------------------------------- 1 | # Electron-Cheatsheet 2 | Electron-Cheatsheet 3 | 4 | 5 | ``` 6 | npx create-electron-app my-app 7 | cd my-app 8 | npm start 9 | npm run make 10 | ``` 11 | 12 | 13 | Resources 14 | ============ 15 | 16 | 1. https://www.electronforge.io/ 17 | 2. https://github.com/bradtraversy/electron-course-files 18 | -------------------------------------------------------------------------------- /examples/example-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | Hello, World! 11 | 12 | 13 | 16 | 17 | -------------------------------------------------------------------------------- /examples/example-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | Hello, World! 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/example-2/index.js: -------------------------------------------------------------------------------- 1 | alert("Hello, World!"); 2 | -------------------------------------------------------------------------------- /nodejs/README.md: -------------------------------------------------------------------------------- 1 | Installation 2 | ============ 3 | 4 | 5 | ```shell 6 | node index.js 7 | ``` 8 | 9 | 10 | 11 | 12 | 13 | My Node.js Articles 14 | ============ 15 | 16 | 1. [How to Deploy a Node.js Serverless Function to Vercel](https://javascript.plainenglish.io/how-to-deploy-a-node-js-serverless-function-to-vercel-a0dc13cefa0e) 17 | -------------------------------------------------------------------------------- /nodejs/nvm/README.md: -------------------------------------------------------------------------------- 1 | | Commands | Description | 2 | |------|------| 3 | | `nvm ls` | | 4 | | `nvm ls-remote ` | | 5 | | `nvm install 18.0.0` | | 6 | | `nvm use 18.0.0` | | 7 | | `nvm alias default 18.0.0` | | 8 | -------------------------------------------------------------------------------- /npm-packages/README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /npm-packages/lint-staged/README.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | # Installation 4 | 5 | ```shell 6 | yarn add --dev lint-staged 7 | ``` 8 | 9 | # Resources 10 | 11 | 1. 12 | -------------------------------------------------------------------------------- /npm-packages/prettier/README.md: -------------------------------------------------------------------------------- 1 | # Instroduction 2 | 3 | # Installation 4 | 5 | ```shell 6 | yarn add --dev --exact prettier 7 | ``` 8 | 9 | # CLI 10 | 11 | ```shell 12 | prettier --write --ignore-unknown 13 | ``` 14 | 15 | 16 | # Resources 17 | 18 | 1. https://prettier.io/docs/en/install.html 19 | 2. https://prettier.io/docs/en/cli.html 20 | -------------------------------------------------------------------------------- /package-managers/README.md: -------------------------------------------------------------------------------- 1 | # todo 2 | -------------------------------------------------------------------------------- /package-managers/npm/README.md: -------------------------------------------------------------------------------- 1 | # NPM package 2 | 3 | ```shell 4 | npm init 5 | npm login 6 | npm publish --access=public 7 | ``` 8 | 9 | How to run production react app 10 | 11 | ```shell 12 | npm build 13 | npm install -g serve 14 | serve -s build 15 | ``` 16 | 17 | # Dependencies 18 | 19 | # devDependencies 20 | 21 | # peerDependencies 22 | -------------------------------------------------------------------------------- /package-managers/pnpm/README.md: -------------------------------------------------------------------------------- 1 | ```shell 2 | pnpm create react-app . --template typescript 3 | ``` 4 | -------------------------------------------------------------------------------- /package-managers/yarn/README.md: -------------------------------------------------------------------------------- 1 | ### React app with typescript 2 | 3 | ``` 4 | yarn create react-app app-name --template typescript 5 | ``` 6 | 7 | 8 | ### Move a module from dependencies to devDependencies : 9 | 10 | ```shell 11 | yarn remove typescript && yarn add typescript --dev 12 | ``` 13 | 14 | ### Move a module from devDependencies to dependencies : 15 | 16 | ```shell 17 | yarn remove typescript --dev && yarn add typescript 18 | ``` 19 | 20 | 21 | 22 | 23 | 24 | # Resources 25 | 1. https://stackoverflow.com/questions/73673624/cannot-activate-yarn 26 | -------------------------------------------------------------------------------- /react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | coverage 10 | 11 | # production 12 | build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /react/challenges/README.md: -------------------------------------------------------------------------------- 1 | https://www.frontendmentor.io/challenges 2 | -------------------------------------------------------------------------------- /react/create-a-react-application/README.md: -------------------------------------------------------------------------------- 1 | 2 | 1. https://reactjs.org/docs/cdn-links.html 3 | 2. using npm 4 | 3. https://create-react-app.dev/ 5 | 4. https://vitejs.dev/guide/#scaffolding-your-first-vite-project 6 | 5. https://deno.land/x/create_react_app@v0.1.2 7 | -------------------------------------------------------------------------------- /react/create-a-react-application/cdn/README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /react/create-a-react-application/cra/README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /react/create-a-react-application/deno/README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /react/create-a-react-application/npm/README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /react/create-a-react-application/vite/README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /react/data-fetching/README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /react/data-fetching/react_query/README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /react/data-fetching/swr/README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /react/playwright/README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /react/projects/tm/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | ignorePatterns: ['dist', '.eslintrc.cjs'], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': [ 14 | 'warn', 15 | { allowConstantExport: true }, 16 | ], 17 | }, 18 | } 19 | -------------------------------------------------------------------------------- /react/projects/tm/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | /public/tinymce/ 27 | .yarn/* 28 | -------------------------------------------------------------------------------- /react/projects/tm/.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: "node-modules" 2 | -------------------------------------------------------------------------------- /react/projects/tm/README.md: -------------------------------------------------------------------------------- 1 | ```shell 2 | yarn add @tinymce/tinymce-react 3 | ``` 4 | 5 | ```shell 6 | yarn add tinymce @tinymce/tinymce-react fs-extra 7 | ``` 8 | 9 | # Resources 10 | 11 | 1. https://github.com/tinymce/tinymce-react 12 | 2. https://www.tiny.cloud/docs/tinymce/6/react-cloud/ 13 | 3. https://www.tiny.cloud/docs/tinymce/6/react-pm-host/ 14 | 4. https://www.tiny.cloud/docs/tinymce/6/react-zip-host/ 15 | -------------------------------------------------------------------------------- /react/projects/tm/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react/projects/tm/postinstall.js: -------------------------------------------------------------------------------- 1 | import fse from "fs-extra"; 2 | import path, { dirname } from "path"; 3 | import { fileURLToPath } from "url"; 4 | 5 | const __filename = fileURLToPath(import.meta.url); 6 | const __dirname = dirname(__filename); 7 | const topDir = __dirname; 8 | 9 | fse.emptyDirSync(path.join(topDir, "public", "tinymce")); 10 | fse.copySync( 11 | path.join(topDir, "node_modules", "tinymce"), 12 | path.join(topDir, "public", "tinymce"), 13 | { overwrite: true } 14 | ); 15 | -------------------------------------------------------------------------------- /react/projects/tm/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/projects/tm/src/App.css -------------------------------------------------------------------------------- /react/projects/tm/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/projects/tm/src/index.css -------------------------------------------------------------------------------- /react/projects/tm/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.tsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /react/projects/tm/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/projects/tm/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src"], 24 | "references": [{ "path": "./tsconfig.node.json" }] 25 | } 26 | -------------------------------------------------------------------------------- /react/projects/tm/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /react/projects/tm/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /react/re-render/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /react/re-render/README.md: -------------------------------------------------------------------------------- 1 | # Resources 2 | 3 | 1. [why-react-re-renders](https://www.joshwcomeau.com/react/why-react-re-renders/) 4 | 2. [react-render-cheat-sheet](https://alexsidorenko.com/blog/react-render-cheat-sheet/) 5 | -------------------------------------------------------------------------------- /react/re-render/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/re-render/public/favicon.ico -------------------------------------------------------------------------------- /react/re-render/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react/re-render/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/re-render/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/re-render/src/App.css -------------------------------------------------------------------------------- /react/re-render/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /react/re-render/src/App.tsx: -------------------------------------------------------------------------------- 1 | import Parent from "pages/Parent"; 2 | import ParentChild from "pages/ParentChild"; 3 | import React from "react"; 4 | import "./App.css"; 5 | 6 | function App() { 7 | console.log("re-render"); 8 | return ( 9 |
10 |
    11 |
  1. 12 | The component re-renders when state changes. In this case only the 13 | Parent component. 14 | 15 |
    2. 16 |
  2. 17 | The components re-renders when state changes and any child components. 18 | In this case the Parent and child components. 19 | 20 |
    3. 21 |
22 |
23 | ); 24 | } 25 | 26 | export default App; 27 | -------------------------------------------------------------------------------- /react/re-render/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react/re-render/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | const root = ReactDOM.createRoot( 7 | document.getElementById("root") as HTMLElement 8 | ); 9 | root.render( 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /react/re-render/src/pages/Parent/index.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const Parent: React.FC = () => { 4 | const [count, setCount] = useState(0); 5 | 6 | return ( 7 |
8 |

The count is: {count}

9 | 12 |
13 | ); 14 | }; 15 | 16 | export default Parent; 17 | -------------------------------------------------------------------------------- /react/re-render/src/pages/ParentChild/index.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const Child: React.FC = () => { 4 | console.log("child"); 5 | return
Child
; 6 | }; 7 | 8 | const ParentChild: React.FC = () => { 9 | const [count, setCount] = useState(0); 10 | return ( 11 |
12 | Parent Child 13 |

The count is: {count}

14 | 17 | 18 |
19 | ); 20 | }; 21 | 22 | export default ParentChild; 23 | -------------------------------------------------------------------------------- /react/re-render/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react/re-render/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "target": "es5", 5 | "lib": ["dom", "dom.iterable", "esnext"], 6 | "allowJs": true, 7 | "skipLibCheck": true, 8 | "esModuleInterop": true, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "module": "esnext", 14 | "moduleResolution": "node", 15 | "resolveJsonModule": true, 16 | "isolatedModules": true, 17 | "noEmit": true, 18 | "jsx": "react-jsx" 19 | }, 20 | "include": ["src"] 21 | } 22 | -------------------------------------------------------------------------------- /react/react-component-libraries/README.md: -------------------------------------------------------------------------------- 1 | 1. [Material UI ](https://mui.com/) 2 | 2. [Ant Design](https://ant.design/) 3 | 3. [Shadcn](https://ui.shadcn.com/) 4 | 4. [Mantine](https://mantine.dev/) 5 | 5. [Tremor](https://www.tremor.so/) 6 | -------------------------------------------------------------------------------- /react/react-error-boundaries/README.md: -------------------------------------------------------------------------------- 1 | # Installation 2 | 3 | ```shell 4 | yarn create react-app react-error-boundaries --template typescript 5 | yarn add react-error-boundary 6 | yarn add antd 7 | yarn add swr 8 | yarn add node-sass 9 | yarn add miragejs 10 | yarn add faker 11 | ``` 12 | 13 | # Resources 14 | 15 | 1. [Suspense and Error Boundaries in React 18](https://www.youtube.com/watch?v=h_vVsPwvcsg) 16 | -------------------------------------------------------------------------------- /react/react-error-boundaries/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/react-error-boundaries/public/favicon.ico -------------------------------------------------------------------------------- /react/react-error-boundaries/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/react-error-boundaries/public/logo192.png -------------------------------------------------------------------------------- /react/react-error-boundaries/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/react-error-boundaries/public/logo512.png -------------------------------------------------------------------------------- /react/react-error-boundaries/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react/react-error-boundaries/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/react-error-boundaries/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react/react-error-boundaries/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /react/react-error-boundaries/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.css"; 3 | import "antd/dist/antd.css"; 4 | import GlobalError from "./pages/GlobalError"; 5 | import LocalError from "./pages/LocalError"; 6 | 7 | function App() { 8 | return ( 9 |
10 |

Handle error globally

11 | 12 |

Handle error locally

13 | 14 |
15 | ); 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /react/react-error-boundaries/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react/react-error-boundaries/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import { makeServer } from "./server"; 6 | import { SWRConfig } from "swr"; 7 | 8 | if (process.env.NODE_ENV === "development") { 9 | makeServer({ environment: "development" }); 10 | } 11 | 12 | const root = ReactDOM.createRoot( 13 | document.getElementById("root") as HTMLElement 14 | ); 15 | 16 | root.render( 17 | 18 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /react/react-error-boundaries/src/pages/GlobalError.tsx: -------------------------------------------------------------------------------- 1 | import { Card } from "antd"; 2 | import { Suspense } from "react"; 3 | import { ErrorBoundary } from "react-error-boundary"; 4 | import CardData from "./components/CardData"; 5 | 6 | const GlobalError = () => { 7 | return ( 8 | Could not fetch data.}> 9 | Loading posts...}> 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default GlobalError; 25 | -------------------------------------------------------------------------------- /react/react-error-boundaries/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/react-error-boundaries/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react/react-error-boundaries/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /react/react-lifecycle/README.md: -------------------------------------------------------------------------------- 1 | # todo 2 | -------------------------------------------------------------------------------- /react/react-lifecycle/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/react-lifecycle/public/favicon.ico -------------------------------------------------------------------------------- /react/react-lifecycle/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/react-lifecycle/public/logo192.png -------------------------------------------------------------------------------- /react/react-lifecycle/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/react-lifecycle/public/logo512.png -------------------------------------------------------------------------------- /react/react-lifecycle/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react/react-lifecycle/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/react-lifecycle/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/react-lifecycle/src/App.css -------------------------------------------------------------------------------- /react/react-lifecycle/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /react/react-lifecycle/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react/react-lifecycle/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | import { BrowserRouter } from "react-router-dom"; 7 | 8 | const root = ReactDOM.createRoot( 9 | document.getElementById("root") as HTMLElement 10 | ); 11 | root.render( 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | 19 | // If you want to start measuring performance in your app, pass a function 20 | // to log results (for example: reportWebVitals(console.log)) 21 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 22 | reportWebVitals(); 23 | -------------------------------------------------------------------------------- /react/react-lifecycle/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/react-lifecycle/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /react/react-lifecycle/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react/react-lifecycle/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /react/react-testing-library/README.md: -------------------------------------------------------------------------------- 1 | ```js 2 | import {render, screen} from '@testing-library/react' 3 | 4 | test('should show login form', () => { 5 | render(); 6 | // debug document 7 | screen.debug() 8 | }) 9 | ``` 10 | -------------------------------------------------------------------------------- /react/snippets/README.md: -------------------------------------------------------------------------------- 1 | ```jsx 2 | {tableOfContents.map((tocItem, idx) => { 3 | const { tag, text } = tocItem; 4 | return createElement(tag.toLowerCase(), { 5 | key: `${tag}-${idx}`, 6 | children: text, 7 | }); 8 | })} 9 | ``` 10 | 11 | ```jsx 12 |
") 16 | .replaceAll("\t", " "), 17 | }} 18 | /> 19 |
20 | ``` 21 | -------------------------------------------------------------------------------- /react/state-managers/context/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /react/state-managers/context/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/context/README.md -------------------------------------------------------------------------------- /react/state-managers/context/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/context/public/favicon.ico -------------------------------------------------------------------------------- /react/state-managers/context/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/context/public/logo192.png -------------------------------------------------------------------------------- /react/state-managers/context/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/context/public/logo512.png -------------------------------------------------------------------------------- /react/state-managers/context/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react/state-managers/context/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/state-managers/context/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react/state-managers/context/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /react/state-managers/context/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react/state-managers/context/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | const root = ReactDOM.createRoot( 7 | document.getElementById("root") as HTMLElement 8 | ); 9 | root.render( 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /react/state-managers/context/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react/state-managers/context/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /react/state-managers/data-redux/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /react/state-managers/data-redux/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/data-redux/README.md -------------------------------------------------------------------------------- /react/state-managers/data-redux/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/data-redux/public/favicon.ico -------------------------------------------------------------------------------- /react/state-managers/data-redux/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/data-redux/public/logo192.png -------------------------------------------------------------------------------- /react/state-managers/data-redux/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/data-redux/public/logo512.png -------------------------------------------------------------------------------- /react/state-managers/data-redux/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react/state-managers/data-redux/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/state-managers/data-redux/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react/state-managers/data-redux/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /react/state-managers/data-redux/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react/state-managers/data-redux/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /react/state-managers/data-redux/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/state-managers/data-redux/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /react/state-managers/data-redux/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react/state-managers/data-redux/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /react/state-managers/jotai/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /react/state-managers/jotai/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/jotai/README.md -------------------------------------------------------------------------------- /react/state-managers/jotai/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/jotai/public/favicon.ico -------------------------------------------------------------------------------- /react/state-managers/jotai/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/jotai/public/logo192.png -------------------------------------------------------------------------------- /react/state-managers/jotai/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/jotai/public/logo512.png -------------------------------------------------------------------------------- /react/state-managers/jotai/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react/state-managers/jotai/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/state-managers/jotai/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react/state-managers/jotai/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /react/state-managers/jotai/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react/state-managers/jotai/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /react/state-managers/jotai/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/state-managers/jotai/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /react/state-managers/jotai/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react/state-managers/jotai/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /react/state-managers/native-data/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /react/state-managers/native-data/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/native-data/README.md -------------------------------------------------------------------------------- /react/state-managers/native-data/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/native-data/public/favicon.ico -------------------------------------------------------------------------------- /react/state-managers/native-data/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/native-data/public/logo192.png -------------------------------------------------------------------------------- /react/state-managers/native-data/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/native-data/public/logo512.png -------------------------------------------------------------------------------- /react/state-managers/native-data/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react/state-managers/native-data/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/state-managers/native-data/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react/state-managers/native-data/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /react/state-managers/native-data/src/App.tsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import { DataProvider, useData } from "./store"; 3 | 4 | const SearchBox = () => { 5 | const { search, setSearch } = useData(); 6 | return ( 7 | setSearch(e.target.value)} 11 | /> 12 | ); 13 | }; 14 | 15 | const DataList: React.FC = () => { 16 | const { data } = useData(); 17 | return ( 18 |
19 | {data.map((d) => { 20 | return
{d.name}
; 21 | })} 22 |
23 | ); 24 | }; 25 | 26 | function App() { 27 | return ( 28 | 29 | 30 | 31 | 32 | ); 33 | } 34 | 35 | export default App; 36 | -------------------------------------------------------------------------------- /react/state-managers/native-data/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react/state-managers/native-data/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /react/state-managers/native-data/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/state-managers/native-data/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /react/state-managers/native-data/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react/state-managers/native-data/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /react/state-managers/react-query/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /react/state-managers/react-query/README.md: -------------------------------------------------------------------------------- 1 | ```shell 2 | yarn create react-app react-query --template typescript 3 | cd react-query 4 | yarn add react-query 5 | yarn add @tanstack/react-location 6 | ``` 7 | -------------------------------------------------------------------------------- /react/state-managers/react-query/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/react-query/public/favicon.ico -------------------------------------------------------------------------------- /react/state-managers/react-query/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/react-query/public/logo192.png -------------------------------------------------------------------------------- /react/state-managers/react-query/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/react-query/public/logo512.png -------------------------------------------------------------------------------- /react/state-managers/react-query/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react/state-managers/react-query/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/state-managers/react-query/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react/state-managers/react-query/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /react/state-managers/react-query/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react/state-managers/react-query/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /react/state-managers/react-query/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/state-managers/react-query/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /react/state-managers/react-query/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react/state-managers/react-query/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /react/state-managers/redux/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /react/state-managers/redux/README.old.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /react/state-managers/redux/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/redux/public/favicon.ico -------------------------------------------------------------------------------- /react/state-managers/redux/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/redux/public/logo192.png -------------------------------------------------------------------------------- /react/state-managers/redux/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/redux/public/logo512.png -------------------------------------------------------------------------------- /react/state-managers/redux/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react/state-managers/redux/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/state-managers/redux/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react/state-managers/redux/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /react/state-managers/redux/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | 5 | function App() { 6 | return ( 7 |
8 |
9 | logo 10 |

11 | Edit src/App.tsx and save to reload. 12 |

13 | 19 | Learn React 20 | 21 |
22 |
23 | ); 24 | } 25 | 26 | export default App; 27 | -------------------------------------------------------------------------------- /react/state-managers/redux/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react/state-managers/redux/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /react/state-managers/redux/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/state-managers/redux/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /react/state-managers/redux/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react/state-managers/redux/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /react/state-managers/use/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /react/state-managers/use/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/use/public/favicon.ico -------------------------------------------------------------------------------- /react/state-managers/use/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/use/public/logo192.png -------------------------------------------------------------------------------- /react/state-managers/use/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/use/public/logo512.png -------------------------------------------------------------------------------- /react/state-managers/use/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react/state-managers/use/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/state-managers/use/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react/state-managers/use/src/App.js: -------------------------------------------------------------------------------- 1 | import { use } from "react"; 2 | 3 | const res = fetch("/data.json").then((res) => res.json()); 4 | 5 | function App() { 6 | const data = use(res); 7 | return
{JSON.stringify(data)}
; 8 | } 9 | 10 | export default App; 11 | -------------------------------------------------------------------------------- /react/state-managers/use/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /react/state-managers/use/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react/state-managers/use/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /react/state-managers/use/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /react/state-managers/use/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react/state-managers/usecallback/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/usecallback/README.md -------------------------------------------------------------------------------- /react/state-managers/usecallback/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/usecallback/public/favicon.ico -------------------------------------------------------------------------------- /react/state-managers/usecallback/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/usecallback/public/logo192.png -------------------------------------------------------------------------------- /react/state-managers/usecallback/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/usecallback/public/logo512.png -------------------------------------------------------------------------------- /react/state-managers/usecallback/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react/state-managers/usecallback/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/state-managers/usecallback/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react/state-managers/usecallback/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /react/state-managers/usecallback/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react/state-managers/usecallback/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /react/state-managers/usecallback/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/state-managers/usecallback/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /react/state-managers/usecallback/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react/state-managers/usecallback/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /react/state-managers/useeffect/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/useeffect/README.md -------------------------------------------------------------------------------- /react/state-managers/useeffect/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/useeffect/public/favicon.ico -------------------------------------------------------------------------------- /react/state-managers/useeffect/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/useeffect/public/logo192.png -------------------------------------------------------------------------------- /react/state-managers/useeffect/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/useeffect/public/logo512.png -------------------------------------------------------------------------------- /react/state-managers/useeffect/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react/state-managers/useeffect/public/names.json: -------------------------------------------------------------------------------- 1 | ["Bob", "Rob", "Tom"] 2 | -------------------------------------------------------------------------------- /react/state-managers/useeffect/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/state-managers/useeffect/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react/state-managers/useeffect/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /react/state-managers/useeffect/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import "./App.css"; 3 | 4 | function App() { 5 | const [names, setNames] = useState([]); 6 | 7 | useEffect(() => { 8 | fetch("./names.json") 9 | .then((response) => response.json()) 10 | .then((data) => setNames(data)); 11 | }, []); 12 | 13 | return
{names?.join(", ")}
; 14 | } 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /react/state-managers/useeffect/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react/state-managers/useeffect/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /react/state-managers/useeffect/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/state-managers/useeffect/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /react/state-managers/useeffect/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react/state-managers/useeffect/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /react/state-managers/usememo/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/usememo/README.md -------------------------------------------------------------------------------- /react/state-managers/usememo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/usememo/public/favicon.ico -------------------------------------------------------------------------------- /react/state-managers/usememo/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/usememo/public/logo192.png -------------------------------------------------------------------------------- /react/state-managers/usememo/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/usememo/public/logo512.png -------------------------------------------------------------------------------- /react/state-managers/usememo/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react/state-managers/usememo/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/state-managers/usememo/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react/state-managers/usememo/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /react/state-managers/usememo/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useMemo, useState } from "react"; 2 | import "./App.css"; 3 | 4 | function App() { 5 | const [numbers, setNumbers] = useState([1, 2, 3]); 6 | 7 | // This App component will re-render on every state update. As a result, the following function will be called. 8 | // If the calculation of the function is significant, then there is no point in doing the calculation if the result is the same 9 | // const total = numbers.reduce((acc, cur) => acc + cur); 10 | // return the last value based on the dependency array, if nothing has (dependency array) changed. 11 | // And, call the function if the dependency array (numbers array) has changed 12 | const total = useMemo( 13 | () => numbers.reduce((acc, cur) => acc + cur), 14 | [numbers] 15 | ); 16 | 17 | return
{total}
; 18 | } 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /react/state-managers/usememo/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react/state-managers/usememo/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /react/state-managers/usememo/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/state-managers/usememo/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /react/state-managers/usememo/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react/state-managers/usememo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /react/state-managers/usereducer/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/usereducer/README.md -------------------------------------------------------------------------------- /react/state-managers/usereducer/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/usereducer/public/favicon.ico -------------------------------------------------------------------------------- /react/state-managers/usereducer/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/usereducer/public/logo192.png -------------------------------------------------------------------------------- /react/state-managers/usereducer/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/usereducer/public/logo512.png -------------------------------------------------------------------------------- /react/state-managers/usereducer/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react/state-managers/usereducer/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/state-managers/usereducer/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react/state-managers/usereducer/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /react/state-managers/usereducer/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react/state-managers/usereducer/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /react/state-managers/usereducer/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/state-managers/usereducer/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /react/state-managers/usereducer/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react/state-managers/usereducer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /react/state-managers/useref/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/useref/README.md -------------------------------------------------------------------------------- /react/state-managers/useref/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/useref/public/favicon.ico -------------------------------------------------------------------------------- /react/state-managers/useref/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/useref/public/logo192.png -------------------------------------------------------------------------------- /react/state-managers/useref/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/useref/public/logo512.png -------------------------------------------------------------------------------- /react/state-managers/useref/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react/state-managers/useref/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/state-managers/useref/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react/state-managers/useref/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /react/state-managers/useref/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react/state-managers/useref/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById("root") as HTMLElement 9 | ); 10 | root.render( 11 | // 12 | 13 | // 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /react/state-managers/useref/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/state-managers/useref/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /react/state-managers/useref/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react/state-managers/useref/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /react/state-managers/usestate/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/usestate/README.md -------------------------------------------------------------------------------- /react/state-managers/usestate/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/usestate/public/favicon.ico -------------------------------------------------------------------------------- /react/state-managers/usestate/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/usestate/public/logo192.png -------------------------------------------------------------------------------- /react/state-managers/usestate/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/usestate/public/logo512.png -------------------------------------------------------------------------------- /react/state-managers/usestate/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react/state-managers/usestate/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/state-managers/usestate/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react/state-managers/usestate/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /react/state-managers/usestate/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import "./App.css"; 3 | 4 | function App() { 5 | const [count, setCount] = useState(0); 6 | console.log(count); 7 | return ( 8 |
9 | {count} 10 | 11 |
12 | ); 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /react/state-managers/usestate/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react/state-managers/usestate/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /react/state-managers/usestate/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/state-managers/usestate/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /react/state-managers/usestate/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react/state-managers/usestate/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /react/state-managers/valtio/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /react/state-managers/valtio/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/valtio/README.md -------------------------------------------------------------------------------- /react/state-managers/valtio/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/valtio/public/favicon.ico -------------------------------------------------------------------------------- /react/state-managers/valtio/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/valtio/public/logo192.png -------------------------------------------------------------------------------- /react/state-managers/valtio/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/valtio/public/logo512.png -------------------------------------------------------------------------------- /react/state-managers/valtio/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react/state-managers/valtio/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/state-managers/valtio/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react/state-managers/valtio/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /react/state-managers/valtio/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react/state-managers/valtio/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /react/state-managers/valtio/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/state-managers/valtio/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /react/state-managers/valtio/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react/state-managers/valtio/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /react/state-managers/zustand/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /react/state-managers/zustand/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/zustand/README.md -------------------------------------------------------------------------------- /react/state-managers/zustand/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/zustand/public/favicon.ico -------------------------------------------------------------------------------- /react/state-managers/zustand/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/zustand/public/logo192.png -------------------------------------------------------------------------------- /react/state-managers/zustand/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/state-managers/zustand/public/logo512.png -------------------------------------------------------------------------------- /react/state-managers/zustand/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react/state-managers/zustand/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/state-managers/zustand/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react/state-managers/zustand/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /react/state-managers/zustand/src/App.tsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import { useData } from "./store"; 3 | 4 | const SearchBox = () => { 5 | const search = useData((state) => state.search); 6 | const setSearch = useData((state) => state.setSearch); 7 | return ( 8 | setSearch(e.target.value)} 12 | /> 13 | ); 14 | }; 15 | 16 | const DataList: React.FC = () => { 17 | const data = useData((state) => state.data); 18 | return ( 19 |
20 | {data.map((d) => { 21 | return
{d.name}
; 22 | })} 23 |
24 | ); 25 | }; 26 | 27 | function App() { 28 | return ( 29 | <> 30 | 31 | 32 | 33 | ); 34 | } 35 | 36 | export default App; 37 | -------------------------------------------------------------------------------- /react/state-managers/zustand/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react/state-managers/zustand/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /react/state-managers/zustand/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/state-managers/zustand/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /react/state-managers/zustand/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react/state-managers/zustand/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /react/storybook/README.md: -------------------------------------------------------------------------------- 1 | # Resources 2 | 3 | 1. https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#sorting-stories 4 | -------------------------------------------------------------------------------- /react/storybook/sb-automation/README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /react/storybook/sb-cra/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /react/storybook/sb-cra/.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true 2 | -------------------------------------------------------------------------------- /react/storybook/sb-cra/.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "stories": [ 3 | "../src/**/*.stories.mdx", 4 | "../src/**/*.stories.@(js|jsx|ts|tsx)" 5 | ], 6 | "addons": [ 7 | "@storybook/addon-links", 8 | "@storybook/addon-essentials", 9 | "@storybook/addon-interactions", 10 | "@storybook/preset-create-react-app" 11 | ], 12 | "framework": "@storybook/react", 13 | "core": { 14 | "builder": "@storybook/builder-webpack5" 15 | } 16 | } -------------------------------------------------------------------------------- /react/storybook/sb-cra/.storybook/preview.js: -------------------------------------------------------------------------------- 1 | export const parameters = { 2 | actions: { argTypesRegex: "^on[A-Z].*" }, 3 | controls: { 4 | matchers: { 5 | color: /(background|color)$/i, 6 | date: /Date$/, 7 | }, 8 | }, 9 | } -------------------------------------------------------------------------------- /react/storybook/sb-cra/README.md: -------------------------------------------------------------------------------- 1 | ```shell 2 | mkdir sb-cra 3 | cd sb-cra 4 | npm create react-app . --template typescript 5 | npx storybook init 6 | npm run storybook 7 | ``` 8 | -------------------------------------------------------------------------------- /react/storybook/sb-cra/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/storybook/sb-cra/public/favicon.ico -------------------------------------------------------------------------------- /react/storybook/sb-cra/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/storybook/sb-cra/public/logo192.png -------------------------------------------------------------------------------- /react/storybook/sb-cra/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/storybook/sb-cra/public/logo512.png -------------------------------------------------------------------------------- /react/storybook/sb-cra/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react/storybook/sb-cra/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/storybook/sb-cra/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react/storybook/sb-cra/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | 4 | function App() { 5 | return ( 6 |
7 |
8 | logo 9 |

10 | Edit src/App.js and save to reload. 11 |

12 | 18 | Learn React 19 | 20 |
21 |
22 | ); 23 | } 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /react/storybook/sb-cra/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /react/storybook/sb-cra/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react/storybook/sb-cra/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /react/storybook/sb-cra/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /react/storybook/sb-cra/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react/storybook/sb-cra/src/stories/Header.stories.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { Header } from './Header'; 4 | 5 | export default { 6 | title: 'Example/Header', 7 | component: Header, 8 | parameters: { 9 | // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout 10 | layout: 'fullscreen', 11 | }, 12 | }; 13 | 14 | const Template = (args) =>
; 15 | 16 | export const LoggedIn = Template.bind({}); 17 | LoggedIn.args = { 18 | user: { 19 | name: 'Jane Doe', 20 | }, 21 | }; 22 | 23 | export const LoggedOut = Template.bind({}); 24 | LoggedOut.args = {}; 25 | -------------------------------------------------------------------------------- /react/storybook/sb-cra/src/stories/Page.stories.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { within, userEvent } from '@storybook/testing-library'; 3 | 4 | import { Page } from './Page'; 5 | 6 | export default { 7 | title: 'Example/Page', 8 | component: Page, 9 | parameters: { 10 | // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout 11 | layout: 'fullscreen', 12 | }, 13 | }; 14 | 15 | const Template = (args) => ; 16 | 17 | // More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing 18 | export const LoggedOut = Template.bind({}); 19 | 20 | export const LoggedIn = Template.bind({}); 21 | LoggedIn.play = async ({ canvasElement }) => { 22 | const canvas = within(canvasElement); 23 | const loginButton = await canvas.getByRole('button', { name: /Log in/i }); 24 | await userEvent.click(loginButton); 25 | }; 26 | -------------------------------------------------------------------------------- /react/storybook/sb-cra/src/stories/button.css: -------------------------------------------------------------------------------- 1 | .storybook-button { 2 | font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 3 | font-weight: 700; 4 | border: 0; 5 | border-radius: 3em; 6 | cursor: pointer; 7 | display: inline-block; 8 | line-height: 1; 9 | } 10 | .storybook-button--primary { 11 | color: white; 12 | background-color: #1ea7fd; 13 | } 14 | .storybook-button--secondary { 15 | color: #333; 16 | background-color: transparent; 17 | box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; 18 | } 19 | .storybook-button--small { 20 | font-size: 12px; 21 | padding: 10px 16px; 22 | } 23 | .storybook-button--medium { 24 | font-size: 14px; 25 | padding: 11px 20px; 26 | } 27 | .storybook-button--large { 28 | font-size: 16px; 29 | padding: 12px 24px; 30 | } 31 | -------------------------------------------------------------------------------- /react/storybook/sb-cra/src/stories/header.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 3 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 4 | padding: 15px 20px; 5 | display: flex; 6 | align-items: center; 7 | justify-content: space-between; 8 | } 9 | 10 | svg { 11 | display: inline-block; 12 | vertical-align: top; 13 | } 14 | 15 | h1 { 16 | font-weight: 900; 17 | font-size: 20px; 18 | line-height: 1; 19 | margin: 6px 0 6px 10px; 20 | display: inline-block; 21 | vertical-align: top; 22 | } 23 | 24 | button + button { 25 | margin-left: 10px; 26 | } 27 | 28 | .welcome { 29 | color: #333; 30 | font-size: 14px; 31 | margin-right: 10px; 32 | } 33 | -------------------------------------------------------------------------------- /react/storybook/sb-rollup-docker/README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /react/storybook/sb-rollup/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /react/storybook/sb-rollup/.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true 2 | -------------------------------------------------------------------------------- /react/storybook/sb-rollup/.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "stories": [ 3 | "../stories/**/*.stories.mdx", 4 | "../stories/**/*.stories.@(js|jsx|ts|tsx)" 5 | ], 6 | "addons": [ 7 | "@storybook/addon-links", 8 | "@storybook/addon-essentials", 9 | "@storybook/addon-interactions" 10 | ], 11 | "framework": "@storybook/react" 12 | } -------------------------------------------------------------------------------- /react/storybook/sb-rollup/.storybook/preview.js: -------------------------------------------------------------------------------- 1 | export const parameters = { 2 | actions: { argTypesRegex: "^on[A-Z].*" }, 3 | controls: { 4 | matchers: { 5 | color: /(background|color)$/i, 6 | date: /Date$/, 7 | }, 8 | }, 9 | } -------------------------------------------------------------------------------- /react/storybook/sb-rollup/README.md: -------------------------------------------------------------------------------- 1 | ```shell 2 | mkdir sb-rollup 3 | cd sb-rollup 4 | npm init 5 | 6 | # package name: (sb-rollup) 7 | # version: (1.0.0) 8 | # description: sb-rollup 9 | # entry point: (index.js) 10 | # test command: 11 | # git repository: 12 | # keywords: 13 | # author: MZ 14 | # license: (ISC) MIT 15 | 16 | npm install --save-dev react react-dom @types/react typescript 17 | npx tsc --init 18 | npx sb init 19 | 20 | mkdir components 21 | cd components 22 | touch index.ts 23 | ``` 24 | 25 | Add the following config inside the `package.json` file. 26 | 27 | ```json 28 | "peerDependencies": { 29 | "react": "^18.2.0", 30 | "react-dom": "^18.2.0" 31 | } 32 | ``` 33 | -------------------------------------------------------------------------------- /react/storybook/sb-rollup/components/index.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/react/storybook/sb-rollup/components/index.ts -------------------------------------------------------------------------------- /react/storybook/sb-rollup/stories/Header.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { Header } from './Header'; 5 | 6 | export default { 7 | title: 'Example/Header', 8 | component: Header, 9 | parameters: { 10 | // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout 11 | layout: 'fullscreen', 12 | }, 13 | } as ComponentMeta; 14 | 15 | const Template: ComponentStory = (args) =>
; 16 | 17 | export const LoggedIn = Template.bind({}); 18 | LoggedIn.args = { 19 | user: { 20 | name: 'Jane Doe', 21 | }, 22 | }; 23 | 24 | export const LoggedOut = Template.bind({}); 25 | LoggedOut.args = {}; 26 | -------------------------------------------------------------------------------- /react/storybook/sb-rollup/stories/button.css: -------------------------------------------------------------------------------- 1 | .storybook-button { 2 | font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 3 | font-weight: 700; 4 | border: 0; 5 | border-radius: 3em; 6 | cursor: pointer; 7 | display: inline-block; 8 | line-height: 1; 9 | } 10 | .storybook-button--primary { 11 | color: white; 12 | background-color: #1ea7fd; 13 | } 14 | .storybook-button--secondary { 15 | color: #333; 16 | background-color: transparent; 17 | box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; 18 | } 19 | .storybook-button--small { 20 | font-size: 12px; 21 | padding: 10px 16px; 22 | } 23 | .storybook-button--medium { 24 | font-size: 14px; 25 | padding: 11px 20px; 26 | } 27 | .storybook-button--large { 28 | font-size: 16px; 29 | padding: 12px 24px; 30 | } 31 | -------------------------------------------------------------------------------- /react/storybook/sb-rollup/stories/header.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 3 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 4 | padding: 15px 20px; 5 | display: flex; 6 | align-items: center; 7 | justify-content: space-between; 8 | } 9 | 10 | svg { 11 | display: inline-block; 12 | vertical-align: top; 13 | } 14 | 15 | h1 { 16 | font-weight: 900; 17 | font-size: 20px; 18 | line-height: 1; 19 | margin: 6px 0 6px 10px; 20 | display: inline-block; 21 | vertical-align: top; 22 | } 23 | 24 | button + button { 25 | margin-left: 10px; 26 | } 27 | 28 | .welcome { 29 | color: #333; 30 | font-size: 14px; 31 | margin-right: 10px; 32 | } 33 | -------------------------------------------------------------------------------- /react/storybook/sb-rollup/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 4 | "jsx": "react", 5 | "module": "ESNext", 6 | "moduleResolution": "node", 7 | "resolveJsonModule": true, 8 | "allowJs": true, 9 | "declaration": true, 10 | "outDir": "lib", 11 | "noEmit": true, 12 | "declarationDir": "lib", 13 | "isolatedModules": true, 14 | "allowSyntheticDefaultImports": true, 15 | "esModuleInterop": true, 16 | "forceConsistentCasingInFileNames": true, 17 | "strict": true, 18 | "skipLibCheck": true 19 | }, 20 | "include": ["src"], 21 | "exclude": ["node_modules", "lib"] 22 | } 23 | -------------------------------------------------------------------------------- /scripts/README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /scripts/get_jira_issue_names.js: -------------------------------------------------------------------------------- 1 | let elements = document.getElementsByClassName("_btyzidpf _ca0qc4v4 _u5f3c4v4 _n3tdc4v4 _19bvc4v4 _19itglyw _19h61l7b _1u6lybqi _s7n4jp4b _1ul9idpf _p12fidpf"); 2 | 3 | for (let element of elements) { 4 | console.log(element.getElementsByTagName('a')[0].text); 5 | } 6 | -------------------------------------------------------------------------------- /vue/README.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | # Resources 4 | 5 | 1. https://pinia.vuejs.org/ 6 | -------------------------------------------------------------------------------- /vue/nuxt/README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /vue/nuxt/tailwind-app/.gitignore: -------------------------------------------------------------------------------- 1 | # Nuxt dev/build outputs 2 | .output 3 | .nuxt 4 | .nitro 5 | .cache 6 | dist 7 | 8 | # Node dependencies 9 | node_modules 10 | 11 | # Logs 12 | logs 13 | *.log 14 | 15 | # Misc 16 | .DS_Store 17 | .fleet 18 | .idea 19 | 20 | # Local env files 21 | .env 22 | .env.* 23 | !.env.example 24 | -------------------------------------------------------------------------------- /vue/nuxt/tailwind-app/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | strict-peer-dependencies=false 3 | -------------------------------------------------------------------------------- /vue/nuxt/tailwind-app/README.md: -------------------------------------------------------------------------------- 1 | # Installation 2 | 3 | ```shell 4 | npx nuxi@latest init tailwind-app 5 | cd tailwind-app 6 | npm install 7 | npm run dev 8 | ``` 9 | 10 | # Intall tailwind 11 | 12 | ```shell 13 | npm install -D tailwindcss postcss autoprefixer 14 | npx tailwindcss init 15 | ``` 16 | 17 | ```shell 18 | mkdir assets 19 | mkdir css 20 | touch main.css 21 | ``` 22 | 23 | # Resources 24 | 25 | 1. https://tailwindcss.com/docs/guides/nuxtjs#3 26 | -------------------------------------------------------------------------------- /vue/nuxt/tailwind-app/app.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /vue/nuxt/tailwind-app/assets/css/main.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /vue/nuxt/tailwind-app/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | 3 | export default defineNuxtConfig({ 4 | css: ["~/assets/css/main.css"], 5 | postcss: { 6 | plugins: [require("tailwindcss"), require("autoprefixer")], 7 | }, 8 | }); 9 | -------------------------------------------------------------------------------- /vue/nuxt/tailwind-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-app", 3 | "private": true, 4 | "scripts": { 5 | "build": "nuxt build", 6 | "dev": "nuxt dev", 7 | "generate": "nuxt generate", 8 | "preview": "nuxt preview", 9 | "postinstall": "nuxt prepare" 10 | }, 11 | "devDependencies": { 12 | "@nuxt/devtools": "latest", 13 | "@types/node": "^18", 14 | "autoprefixer": "^10.4.14", 15 | "nuxt": "^3.5.2", 16 | "postcss": "^8.4.24", 17 | "tailwindcss": "^3.3.2" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /vue/nuxt/tailwind-app/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require("tailwindcss"), require("autoprefixer")], 3 | }; 4 | -------------------------------------------------------------------------------- /vue/nuxt/tailwind-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/45732166bf98e8f554cef22f80677248108232da/vue/nuxt/tailwind-app/public/favicon.ico -------------------------------------------------------------------------------- /vue/nuxt/tailwind-app/server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.nuxt/tsconfig.server.json" 3 | } 4 | -------------------------------------------------------------------------------- /vue/nuxt/tailwind-app/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./components/**/*.{js,vue,ts}", 5 | "./layouts/**/*.vue", 6 | "./pages/**/*.vue", 7 | "./plugins/**/*.{js,ts}", 8 | "./nuxt.config.{js,ts}", 9 | "./app.vue", 10 | ], 11 | theme: { 12 | extend: {}, 13 | }, 14 | plugins: { 15 | tailwindcss: {}, 16 | autoprefixer: {}, 17 | }, 18 | }; 19 | -------------------------------------------------------------------------------- /vue/nuxt/tailwind-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /webpack/README.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | ```mermaid 4 | flowchart LR 5 | index.js --> Webpack --> bundle.js 6 | ``` 7 | 8 | # Installation 9 | 10 | ```shell 11 | npm install webpack webpack-cli 12 | ``` 13 | 14 | # Resources 15 | 16 | 1. [minimal-webpack-setup](https://kheohyeewei.medium.com/minimal-webpack-setup-a5f32c5f8960) 17 | --------------------------------------------------------------------------------