├── .gitignore ├── README.md ├── ahooks-hook ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── App2.tsx │ ├── App3.tsx │ ├── App4.tsx │ ├── App5.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ ├── useCountdown.ts │ ├── useHover.ts │ ├── useSize.ts │ ├── useTimeout.ts │ ├── useWhyDidYouUpdate.ts │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── audio-flow ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package.json ├── postcss.config.js ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── Audio.ts │ ├── assets │ │ └── react.svg │ ├── components │ │ ├── OscillatorNode.tsx │ │ ├── OutputNode.tsx │ │ └── VolumeNode.tsx │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tailwind.config.js ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── calendar-component ├── .gitignore ├── .vscode │ └── launch.json ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.tsx │ ├── Calendar │ │ ├── Header.tsx │ │ ├── LocaleContext.tsx │ │ ├── MonthCalendar.tsx │ │ ├── index.scss │ │ ├── index.tsx │ │ └── locale │ │ │ ├── en-US.ts │ │ │ ├── index.ts │ │ │ ├── interface.ts │ │ │ └── zh-CN.ts │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts ├── test.js └── tsconfig.json ├── children-test ├── .gitignore ├── 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 │ ├── App2.tsx │ ├── App3.tsx │ ├── App4.tsx │ ├── App5-1.tsx │ ├── App5-2.tsx │ ├── App5-3.tsx │ ├── App5.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── closure-trap ├── .gitignore ├── 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 │ ├── App1.tsx │ ├── App2.tsx │ ├── App3.tsx │ ├── App4.tsx │ ├── App5.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── color-picker-component ├── .gitignore ├── README.md ├── index.js ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── ColorPicker │ │ ├── ColorPickerPanel.tsx │ │ ├── Handler.tsx │ │ ├── Palette.tsx │ │ ├── Transform.tsx │ │ ├── color.ts │ │ ├── index.scss │ │ ├── interface.ts │ │ ├── useColorDrag.ts │ │ └── utils.ts │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── context-trap ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── App2.tsx │ ├── App4.tsx │ ├── App5.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── controlled-and-uncontrolled ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── App1.tsx │ ├── App2.tsx │ ├── App3.tsx │ ├── App4.tsx │ ├── App5.tsx │ ├── App6.tsx │ ├── App7.tsx │ ├── App8.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── excel-export ├── .gitignore ├── README.md ├── bundle.xlsx ├── data.xlsx ├── en-US.json ├── index.js ├── index2.js ├── index3.js ├── index4.js ├── index5.js ├── message2.csv ├── messages.csv ├── messages.json ├── package.json └── zh-CN.json ├── form-component ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── Form │ │ ├── Form.tsx │ │ ├── FormContext.ts │ │ ├── Item.tsx │ │ └── index.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── guang-components-rollup ├── README.md ├── package.json ├── rollup.config.mjs ├── src │ ├── Calendar │ │ ├── Header.tsx │ │ ├── LocaleContext.tsx │ │ ├── MonthCalendar.tsx │ │ ├── index.scss │ │ ├── index.tsx │ │ └── locale │ │ │ ├── en-US.ts │ │ │ ├── index.ts │ │ │ ├── interface.ts │ │ │ └── zh-CN.ts │ ├── Message │ │ ├── ConfigProvider.tsx │ │ ├── index.scss │ │ ├── index.tsx │ │ ├── useMessage.tsx │ │ ├── useStore.tsx │ │ └── useTimer.tsx │ ├── Watermark │ │ ├── index.tsx │ │ └── useWatermark.ts │ └── index.ts └── tsconfig.json ├── guang-components ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── Calendar │ │ ├── Header.tsx │ │ ├── LocaleContext.tsx │ │ ├── MonthCalendar.tsx │ │ ├── index.scss │ │ ├── index.tsx │ │ └── locale │ │ │ ├── en-US.ts │ │ │ ├── index.ts │ │ │ ├── interface.ts │ │ │ └── zh-CN.ts │ ├── Message │ │ ├── ConfigProvider.tsx │ │ ├── index.scss │ │ ├── index.tsx │ │ ├── useMessage.tsx │ │ ├── useStore.tsx │ │ └── useTimer.tsx │ ├── Watermark │ │ ├── index.tsx │ │ └── useWatermark.ts │ ├── index.ts │ └── vite-env.d.ts ├── tsconfig.app.json ├── tsconfig.build.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── hook-test ├── .gitignore ├── 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 │ ├── App2-1.tsx │ ├── App2.tsx │ ├── App3-2.tsx │ ├── App3-3.tsx │ ├── App3-4.tsx │ ├── App3.tsx │ ├── App4-1.tsx │ ├── App4-2.tsx │ ├── App4-3.tsx │ ├── App4.tsx │ ├── App5.tsx │ ├── App6-1.tsx │ ├── App6.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── icon-component ├── .gitignore ├── 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 │ ├── Icon │ │ ├── createFrontIconfont.tsx │ │ ├── createIcon.tsx │ │ ├── icons │ │ │ ├── IconAdd.tsx │ │ │ └── IconEmail.tsx │ │ ├── index.scss │ │ └── index.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── locate-code-test ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── Aaa.tsx │ ├── App.css │ ├── App.tsx │ ├── Bbb.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── lowcode-editor ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── postcss.config.js ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── editor │ │ ├── components │ │ │ ├── EditArea │ │ │ │ └── index.tsx │ │ │ ├── Header │ │ │ │ └── index.tsx │ │ │ ├── HoverMask │ │ │ │ └── index.tsx │ │ │ ├── Material │ │ │ │ └── index.tsx │ │ │ ├── MaterialItem │ │ │ │ └── index.tsx │ │ │ ├── MaterialWrapper │ │ │ │ └── index.tsx │ │ │ ├── Outline │ │ │ │ └── index.tsx │ │ │ ├── Preivew │ │ │ │ └── index.tsx │ │ │ ├── SelectedMask │ │ │ │ └── index.tsx │ │ │ ├── Setting │ │ │ │ ├── ActionModal.tsx │ │ │ │ ├── ComponentAttr.tsx │ │ │ │ ├── ComponentEvent.tsx │ │ │ │ ├── ComponentStyle.tsx │ │ │ │ ├── CssEditor.tsx │ │ │ │ ├── actions │ │ │ │ │ ├── ComponentMethod.tsx │ │ │ │ │ ├── CustomJS.tsx │ │ │ │ │ ├── GoToLink.tsx │ │ │ │ │ └── ShowMessage.tsx │ │ │ │ └── index.tsx │ │ │ └── Source │ │ │ │ └── index.tsx │ │ ├── hooks │ │ │ └── useMaterailDrop.ts │ │ ├── index.tsx │ │ ├── interface.ts │ │ ├── materials │ │ │ ├── Button │ │ │ │ ├── dev.tsx │ │ │ │ └── prod.tsx │ │ │ ├── Container │ │ │ │ ├── dev.tsx │ │ │ │ └── prod.tsx │ │ │ ├── Form │ │ │ │ ├── dev.tsx │ │ │ │ └── prod.tsx │ │ │ ├── FormItem │ │ │ │ ├── dev.tsx │ │ │ │ └── prod.tsx │ │ │ ├── Modal │ │ │ │ ├── dev.tsx │ │ │ │ └── prod.tsx │ │ │ ├── Page │ │ │ │ ├── dev.tsx │ │ │ │ └── prod.tsx │ │ │ ├── Table │ │ │ │ ├── dev.tsx │ │ │ │ └── prod.tsx │ │ │ └── TableColumn │ │ │ │ ├── dev.tsx │ │ │ │ └── prod.tsx │ │ └── stores │ │ │ ├── component-config.tsx │ │ │ └── components.tsx │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tailwind.config.js ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── message-component ├── .gitignore ├── 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 │ ├── Message │ │ ├── ConfigProvider.tsx │ │ ├── index.scss │ │ ├── index.tsx │ │ ├── useMessage.tsx │ │ ├── useStore.tsx │ │ └── useTimer.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── mini-calendar-test ├── .gitignore ├── 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 ├── mini-react ├── .gitignore ├── .vscode │ └── launch.json ├── README.md ├── index.html ├── package.json ├── src │ ├── index.jsx │ └── mini-react.js └── tsconfig.json ├── observer ├── IntersectionObserver.html ├── MutationObserver.html ├── PerformanceObserver.html ├── ReportingObserver.html └── ResizeObserver.html ├── onboarding-component ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── OnBoarding │ │ ├── Mask.tsx │ │ ├── getMaskStyle.ts │ │ ├── index.scss │ │ └── index.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── online-piano ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── playground-test ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ ├── test.html │ ├── test2.html │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── App2.tsx │ ├── App3.tsx │ ├── App4.tsx │ ├── assets │ │ └── react.svg │ ├── iframe.html │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── popover-component ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── App1.tsx │ ├── Popover │ │ ├── index.css │ │ └── index.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── react-dnd-test ├── .gitignore ├── .vscode │ └── launch.json ├── 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 │ ├── App2.css │ ├── App2.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── react-flow-test ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── logic │ │ ├── context.js │ │ ├── dsl.json │ │ ├── index.js │ │ ├── logic.js │ │ └── nodeFns │ │ │ ├── 1d174369-929b-4bd5-8841-f271399c4a4f.js │ │ │ ├── 81e87610-c749-4667-8382-00c62be30e2b.js │ │ │ ├── a6da6684-96c8-4595-bec6-a94122b61e30.js │ │ │ ├── c538d496-eeaa-4e95-9752-2a5d0c168e13.js │ │ │ ├── de868d18-9ec0-4dac-abbe-5cb9e3c20e2f.js │ │ │ └── index.js │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── react-intl-test ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── en-US.json │ ├── getMessage.ts │ ├── index.css │ ├── main.tsx │ ├── vite-env.d.ts │ └── zh-CN.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── react-lazyload-test ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── Guang.tsx │ ├── MyLazyLoad.tsx │ ├── assets │ │ └── react.svg │ ├── img1.png │ ├── img2.png │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── react-playground-project ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.scss │ ├── App.tsx │ ├── ReactPlayground │ │ ├── PlaygroundContext.tsx │ │ ├── components │ │ │ ├── CodeEditor │ │ │ │ ├── Editor │ │ │ │ │ ├── ata.ts │ │ │ │ │ └── index.tsx │ │ │ │ ├── FileNameList │ │ │ │ │ ├── FileNameItem.tsx │ │ │ │ │ ├── index.module.scss │ │ │ │ │ └── index.tsx │ │ │ │ └── index.tsx │ │ │ ├── Header │ │ │ │ ├── icons │ │ │ │ │ └── logo.svg │ │ │ │ ├── index.module.scss │ │ │ │ └── index.tsx │ │ │ ├── Message │ │ │ │ ├── index.module.scss │ │ │ │ └── index.tsx │ │ │ └── Preview │ │ │ │ ├── compiler.worker.ts │ │ │ │ ├── iframe.html │ │ │ │ └── index.tsx │ │ ├── files.ts │ │ ├── index.scss │ │ ├── index.tsx │ │ ├── template │ │ │ ├── App.css │ │ │ ├── App.tsx │ │ │ ├── import-map.json │ │ │ └── main.tsx │ │ └── utils.ts │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── react-spring-test ├── .gitignore ├── 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 │ ├── App2.tsx │ ├── App3.tsx │ ├── App4.tsx │ ├── App5.tsx │ ├── App6.tsx │ ├── App7.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ ├── setupTests.ts │ └── styles.css └── tsconfig.json ├── react-ts ├── .gitignore ├── 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 │ ├── App2.tsx │ ├── App3.tsx │ ├── App4.tsx │ ├── App5.tsx │ ├── App6.tsx │ ├── App7.tsx │ ├── App8.tsx │ ├── App9.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── react-unit-test ├── .gitignore ├── 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 │ ├── Toggle.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ ├── setupTests.ts │ └── useCounter.ts └── tsconfig.json ├── react-use-hook ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── App2.tsx │ ├── App3.tsx │ ├── App4.tsx │ ├── App5.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ ├── useCookie.ts │ ├── useHover.ts │ ├── useLifecycles.ts │ ├── useMountedState.ts │ ├── useScrolling.ts │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── rollup-test ├── README.md ├── my-extract-css-rollup-plugin.mjs ├── package.json ├── rollup.config.mjs ├── src │ ├── index.css │ ├── index.js │ ├── utils.css │ └── utils.js └── webpack.config.mjs ├── router-keepalive ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── keepalive.tsx │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── sb-test ├── .gitignore ├── .storybook │ ├── main.ts │ └── preview.tsx ├── 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 │ ├── Calendar │ │ ├── Header.tsx │ │ ├── LocaleContext.tsx │ │ ├── MonthCalendar.tsx │ │ ├── index.scss │ │ ├── index.tsx │ │ └── locale │ │ │ ├── en-US.ts │ │ │ ├── index.ts │ │ │ ├── interface.ts │ │ │ └── zh-CN.ts │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ ├── setupTests.ts │ └── stories │ │ ├── Button.stories.tsx │ │ ├── Button.tsx │ │ ├── Calendar.stories.tsx │ │ ├── Configure.mdx │ │ ├── Guang.mdx │ │ ├── Header.stories.ts │ │ ├── Header.tsx │ │ ├── Page.stories.ts │ │ ├── Page.tsx │ │ ├── assets │ │ ├── accessibility.png │ │ ├── accessibility.svg │ │ ├── addon-library.png │ │ ├── assets.png │ │ ├── context.png │ │ ├── discord.svg │ │ ├── docs.png │ │ ├── figma-plugin.png │ │ ├── github.svg │ │ ├── share.png │ │ ├── styling.png │ │ ├── testing.png │ │ ├── theming.png │ │ ├── tutorials.svg │ │ └── youtube.svg │ │ ├── button.css │ │ ├── header.css │ │ └── page.css └── tsconfig.json ├── slide-in-out-transition ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── Overlay.tsx │ ├── SlideInOverlay.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── space-component ├── .gitignore ├── 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 │ ├── Space │ │ ├── ConfigProvider.tsx │ │ ├── index.scss │ │ └── index.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── styled-components-test ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── App2.tsx │ ├── App3.tsx │ ├── App4.tsx │ ├── App5.tsx │ ├── App6.tsx │ ├── App7.tsx │ ├── App8.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── suspense-error-boundary ├── .gitignore ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── Aaa.tsx │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── App2.tsx │ ├── App3.jsx │ ├── App4.tsx │ ├── App5.jsx │ ├── App6.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── tailwind-test ├── .gitignore ├── README.md ├── guang.plugin.js ├── 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 └── tailwind.config.js ├── todolist-drag ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── postcss.config.js ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── TodoList │ │ ├── Gap.tsx │ │ ├── GarbageBin.tsx │ │ ├── Item.tsx │ │ ├── List.tsx │ │ ├── NewItem.tsx │ │ ├── index.tsx │ │ └── store.ts │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tailwind.config.js ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── transition-test ├── .gitignore ├── 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 │ ├── App2.css │ ├── App2.tsx │ ├── App3.css │ ├── App3.tsx │ ├── App4.css │ ├── App4.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── upload-component ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── server.js ├── src │ ├── App.css │ ├── App.tsx │ ├── Upload │ │ ├── Dragger.tsx │ │ ├── UploadList.tsx │ │ ├── index.scss │ │ └── index.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json ├── uploads │ ├── 1712302818747-37413863-2.image.png │ └── 1712302838744-147204921-3.image.png └── vite.config.ts ├── use-gesture-test ├── .gitignore ├── 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 ├── watermark-component ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── Watermark │ │ ├── index.tsx │ │ └── useWatermark.ts │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts └── zustand-test ├── .gitignore ├── .vscode └── launch.json ├── README.md ├── 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 ├── myZustand.js ├── reportWebVitals.js └── setupTests.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | 3 | *-lock.json 4 | yarn-* 5 | *-lock.yaml 6 | *.lock 7 | 8 | node_modules/ 9 | dist/ -------------------------------------------------------------------------------- /ahooks-hook/.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 | -------------------------------------------------------------------------------- /ahooks-hook/.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 | -------------------------------------------------------------------------------- /ahooks-hook/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /ahooks-hook/src/App.tsx: -------------------------------------------------------------------------------- 1 | import useCountDown from './useCountdown'; 2 | 3 | export default () => { 4 | const [countdown, formattedRes] = useCountDown({ 5 | targetDate: `${new Date().getFullYear()}-12-31 23:59:59`, 6 | }); 7 | 8 | const { days, hours, minutes, seconds, milliseconds } = formattedRes; 9 | 10 | return ( 11 |

12 | 距离今年年底还剩 {days} 天 {hours} 小时 {minutes} 分钟 {seconds} 秒 {milliseconds} 毫秒 13 |

14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /ahooks-hook/src/App2.tsx: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react'; 2 | import useSize from './useSize'; 3 | 4 | export default () => { 5 | const ref = useRef(null); 6 | const size = useSize(ref); 7 | return ( 8 |
9 |

改变窗口大小试试

10 |

11 | width: {size?.width}px, height: {size?.height}px 12 |

13 |
14 | ); 15 | }; -------------------------------------------------------------------------------- /ahooks-hook/src/App3.tsx: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react'; 2 | import useHover from './useHover'; 3 | 4 | export default () => { 5 | const ref = useRef(null); 6 | const isHovering = useHover(ref); 7 | return
{isHovering ? 'hover' : 'leaveHover'}
; 8 | }; 9 | -------------------------------------------------------------------------------- /ahooks-hook/src/App4.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import useTimeout from './useTimeout'; 3 | 4 | export default () => { 5 | const [state, setState] = useState(1); 6 | useTimeout(() => { 7 | setState(state + 1); 8 | }, 3000); 9 | 10 | return
{state}
; 11 | }; 12 | -------------------------------------------------------------------------------- /ahooks-hook/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 | -------------------------------------------------------------------------------- /ahooks-hook/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /ahooks-hook/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | "strict": true 9 | }, 10 | "include": ["vite.config.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /ahooks-hook/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 | -------------------------------------------------------------------------------- /audio-flow/.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 | -------------------------------------------------------------------------------- /audio-flow/README.md: -------------------------------------------------------------------------------- 1 | # React Flow 振荡器调音 2 | 3 | npm install 4 | 5 | npm run dev 6 | -------------------------------------------------------------------------------- /audio-flow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /audio-flow/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /audio-flow/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /audio-flow/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.tsx' 4 | import './index.css' 5 | import './Audio.ts'; 6 | 7 | createRoot(document.getElementById('root')!).render( 8 | 9 | 10 | , 11 | ) 12 | -------------------------------------------------------------------------------- /audio-flow/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /audio-flow/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } -------------------------------------------------------------------------------- /audio-flow/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /audio-flow/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 | -------------------------------------------------------------------------------- /calendar-component/.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 | -------------------------------------------------------------------------------- /calendar-component/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Launch Chrome against localhost", 11 | "url": "http://localhost:3000", 12 | "webRoot": "${workspaceFolder}" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /calendar-component/README.md: -------------------------------------------------------------------------------- 1 | # calendar 2 | 3 | npm install 4 | 5 | npm run start 6 | -------------------------------------------------------------------------------- /calendar-component/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/calendar-component/public/favicon.ico -------------------------------------------------------------------------------- /calendar-component/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/calendar-component/public/logo192.png -------------------------------------------------------------------------------- /calendar-component/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/calendar-component/public/logo512.png -------------------------------------------------------------------------------- /calendar-component/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /calendar-component/src/App.tsx: -------------------------------------------------------------------------------- 1 | import dayjs from 'dayjs'; 2 | import Calendar from './Calendar'; 3 | import { useState } from 'react'; 4 | 5 | function App() { 6 | const [value, setValue] = useState(dayjs('2023-11-08')); 7 | 8 | return ( 9 |
10 | { 11 | setValue(val) 12 | }}> 13 |
14 | ); 15 | } 16 | 17 | export default App; -------------------------------------------------------------------------------- /calendar-component/src/Calendar/LocaleContext.tsx: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export interface LocaleContextType { 4 | locale: string; 5 | } 6 | 7 | const LocaleContext = createContext({ 8 | locale: 'zh-CN' 9 | }); 10 | 11 | export default LocaleContext; 12 | -------------------------------------------------------------------------------- /calendar-component/src/Calendar/locale/index.ts: -------------------------------------------------------------------------------- 1 | import zhCN from "./zh-CN"; 2 | import enUS from "./en-US"; 3 | import { CalendarType } from "./interface"; 4 | 5 | const allLocales: Record= { 6 | 'zh-CN': zhCN, 7 | 'en-US': enUS 8 | } 9 | 10 | export default allLocales; 11 | -------------------------------------------------------------------------------- /calendar-component/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 | -------------------------------------------------------------------------------- /calendar-component/src/index.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom/client'; 2 | import App from './App'; 3 | 4 | const root = ReactDOM.createRoot( 5 | document.getElementById('root') as HTMLElement 6 | ); 7 | root.render(); -------------------------------------------------------------------------------- /calendar-component/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /calendar-component/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 | -------------------------------------------------------------------------------- /calendar-component/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 | -------------------------------------------------------------------------------- /calendar-component/test.js: -------------------------------------------------------------------------------- 1 | const dayjs = require('dayjs'); 2 | 3 | console.log(dayjs('2023-11-1').daysInMonth()); 4 | 5 | console.log(dayjs('2023-11-1').startOf('month').format('YYYY-MM-DD')); 6 | 7 | console.log(dayjs('2023-11-1').endOf('month').format('YYYY-MM-DD')); 8 | 9 | 10 | -------------------------------------------------------------------------------- /children-test/.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 | -------------------------------------------------------------------------------- /children-test/README.md: -------------------------------------------------------------------------------- 1 | # children-test 2 | 3 | npm install 4 | 5 | npm run start 6 | -------------------------------------------------------------------------------- /children-test/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/children-test/public/favicon.ico -------------------------------------------------------------------------------- /children-test/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/children-test/public/logo192.png -------------------------------------------------------------------------------- /children-test/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/children-test/public/logo512.png -------------------------------------------------------------------------------- /children-test/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /children-test/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 | -------------------------------------------------------------------------------- /children-test/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 | -------------------------------------------------------------------------------- /children-test/src/index.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom/client'; 2 | import App from './App5-3'; 3 | 4 | const root = ReactDOM.createRoot( 5 | document.getElementById('root') as HTMLElement 6 | ); 7 | root.render(); -------------------------------------------------------------------------------- /children-test/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /children-test/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 | -------------------------------------------------------------------------------- /children-test/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 | -------------------------------------------------------------------------------- /closure-trap/.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 | -------------------------------------------------------------------------------- /closure-trap/README.md: -------------------------------------------------------------------------------- 1 | # 闭包陷阱 2 | 3 | npm install 4 | 5 | npm run start -------------------------------------------------------------------------------- /closure-trap/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/closure-trap/public/favicon.ico -------------------------------------------------------------------------------- /closure-trap/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/closure-trap/public/logo192.png -------------------------------------------------------------------------------- /closure-trap/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/closure-trap/public/logo512.png -------------------------------------------------------------------------------- /closure-trap/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /closure-trap/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 | -------------------------------------------------------------------------------- /closure-trap/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | 3 | function App() { 4 | 5 | const [count,setCount] = useState(0); 6 | 7 | useEffect(() => { 8 | setInterval(() => { 9 | console.log(count); 10 | setCount(count + 1); 11 | }, 1000); 12 | }, []); 13 | 14 | return
{count}
15 | } 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /closure-trap/src/App1.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | 3 | function App() { 4 | 5 | const [count,setCount] = useState(0); 6 | 7 | useEffect(() => { 8 | console.log(count); 9 | 10 | setInterval(() => { 11 | setCount(count => count + 1); 12 | }, 1000); 13 | }, []); 14 | 15 | return
{count}
16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /closure-trap/src/App2.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | 3 | function App() { 4 | 5 | const [count,setCount] = useState(0); 6 | 7 | useEffect(() => { 8 | console.log(count); 9 | 10 | const timer = setInterval(() => { 11 | setCount(count + 1); 12 | }, 1000); 13 | 14 | return () => { 15 | clearInterval(timer); 16 | } 17 | }, [count]); 18 | 19 | return
{count}
20 | } 21 | 22 | export default App; 23 | -------------------------------------------------------------------------------- /closure-trap/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 | -------------------------------------------------------------------------------- /closure-trap/src/index.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom/client'; 2 | import App from './App4'; 3 | 4 | const root = ReactDOM.createRoot( 5 | document.getElementById('root') as HTMLElement 6 | ); 7 | root.render(); 8 | -------------------------------------------------------------------------------- /closure-trap/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /closure-trap/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 | -------------------------------------------------------------------------------- /closure-trap/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 | -------------------------------------------------------------------------------- /color-picker-component/.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 | -------------------------------------------------------------------------------- /color-picker-component/README.md: -------------------------------------------------------------------------------- 1 | # ColorPicker 2 | 3 | npm install 4 | 5 | npm run start 6 | -------------------------------------------------------------------------------- /color-picker-component/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/color-picker-component/public/favicon.ico -------------------------------------------------------------------------------- /color-picker-component/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/color-picker-component/public/logo192.png -------------------------------------------------------------------------------- /color-picker-component/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/color-picker-component/public/logo512.png -------------------------------------------------------------------------------- /color-picker-component/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /color-picker-component/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 | -------------------------------------------------------------------------------- /color-picker-component/src/ColorPicker/color.ts: -------------------------------------------------------------------------------- 1 | import { TinyColor } from '@ctrl/tinycolor'; 2 | 3 | export class Color extends TinyColor { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /color-picker-component/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 | -------------------------------------------------------------------------------- /color-picker-component/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /color-picker-component/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 | -------------------------------------------------------------------------------- /color-picker-component/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 | -------------------------------------------------------------------------------- /context-trap/.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 | -------------------------------------------------------------------------------- /context-trap/.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 | -------------------------------------------------------------------------------- /context-trap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /context-trap/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 | -------------------------------------------------------------------------------- /context-trap/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /context-trap/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | "strict": true 9 | }, 10 | "include": ["vite.config.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /context-trap/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 | -------------------------------------------------------------------------------- /controlled-and-uncontrolled/.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 | -------------------------------------------------------------------------------- /controlled-and-uncontrolled/.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 | -------------------------------------------------------------------------------- /controlled-and-uncontrolled/README.md: -------------------------------------------------------------------------------- 1 | # 受控模式 vs 非受控模式 2 | 3 | npm install 4 | 5 | npm run dev -------------------------------------------------------------------------------- /controlled-and-uncontrolled/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /controlled-and-uncontrolled/src/App1.tsx: -------------------------------------------------------------------------------- 1 | import { ChangeEvent } from "react" 2 | 3 | function App() { 4 | 5 | function onChange(event: ChangeEvent) { 6 | console.log(event.target.value); 7 | } 8 | 9 | return 10 | } 11 | 12 | export default App 13 | -------------------------------------------------------------------------------- /controlled-and-uncontrolled/src/App2.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef } from "react" 2 | 3 | function App() { 4 | 5 | const inputRef = useRef(null); 6 | 7 | useEffect(() => { 8 | setTimeout(() => { 9 | console.log(inputRef.current?.value); 10 | }, 2000); 11 | }, []); 12 | 13 | return 14 | } 15 | 16 | export default App 17 | -------------------------------------------------------------------------------- /controlled-and-uncontrolled/src/App3.tsx: -------------------------------------------------------------------------------- 1 | import { ChangeEvent, useState } from "react" 2 | 3 | function App() { 4 | 5 | const [value, setValue] = useState('guang'); 6 | 7 | console.log('render..') 8 | 9 | function onChange(event: ChangeEvent) { 10 | // console.log(event.target.value); 11 | setValue(event.target.value); 12 | } 13 | 14 | return 15 | } 16 | 17 | export default App 18 | -------------------------------------------------------------------------------- /controlled-and-uncontrolled/src/App4.tsx: -------------------------------------------------------------------------------- 1 | import { ChangeEvent, useState } from "react" 2 | 3 | function App() { 4 | 5 | const [value, setValue] = useState('guang'); 6 | 7 | function onChange(event: ChangeEvent) { 8 | console.log(event.target.value) 9 | setValue(event.target.value.toUpperCase()); 10 | } 11 | 12 | return 13 | } 14 | 15 | export default App 16 | -------------------------------------------------------------------------------- /controlled-and-uncontrolled/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 | -------------------------------------------------------------------------------- /controlled-and-uncontrolled/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /controlled-and-uncontrolled/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | "strict": true 9 | }, 10 | "include": ["vite.config.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /controlled-and-uncontrolled/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 | -------------------------------------------------------------------------------- /excel-export/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | *-lock.json 3 | -------------------------------------------------------------------------------- /excel-export/README.md: -------------------------------------------------------------------------------- 1 | # excel export 2 | 3 | exceljs 和 google sheet 实现国际化资源包导入导出 4 | 5 | npm install 6 | 7 | node ./index.js 8 | -------------------------------------------------------------------------------- /excel-export/bundle.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/excel-export/bundle.xlsx -------------------------------------------------------------------------------- /excel-export/data.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/excel-export/data.xlsx -------------------------------------------------------------------------------- /excel-export/en-US.json: -------------------------------------------------------------------------------- 1 | { 2 | "inputYourPassword": "Please input your password!", 3 | "inputYourUsername": "Please input your username!", 4 | "password": "Password", 5 | "rememberMe": "Remember Me", 6 | "submit": "Submit", 7 | "username": "Username {name}" 8 | } -------------------------------------------------------------------------------- /excel-export/message2.csv: -------------------------------------------------------------------------------- 1 | Message ID,Default Message,Description,zh-CN,en-US 2 | inputYourPassword,请输入密码！,登录页的密码为空的提示,请输入你的密码！,Please input your password! 3 | inputYourUsername,请输入用户名！,登录页的用户名为空的提示,请输入你的用户名！,Please input your username! 4 | password,密码,这是登录的密码,密码,Password 5 | rememberMe,记住我,登录页的记住我复选框,记住我333,Remember Me 6 | submit,提交,登录页的提交按钮,提交,Submit 7 | username,用户名,这是登录的用户名,用户名 {name},Username {name} -------------------------------------------------------------------------------- /excel-export/messages.csv: -------------------------------------------------------------------------------- 1 | Message ID,Default Message,Description,zh-CN,en-US 2 | inputYourPassword,请输入密码！,登录页的密码为空的提示,请输入你的密码！,Please input your password! 3 | inputYourUsername,请输入用户名！,登录页的用户名为空的提示,请输入你的用户名！,Please input your username! 4 | password,密码,这是登录的密码,密码,Password 5 | rememberMe,记住我,登录页的记住我复选框,记住我222,Remember Me 6 | submit,提交,登录页的提交按钮,提交,Submit 7 | username,用户名,这是登录的用户名,用户名 {name},Username {name} 8 | -------------------------------------------------------------------------------- /excel-export/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "excel-export", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1" 7 | }, 8 | "keywords": [], 9 | "author": "", 10 | "license": "ISC", 11 | "description": "", 12 | "dependencies": { 13 | "exceljs": "^4.4.0" 14 | }, 15 | "devDependencies": { 16 | "csv-parse": "^5.5.6", 17 | "csv-stringify": "^6.5.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /excel-export/zh-CN.json: -------------------------------------------------------------------------------- 1 | { 2 | "inputYourPassword": "请输入你的密码！", 3 | "inputYourUsername": "请输入你的用户名！", 4 | "password": "密码", 5 | "rememberMe": "记住我333", 6 | "submit": "提交", 7 | "username": "用户名 {name}" 8 | } -------------------------------------------------------------------------------- /form-component/.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 | -------------------------------------------------------------------------------- /form-component/.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 | -------------------------------------------------------------------------------- /form-component/README.md: -------------------------------------------------------------------------------- 1 | # Form 2 | 3 | npm install 4 | 5 | npm run dev -------------------------------------------------------------------------------- /form-component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /form-component/src/Form/FormContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | 3 | export interface FormContextProps { 4 | values?: Record; 5 | onValueChange?: (key: string, value: any) => void; 6 | setValues?: (values: Record) => void; 7 | validateRegister?: (name:string, cb: Function) => void; 8 | } 9 | 10 | export default createContext({}) 11 | 12 | -------------------------------------------------------------------------------- /form-component/src/Form/index.tsx: -------------------------------------------------------------------------------- 1 | import InternalForm from './Form'; 2 | import Item from './Item'; 3 | 4 | type InternalFormType = typeof InternalForm; 5 | 6 | interface FormInterface extends InternalFormType { 7 | Item: typeof Item; 8 | } 9 | 10 | const Form = InternalForm as FormInterface; 11 | 12 | Form.Item = Item; 13 | 14 | export default Form; -------------------------------------------------------------------------------- /form-component/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 | -------------------------------------------------------------------------------- /form-component/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /form-component/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | "strict": true 9 | }, 10 | "include": ["vite.config.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /form-component/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 | -------------------------------------------------------------------------------- /guang-components-rollup/src/Calendar/LocaleContext.tsx: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export interface LocaleContextType { 4 | locale: string; 5 | } 6 | 7 | const LocaleContext = createContext({ 8 | locale: 'zh-CN' 9 | }); 10 | 11 | export default LocaleContext; 12 | -------------------------------------------------------------------------------- /guang-components-rollup/src/Calendar/locale/index.ts: -------------------------------------------------------------------------------- 1 | import zhCN from "./zh-CN"; 2 | import enUS from "./en-US"; 3 | import { CalendarType } from "./interface"; 4 | 5 | const allLocales: Record= { 6 | 'zh-CN': zhCN, 7 | 'en-US': enUS 8 | } 9 | 10 | export default allLocales; 11 | -------------------------------------------------------------------------------- /guang-components-rollup/src/Message/useMessage.tsx: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import { ConfigContext } from './ConfigProvider'; 3 | import { MessageRef } from '.'; 4 | 5 | export function useMessage(): MessageRef { 6 | const { messageRef } = useContext(ConfigContext); 7 | 8 | if(!messageRef) { 9 | throw new Error('请在最外层添加 ConfigProvider 组件'); 10 | } 11 | 12 | return messageRef.current!; 13 | } 14 | -------------------------------------------------------------------------------- /guang-components-rollup/src/index.ts: -------------------------------------------------------------------------------- 1 | import Calendar, { CalendarProps } from './Calendar'; 2 | import Watermark, { WatermarkProps } from './Watermark'; 3 | import { MessageProps, Position, MessageRef} from './Message'; 4 | import { useMessage } from './Message/useMessage'; 5 | import { ConfigProvider } from './Message/ConfigProvider'; 6 | 7 | export { 8 | Calendar, 9 | Watermark, 10 | ConfigProvider, 11 | useMessage 12 | } 13 | 14 | export type { 15 | CalendarProps, 16 | WatermarkProps, 17 | MessageProps, 18 | Position, 19 | MessageRef 20 | } 21 | -------------------------------------------------------------------------------- /guang-components/.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 | -------------------------------------------------------------------------------- /guang-components/.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 | -------------------------------------------------------------------------------- /guang-components/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /guang-components/src/Calendar/LocaleContext.tsx: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export interface LocaleContextType { 4 | locale: string; 5 | } 6 | 7 | const LocaleContext = createContext({ 8 | locale: 'zh-CN' 9 | }); 10 | 11 | export default LocaleContext; 12 | -------------------------------------------------------------------------------- /guang-components/src/Calendar/locale/index.ts: -------------------------------------------------------------------------------- 1 | import zhCN from "./zh-CN"; 2 | import enUS from "./en-US"; 3 | import { CalendarType } from "./interface"; 4 | 5 | const allLocales: Record= { 6 | 'zh-CN': zhCN, 7 | 'en-US': enUS 8 | } 9 | 10 | export default allLocales; 11 | -------------------------------------------------------------------------------- /guang-components/src/Message/useMessage.tsx: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import { ConfigContext } from './ConfigProvider'; 3 | import { MessageRef } from '.'; 4 | 5 | export function useMessage(): MessageRef { 6 | const { messageRef } = useContext(ConfigContext); 7 | 8 | if(!messageRef) { 9 | throw new Error('请在最外层添加 ConfigProvider 组件'); 10 | } 11 | 12 | return messageRef.current!; 13 | } 14 | -------------------------------------------------------------------------------- /guang-components/src/index.ts: -------------------------------------------------------------------------------- 1 | import Calendar, { CalendarProps } from './Calendar'; 2 | import Watermark, { WatermarkProps } from './Watermark'; 3 | import { MessageProps, Position, MessageRef} from './Message'; 4 | import { useMessage } from './Message/useMessage'; 5 | import { ConfigProvider } from './Message/ConfigProvider'; 6 | 7 | export { 8 | Calendar, 9 | Watermark, 10 | ConfigProvider, 11 | useMessage 12 | } 13 | 14 | export type { 15 | CalendarProps, 16 | WatermarkProps, 17 | MessageProps, 18 | Position, 19 | MessageRef 20 | } 21 | -------------------------------------------------------------------------------- /guang-components/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /guang-components/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { 5 | "path": "./tsconfig.app.json" 6 | }, 7 | { 8 | "path": "./tsconfig.node.json" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /guang-components/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 5 | "skipLibCheck": true, 6 | "module": "ESNext", 7 | "moduleResolution": "bundler", 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "noEmit": true 11 | }, 12 | "include": ["vite.config.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /guang-components/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 | -------------------------------------------------------------------------------- /hook-test/.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 | -------------------------------------------------------------------------------- /hook-test/README.md: -------------------------------------------------------------------------------- 1 | # 常用 react hooks 2 | 3 | npm install 4 | 5 | npm run start -------------------------------------------------------------------------------- /hook-test/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/hook-test/public/favicon.ico -------------------------------------------------------------------------------- /hook-test/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/hook-test/public/logo192.png -------------------------------------------------------------------------------- /hook-test/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/hook-test/public/logo512.png -------------------------------------------------------------------------------- /hook-test/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /hook-test/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 | -------------------------------------------------------------------------------- /hook-test/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | function App() { 4 | const [num, setNum] = useState(() => { 5 | const num1 = 1 + 2; 6 | const num2 = 2 + 3; 7 | return num1 + num2 8 | }); 9 | 10 | return ( 11 |
setNum((prevNum) => prevNum + 1)}>{num}
12 | ); 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /hook-test/src/App2-1.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | function App() { 4 | const [num, setNum] = useState(0); 5 | 6 | useEffect(() => { 7 | console.log('effect') 8 | const timer = setInterval(() => { 9 | console.log(num); 10 | }, 1000); 11 | 12 | return () => { 13 | console.log('clean up') 14 | clearInterval(timer); 15 | } 16 | }, [num]); 17 | 18 | return ( 19 |
setNum((prevNum) => prevNum + 1)}>{num}
20 | ); 21 | } 22 | 23 | export default App; 24 | -------------------------------------------------------------------------------- /hook-test/src/App3-2.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | function App() { 4 | const [res, setRes] = useState({ result: 0}); 5 | 6 | return ( 7 |
8 |
setRes({ result: res.result + 2 })}>加
9 |
setRes({ result: res.result - 1 })}>减
10 |
{res.result}
11 |
12 | ); 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /hook-test/src/App4-1.tsx: -------------------------------------------------------------------------------- 1 | import { useRef, useState } from "react"; 2 | 3 | function App() { 4 | const numRef = useRef(0); 5 | const [, forceRender] = useState(0); 6 | 7 | return ( 8 |
9 |
{ 10 | numRef.current += 1; 11 | forceRender(Math.random()); 12 | }}>{numRef.current}
13 |
14 | ); 15 | } 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /hook-test/src/App4.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef } from "react"; 2 | 3 | function App() { 4 | const inputRef = useRef(null); 5 | 6 | useEffect(() => { 7 | inputRef.current?.focus(); 8 | }); 9 | 10 | return ( 11 |
12 | 13 |
14 | ); 15 | } 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /hook-test/src/App5.tsx: -------------------------------------------------------------------------------- 1 | import { createContext, useContext } from 'react'; 2 | 3 | const countContext = createContext(111); 4 | 5 | function Aaa() { 6 | return
7 | 8 | 9 | 10 |
11 | } 12 | 13 | function Bbb() { 14 | return
15 | } 16 | 17 | function Ccc() { 18 | const count = useContext(countContext); 19 | return

context 的值为：{count}

20 | } 21 | 22 | export default Aaa; -------------------------------------------------------------------------------- /hook-test/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 | -------------------------------------------------------------------------------- /hook-test/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /hook-test/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 | -------------------------------------------------------------------------------- /hook-test/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 | -------------------------------------------------------------------------------- /icon-component/.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 | -------------------------------------------------------------------------------- /icon-component/README.md: -------------------------------------------------------------------------------- 1 | # icon 组件 2 | 3 | npm install 4 | 5 | npm run start -------------------------------------------------------------------------------- /icon-component/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/icon-component/public/favicon.ico -------------------------------------------------------------------------------- /icon-component/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/icon-component/public/logo192.png -------------------------------------------------------------------------------- /icon-component/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/icon-component/public/logo512.png -------------------------------------------------------------------------------- /icon-component/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /icon-component/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 | -------------------------------------------------------------------------------- /icon-component/src/Icon/icons/IconAdd.tsx: -------------------------------------------------------------------------------- 1 | import { createIcon } from '../createIcon'; 2 | 3 | export const IconAdd = createIcon({ 4 | content: ( 5 | <> 6 | 7 | 8 | ), 9 | }); 10 | -------------------------------------------------------------------------------- /icon-component/src/Icon/index.scss: -------------------------------------------------------------------------------- 1 | @keyframes spin { 2 | 0% { 3 | transform: rotate(0deg); 4 | } 5 | 6 | 100% { 7 | transform: rotate(360deg); 8 | } 9 | } 10 | 11 | .icon { 12 | display: inline-block; 13 | } 14 | 15 | .icon-spin { 16 | animation: spin 1s linear infinite; 17 | } 18 | -------------------------------------------------------------------------------- /icon-component/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 | -------------------------------------------------------------------------------- /icon-component/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /icon-component/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 | -------------------------------------------------------------------------------- /icon-component/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 | -------------------------------------------------------------------------------- /locate-code-test/.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 | -------------------------------------------------------------------------------- /locate-code-test/.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 | -------------------------------------------------------------------------------- /locate-code-test/README.md: -------------------------------------------------------------------------------- 1 | # click-to-react-component 2 | 3 | 快速定位组件源码 4 | 5 | npm install 6 | 7 | npm run dev 8 | -------------------------------------------------------------------------------- /locate-code-test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /locate-code-test/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.tsx' 4 | // @ts-ignore 5 | import { ClickToComponent } from 'click-to-react-component'; 6 | 7 | ReactDOM.createRoot(document.getElementById('root')!).render( 8 | <> 9 | 10 | 11 | 12 | ) 13 | -------------------------------------------------------------------------------- /locate-code-test/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /locate-code-test/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | "strict": true 9 | }, 10 | "include": ["vite.config.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /locate-code-test/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 | -------------------------------------------------------------------------------- /lowcode-editor/.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 | -------------------------------------------------------------------------------- /lowcode-editor/.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 | -------------------------------------------------------------------------------- /lowcode-editor/README.md: -------------------------------------------------------------------------------- 1 | # 低代码编辑器 2 | 3 | npm install 4 | 5 | npm run dev -------------------------------------------------------------------------------- /lowcode-editor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /lowcode-editor/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /lowcode-editor/src/App.tsx: -------------------------------------------------------------------------------- 1 | import LowcodeEditor from './editor/'; 2 | 3 | function App() { 4 | return ( 5 | 6 | ) 7 | } 8 | 9 | export default App -------------------------------------------------------------------------------- /lowcode-editor/src/editor/components/Outline/index.tsx: -------------------------------------------------------------------------------- 1 | import { Tree } from "antd"; 2 | import { useComponetsStore } from "../../stores/components"; 3 | 4 | export function Outline() { 5 | const { components, setCurComponentId } = useComponetsStore(); 6 | 7 | return { 13 | setCurComponentId(selectedKey as number); 14 | }} 15 | /> 16 | } -------------------------------------------------------------------------------- /lowcode-editor/src/editor/interface.ts: -------------------------------------------------------------------------------- 1 | import { CSSProperties, PropsWithChildren } from "react"; 2 | 3 | export interface CommonComponentProps extends PropsWithChildren{ 4 | id: number; 5 | name: string; 6 | styles?: CSSProperties 7 | [key: string]: any 8 | } -------------------------------------------------------------------------------- /lowcode-editor/src/editor/materials/Button/prod.tsx: -------------------------------------------------------------------------------- 1 | import { Button as AntdButton } from 'antd'; 2 | import { CommonComponentProps } from '../../interface'; 3 | 4 | const Button = ({id, type, text, styles, ...props}: CommonComponentProps) => { 5 | return ( 6 | {text} 7 | ) 8 | } 9 | 10 | export default Button; -------------------------------------------------------------------------------- /lowcode-editor/src/editor/materials/Container/prod.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { CommonComponentProps } from '../../interface'; 3 | 4 | const Container = ({ id, children, styles }: CommonComponentProps) => { 5 | 6 | return ( 7 |
{children}
11 | ) 12 | } 13 | 14 | export default Container; -------------------------------------------------------------------------------- /lowcode-editor/src/editor/materials/FormItem/dev.tsx: -------------------------------------------------------------------------------- 1 | const FormItem = () => <>; 2 | 3 | export default FormItem; 4 | -------------------------------------------------------------------------------- /lowcode-editor/src/editor/materials/FormItem/prod.tsx: -------------------------------------------------------------------------------- 1 | const FormItem = () => <>; 2 | 3 | export default FormItem; 4 | -------------------------------------------------------------------------------- /lowcode-editor/src/editor/materials/Page/prod.tsx: -------------------------------------------------------------------------------- 1 | import { CommonComponentProps } from "../../interface"; 2 | 3 | function Page({ id, name, children, styles }: CommonComponentProps) { 4 | 5 | return ( 6 |
10 | {children} 11 |
12 | ) 13 | } 14 | 15 | export default Page; -------------------------------------------------------------------------------- /lowcode-editor/src/editor/materials/TableColumn/dev.tsx: -------------------------------------------------------------------------------- 1 | const TableColumn = () => { 2 | return <> 3 | } 4 | 5 | export default TableColumn; -------------------------------------------------------------------------------- /lowcode-editor/src/editor/materials/TableColumn/prod.tsx: -------------------------------------------------------------------------------- 1 | const TableColumn = () => { 2 | return <> 3 | } 4 | 5 | export default TableColumn; -------------------------------------------------------------------------------- /lowcode-editor/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .monaco-editor .suggestions-widget { 6 | z-index: 10000; 7 | } -------------------------------------------------------------------------------- /lowcode-editor/src/main.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom/client' 2 | import App from './App.tsx' 3 | import './index.css' 4 | import { HTML5Backend } from 'react-dnd-html5-backend' 5 | import { DndProvider } from 'react-dnd' 6 | 7 | ReactDOM.createRoot(document.getElementById('root')!).render( 8 | 9 | 10 | 11 | ) -------------------------------------------------------------------------------- /lowcode-editor/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /lowcode-editor/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } -------------------------------------------------------------------------------- /lowcode-editor/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { 5 | "path": "./tsconfig.app.json" 6 | }, 7 | { 8 | "path": "./tsconfig.node.json" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /lowcode-editor/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 5 | "skipLibCheck": true, 6 | "module": "ESNext", 7 | "moduleResolution": "bundler", 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "noEmit": true 11 | }, 12 | "include": ["vite.config.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /lowcode-editor/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 | -------------------------------------------------------------------------------- /message-component/.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 | -------------------------------------------------------------------------------- /message-component/README.md: -------------------------------------------------------------------------------- 1 | # Message 组件 2 | 3 | npm install 4 | 5 | npm run start 6 | -------------------------------------------------------------------------------- /message-component/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/message-component/public/favicon.ico -------------------------------------------------------------------------------- /message-component/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/message-component/public/logo192.png -------------------------------------------------------------------------------- /message-component/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/message-component/public/logo512.png -------------------------------------------------------------------------------- /message-component/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /message-component/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 | -------------------------------------------------------------------------------- /message-component/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { ConfigProvider } from "./Message/ConfigProvider"; 2 | import { useMessage } from "./Message/useMessage"; 3 | 4 | function Aaa() { 5 | const message = useMessage(); 6 | 7 | return 12 | } 13 | 14 | function App() { 15 | 16 | return ( 17 | 18 |
19 | 20 |
21 | 22 | ); 23 | } 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /message-component/src/Message/useMessage.tsx: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import { ConfigContext } from './ConfigProvider'; 3 | import { MessageRef } from '.'; 4 | 5 | export function useMessage(): MessageRef { 6 | const { messageRef } = useContext(ConfigContext); 7 | 8 | if(!messageRef) { 9 | throw new Error('请在最外层添加 ConfigProvider 组件'); 10 | } 11 | 12 | return messageRef.current!; 13 | } 14 | -------------------------------------------------------------------------------- /message-component/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 | -------------------------------------------------------------------------------- /message-component/src/index.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom/client'; 2 | import App from './App'; 3 | 4 | const root = ReactDOM.createRoot( 5 | document.getElementById('root') as HTMLElement 6 | ); 7 | root.render(); 8 | -------------------------------------------------------------------------------- /message-component/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /message-component/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 | -------------------------------------------------------------------------------- /message-component/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 | -------------------------------------------------------------------------------- /mini-calendar-test/.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 | -------------------------------------------------------------------------------- /mini-calendar-test/README.md: -------------------------------------------------------------------------------- 1 | # mini calendar 2 | 3 | npm install 4 | 5 | npm run start 6 | -------------------------------------------------------------------------------- /mini-calendar-test/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/mini-calendar-test/public/favicon.ico -------------------------------------------------------------------------------- /mini-calendar-test/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/mini-calendar-test/public/logo192.png -------------------------------------------------------------------------------- /mini-calendar-test/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/mini-calendar-test/public/logo512.png -------------------------------------------------------------------------------- /mini-calendar-test/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /mini-calendar-test/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuarkGluonPlasma/react-course-code/b26ac6ebd7b2e4e2ae141da52ce720891c67d71a/mini-calendar-test/src/App.css -------------------------------------------------------------------------------- /mini-calendar-test/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 | -------------------------------------------------------------------------------- /mini-calendar-test/src/index.css: -------------------------------------------------------------------------------- 1 | .calendar { 2 | border: 1px solid #aaa; 3 | padding: 10px; 4 | width: 300px; 5 | height: 250px; 6 | } 7 | 8 | .header { 9 | display: flex; 10 | justify-content: space-between; 11 | align-items: center; 12 | height: 40px; 13 | } 14 | 15 | .days { 16 | display: flex; 17 | flex-wrap: wrap; 18 | } 19 | 20 | .empty, .day { 21 | width: calc(100% / 7); 22 | text-align: center; 23 | line-height: 30px; 24 | } 25 | 26 | .day:hover, .selected { 27 | background-color: #ccc; 28 | cursor: pointer; 29 | } -------------------------------------------------------------------------------- /mini-calendar-test/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /mini-calendar-test/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 | -------------------------------------------------------------------------------- /mini-calendar-test/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 | -------------------------------------------------------------------------------- /mini-react/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist -------------------------------------------------------------------------------- /mini-react/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Launch Chrome against localhost", 11 | "url": "http://localhost:8080", 12 | "webRoot": "${workspaceFolder}" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /mini-react/README.md: -------------------------------------------------------------------------------- 1 | # mini react 2 | 3 | npm install 4 | 5 | npx tsc -w 6 | 7 | npx http-server . 8 | -------------------------------------------------------------------------------- /mini-react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /mini-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mini-react", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "typescript": "^5.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /observer/ReportingObserver.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /onboarding-component/.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 | -------------------------------------------------------------------------------- /onboarding-component/.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 | -------------------------------------------------------------------------------- /onboarding-component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /onboarding-component/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 | -------------------------------------------------------------------------------- /onboarding-component/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /onboarding-component/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | "strict": true 9 | }, 10 | "include": ["vite.config.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /onboarding-component/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 | -------------------------------------------------------------------------------- /online-piano/.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 | -------------------------------------------------------------------------------- /online-piano/README.md: -------------------------------------------------------------------------------- 1 | # online piano 2 | 3 | npm install 4 | 5 | npm run dev 6 | -------------------------------------------------------------------------------- /online-piano/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /online-piano/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.tsx' 4 | 5 | createRoot(document.getElementById('root')!).render( 6 | 7 | ) 8 | -------------------------------------------------------------------------------- /online-piano/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /online-piano/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /online-piano/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 | -------------------------------------------------------------------------------- /playground-test/.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 | -------------------------------------------------------------------------------- /playground-test/.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 | -------------------------------------------------------------------------------- /playground-test/README.md: -------------------------------------------------------------------------------- 1 | # playground 思路分析 2 | 3 | npm install 4 | 5 | npm run dev -------------------------------------------------------------------------------- /playground-test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /playground-test/public/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 16 | 21 | 22 | -------------------------------------------------------------------------------- /playground-test/src/App4.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import iframeRaw from './iframe.html?raw'; 4 | 5 | const iframeUrl = URL.createObjectURL(new Blob([iframeRaw], { type: 'text/html' })); 6 | 7 | const Preview: React.FC = () => { 8 | 9 | return ( 10 |