├── .babelrc
├── .gitignore
├── README.md
├── config
    ├── env.js
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── modules.js
    ├── paths.js
    ├── pnpTs.js
    ├── webpack.config.js
    └── webpackDevServer.config.js
├── index.html
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── manifest.json
├── scripts
    ├── build.js
    ├── start.js
    └── test.js
├── src
    ├── course
    │   ├── 2.closure
    │   │   ├── app.tsx
    │   │   ├── index.jsx
    │   │   └── state.ts
    │   ├── customHooks
    │   │   ├── EqualArr
    │   │   │   ├── equalArr.ts
    │   │   │   ├── index.tsx
    │   │   │   └── style.scss
    │   │   ├── EqualArrPlus
    │   │   │   ├── index.tsx
    │   │   │   ├── style.scss
    │   │   │   └── useEqualArr.ts
    │   │   ├── MousePos
    │   │   │   ├── index.tsx
    │   │   │   └── usePointor.ts
    │   │   ├── MousePos2
    │   │   │   ├── Mouse.tsx
    │   │   │   └── index.tsx
    │   │   ├── ZhihuFeed
    │   │   │   ├── api.ts
    │   │   │   ├── index.tsx
    │   │   │   ├── style.scss
    │   │   │   └── useFeed.ts
    │   │   ├── ZhihuFeed2
    │   │   │   ├── api.ts
    │   │   │   ├── index.tsx
    │   │   │   ├── style.scss
    │   │   │   └── useFeed.ts
    │   │   ├── app.tsx
    │   │   ├── style.scss
    │   │   ├── useCouter.ts
    │   │   ├── useEqual.ts
    │   │   ├── useInitial.ts
    │   │   ├── useLogin.ts
    │   │   ├── usePageTitle.ts
    │   │   ├── useSurvivalTime.ts
    │   │   ├── useUserInfo.ts
    │   │   └── withMousePos.jsx
    │   ├── introduce
    │   │   ├── controlledByClass.tsx
    │   │   ├── controlledByHooks.tsx
    │   │   ├── demoByClass.tsx
    │   │   ├── demoByHooks.tsx
    │   │   └── index.tsx
    │   ├── useCallback
    │   │   ├── index.tsx
    │   │   └── utils.ts
    │   ├── useContext
    │   │   ├── context.tsx
    │   │   ├── context2.tsx
    │   │   ├── demo
    │   │   │   ├── components
    │   │   │   │   ├── Home
    │   │   │   │   │   ├── api.ts
    │   │   │   │   │   ├── index.tsx
    │   │   │   │   │   └── style.scss
    │   │   │   │   ├── Hot
    │   │   │   │   │   ├── api.ts
    │   │   │   │   │   ├── index.tsx
    │   │   │   │   │   └── style.scss
    │   │   │   │   └── Setting
    │   │   │   │   │   ├── index.scss
    │   │   │   │   │   └── index.tsx
    │   │   │   ├── context.tsx
    │   │   │   ├── index.scss
    │   │   │   └── index.tsx
    │   │   └── index.tsx
    │   ├── useContextWithReducer
    │   │   ├── context.tsx
    │   │   └── index.tsx
    │   ├── useEffect
    │   │   ├── demo01.tsx
    │   │   ├── demo02.tsx
    │   │   ├── demo03.tsx
    │   │   └── style.scss
    │   ├── useReducer
    │   │   ├── Counter
    │   │   │   ├── combineReducer.ts
    │   │   │   ├── index.tsx
    │   │   │   └── reducer.ts
    │   │   ├── ZhihuFeed2
    │   │   │   ├── api.ts
    │   │   │   ├── index.tsx
    │   │   │   ├── style.scss
    │   │   │   └── useFeed.ts
    │   │   ├── context.tsx
    │   │   └── index.tsx
    │   ├── useRef
    │   │   ├── BaseRefClass.tsx
    │   │   ├── BaseRefFunction.tsx
    │   │   ├── components
    │   │   │   ├── Input
    │   │   │   │   └── index.tsx
    │   │   │   └── InputBase
    │   │   │   │   └── index.tsx
    │   │   ├── index.tsx
    │   │   └── timer.tsx
    │   └── useState
    │   │   ├── Demo.tsx
    │   │   ├── Rectangle
    │   │       ├── index.scss
    │   │       └── index.tsx
    │   │   └── asyncDemo.tsx
    ├── index.css
    ├── index.tsx
    ├── logo.svg
    ├── react-app-env.d.ts
    └── serviceWorker.ts
├── tsconfig.json
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "react-app"
4 |   ],
5 |   "plugins": [
6 |     ["import", { "libraryName": "antd-mobile", "style": "css" }] // `style: true` 会加载 less 文件
7 |   ]
8 | }


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-hooks
2 | React Hooks
3 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.  Variable expansion is supported in .env files.
31 | // https://github.com/motdotla/dotenv
32 | // https://github.com/motdotla/dotenv-expand
33 | dotenvFiles.forEach(dotenvFile => {
34 |   if (fs.existsSync(dotenvFile)) {
35 |     require('dotenv-expand')(
36 |       require('dotenv').config({
37 |         path: dotenvFile,
38 |       })
39 |     );
40 |   }
41 | });
42 | 
43 | // We support resolving modules according to `NODE_PATH`.
44 | // This lets you use absolute paths in imports inside large monorepos:
45 | // https://github.com/facebook/create-react-app/issues/253.
46 | // It works similar to `NODE_PATH` in Node itself:
47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
50 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
51 | // We also resolve them to make sure all tools using them work consistently.
52 | const appDirectory = fs.realpathSync(process.cwd());
53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
54 |   .split(path.delimiter)
55 |   .filter(folder => folder && !path.isAbsolute(folder))
56 |   .map(folder => path.resolve(appDirectory, folder))
57 |   .join(path.delimiter);
58 | 
59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60 | // injected into the application via DefinePlugin in Webpack configuration.
61 | const REACT_APP = /^REACT_APP_/i;
62 | 
63 | function getClientEnvironment(publicUrl) {
64 |   const raw = Object.keys(process.env)
65 |     .filter(key => REACT_APP.test(key))
66 |     .reduce(
67 |       (env, key) => {
68 |         env[key] = process.env[key];
69 |         return env;
70 |       },
71 |       {
72 |         // Useful for determining whether we’re running in production mode.
73 |         // Most importantly, it switches React into the correct mode.
74 |         NODE_ENV: process.env.NODE_ENV || 'development',
75 |         // Useful for resolving the correct path to static assets in `public`.
76 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
77 |         // This should only be used as an escape hatch. Normally you would put
78 |         // images into the `src` and `import` them in code to get their paths.
79 |         PUBLIC_URL: publicUrl,
80 |       }
81 |     );
82 |   // Stringify all values so we can feed into Webpack DefinePlugin
83 |   const stringified = {
84 |     'process.env': Object.keys(raw).reduce((env, key) => {
85 |       env[key] = JSON.stringify(raw[key]);
86 |       return env;
87 |     }, {}),
88 |   };
89 | 
90 |   return { raw, stringified };
91 | }
92 | 
93 | module.exports = getClientEnvironment;
94 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/en/webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const camelcase = require('camelcase');
 5 | 
 6 | // This is a custom Jest transformer turning file imports into filenames.
 7 | // http://facebook.github.io/jest/docs/en/webpack.html
 8 | 
 9 | module.exports = {
10 |   process(src, filename) {
11 |     const assetFilename = JSON.stringify(path.basename(filename));
12 | 
13 |     if (filename.match(/\.svg$/)) {
14 |       // Based on how SVGR generates a component name:
15 |       // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
16 |       const pascalCaseFileName = camelcase(path.parse(filename).name, {
17 |         pascalCase: true,
18 |       });
19 |       const componentName = `Svg${pascalCaseFileName}`;
20 |       return `const React = require('react');
21 |       module.exports = {
22 |         __esModule: true,
23 |         default: ${assetFilename},
24 |         ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
25 |           return {
26 |             $$typeof: Symbol.for('react.element'),
27 |             type: 'svg',
28 |             ref: ref,
29 |             key: null,
30 |             props: Object.assign({}, props, {
31 |               children: ${assetFilename}
32 |             })
33 |           };
34 |         }),
35 |       };`;
36 |     }
37 | 
38 |     return `module.exports = ${assetFilename};`;
39 |   },
40 | };
41 | 


--------------------------------------------------------------------------------
/config/modules.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | const chalk = require('react-dev-utils/chalk');
 7 | 
 8 | /**
 9 |  * Get the baseUrl of a compilerOptions object.
10 |  *
11 |  * @param {Object} options
12 |  */
13 | function getAdditionalModulePaths(options = {}) {
14 |   const baseUrl = options.baseUrl;
15 | 
16 |   // We need to explicitly check for null and undefined (and not a falsy value) because
17 |   // TypeScript treats an empty string as `.`.
18 |   if (baseUrl == null) {
19 |     // If there's no baseUrl set we respect NODE_PATH
20 |     // Note that NODE_PATH is deprecated and will be removed
21 |     // in the next major release of create-react-app.
22 | 
23 |     const nodePath = process.env.NODE_PATH || '';
24 |     return nodePath.split(path.delimiter).filter(Boolean);
25 |   }
26 | 
27 |   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
28 | 
29 |   // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
30 |   // the default behavior.
31 |   if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
32 |     return null;
33 |   }
34 | 
35 |   // Allow the user set the `baseUrl` to `appSrc`.
36 |   if (path.relative(paths.appSrc, baseUrlResolved) === '') {
37 |     return [paths.appSrc];
38 |   }
39 | 
40 |   // Otherwise, throw an error.
41 |   throw new Error(
42 |     chalk.red.bold(
43 |       "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
44 |         ' Create React App does not support other values at this time.'
45 |     )
46 |   );
47 | }
48 | 
49 | function getModules() {
50 |   // Check if TypeScript is setup
51 |   const hasTsConfig = fs.existsSync(paths.appTsConfig);
52 |   const hasJsConfig = fs.existsSync(paths.appJsConfig);
53 | 
54 |   if (hasTsConfig && hasJsConfig) {
55 |     throw new Error(
56 |       'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
57 |     );
58 |   }
59 | 
60 |   let config;
61 | 
62 |   // If there's a tsconfig.json we assume it's a
63 |   // TypeScript project and set up the config
64 |   // based on tsconfig.json
65 |   if (hasTsConfig) {
66 |     config = require(paths.appTsConfig);
67 |     // Otherwise we'll check if there is jsconfig.json
68 |     // for non TS projects.
69 |   } else if (hasJsConfig) {
70 |     config = require(paths.appJsConfig);
71 |   }
72 | 
73 |   config = config || {};
74 |   const options = config.compilerOptions || {};
75 | 
76 |   const additionalModulePaths = getAdditionalModulePaths(options);
77 | 
78 |   return {
79 |     additionalModulePaths: additionalModulePaths,
80 |     hasTsConfig,
81 |   };
82 | }
83 | 
84 | module.exports = getModules();
85 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebook/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(inputPath, needsSlash) {
15 |   const hasSlash = inputPath.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return inputPath.substr(0, inputPath.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${inputPath}/`;
20 |   } else {
21 |     return inputPath;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | const moduleFileExtensions = [
42 |   'web.mjs',
43 |   'mjs',
44 |   'web.js',
45 |   'js',
46 |   'web.ts',
47 |   'ts',
48 |   'web.tsx',
49 |   'tsx',
50 |   'json',
51 |   'web.jsx',
52 |   'jsx',
53 | ];
54 | 
55 | // Resolve file paths in the same order as webpack
56 | const resolveModule = (resolveFn, filePath) => {
57 |   const extension = moduleFileExtensions.find(extension =>
58 |     fs.existsSync(resolveFn(`${filePath}.${extension}`))
59 |   );
60 | 
61 |   if (extension) {
62 |     return resolveFn(`${filePath}.${extension}`);
63 |   }
64 | 
65 |   return resolveFn(`${filePath}.js`);
66 | };
67 | 
68 | // config after eject: we're in ./config/
69 | module.exports = {
70 |   dotenv: resolveApp('.env'),
71 |   appPath: resolveApp('.'),
72 |   appBuild: resolveApp('build'),
73 |   appPublic: resolveApp('public'),
74 |   appHtml: resolveApp('public/index.html'),
75 |   appIndexJs: resolveModule(resolveApp, 'src/index'),
76 |   appPackageJson: resolveApp('package.json'),
77 |   appSrc: resolveApp('src'),
78 |   appTsConfig: resolveApp('tsconfig.json'),
79 |   appJsConfig: resolveApp('jsconfig.json'),
80 |   yarnLockFile: resolveApp('yarn.lock'),
81 |   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
82 |   proxySetup: resolveApp('src/setupProxy.js'),
83 |   appNodeModules: resolveApp('node_modules'),
84 |   publicUrl: getPublicUrl(resolveApp('package.json')),
85 |   servedPath: getServedPath(resolveApp('package.json')),
86 | };
87 | 
88 | 
89 | 
90 | module.exports.moduleFileExtensions = moduleFileExtensions;
91 | 


--------------------------------------------------------------------------------
/config/pnpTs.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const { resolveModuleName } = require('ts-pnp');
 4 | 
 5 | exports.resolveModuleName = (
 6 |   typescript,
 7 |   moduleName,
 8 |   containingFile,
 9 |   compilerOptions,
10 |   resolutionHost
11 | ) => {
12 |   return resolveModuleName(
13 |     moduleName,
14 |     containingFile,
15 |     compilerOptions,
16 |     resolutionHost,
17 |     typescript.resolveModuleName
18 |   );
19 | };
20 | 
21 | exports.resolveTypeReferenceDirective = (
22 |   typescript,
23 |   moduleName,
24 |   containingFile,
25 |   compilerOptions,
26 |   resolutionHost
27 | ) => {
28 |   return resolveModuleName(
29 |     moduleName,
30 |     containingFile,
31 |     compilerOptions,
32 |     resolutionHost,
33 |     typescript.resolveTypeReferenceDirective
34 |   );
35 | };
36 | 


--------------------------------------------------------------------------------
/config/webpack.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const isWsl = require('is-wsl');
  5 | const path = require('path');
  6 | const webpack = require('webpack');
  7 | const resolve = require('resolve');
  8 | const PnpWebpackPlugin = require('pnp-webpack-plugin');
  9 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 10 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 11 | const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 12 | const TerserPlugin = require('terser-webpack-plugin');
 13 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 14 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 15 | const safePostCssParser = require('postcss-safe-parser');
 16 | const ManifestPlugin = require('webpack-manifest-plugin');
 17 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 18 | const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 19 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 20 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 21 | const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 22 | const paths = require('./paths');
 23 | const modules = require('./modules');
 24 | const getClientEnvironment = require('./env');
 25 | const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 26 | const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
 27 | const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 28 | 
 29 | const postcssNormalize = require('postcss-normalize');
 30 | 
 31 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 32 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 33 | // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 34 | // makes for a smoother build process.
 35 | const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 36 | 
 37 | // Check if TypeScript is setup
 38 | const useTypeScript = fs.existsSync(paths.appTsConfig);
 39 | 
 40 | // style files regexes
 41 | const cssRegex = /\.css$/;
 42 | const cssModuleRegex = /\.module\.css$/;
 43 | const sassRegex = /\.(scss|sass)$/;
 44 | const sassModuleRegex = /\.module\.(scss|sass)$/;
 45 | 
 46 | // This is the production and development configuration.
 47 | // It is focused on developer experience, fast rebuilds, and a minimal bundle.
 48 | module.exports = function(webpackEnv) {
 49 |   const isEnvDevelopment = webpackEnv === 'development';
 50 |   const isEnvProduction = webpackEnv === 'production';
 51 | 
 52 |   // Webpack uses `publicPath` to determine where the app is being served from.
 53 |   // It requires a trailing slash, or the file assets will get an incorrect path.
 54 |   // In development, we always serve from the root. This makes config easier.
 55 |   const publicPath = isEnvProduction
 56 |     ? paths.servedPath
 57 |     : isEnvDevelopment && '/';
 58 |   // Some apps do not use client-side routing with pushState.
 59 |   // For these, "homepage" can be set to "." to enable relative asset paths.
 60 |   const shouldUseRelativeAssetPaths = publicPath === './';
 61 | 
 62 |   // `publicUrl` is just like `publicPath`, but we will provide it to our app
 63 |   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 64 |   // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 65 |   const publicUrl = isEnvProduction
 66 |     ? publicPath.slice(0, -1)
 67 |     : isEnvDevelopment && '';
 68 |   // Get environment variables to inject into our app.
 69 |   const env = getClientEnvironment(publicUrl);
 70 | 
 71 |   // common function to get style loaders
 72 |   const getStyleLoaders = (cssOptions, preProcessor) => {
 73 |     const loaders = [
 74 |       isEnvDevelopment && require.resolve('style-loader'),
 75 |       isEnvProduction && {
 76 |         loader: MiniCssExtractPlugin.loader,
 77 |         options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
 78 |       },
 79 |       {
 80 |         loader: require.resolve('css-loader'),
 81 |         options: cssOptions,
 82 |       },
 83 |       {
 84 |         // Options for PostCSS as we reference these options twice
 85 |         // Adds vendor prefixing based on your specified browser support in
 86 |         // package.json
 87 |         loader: require.resolve('postcss-loader'),
 88 |         options: {
 89 |           // Necessary for external CSS imports to work
 90 |           // https://github.com/facebook/create-react-app/issues/2677
 91 |           ident: 'postcss',
 92 |           plugins: () => [
 93 |             require('postcss-flexbugs-fixes'),
 94 |             require('postcss-preset-env')({
 95 |               autoprefixer: {
 96 |                 flexbox: 'no-2009',
 97 |               },
 98 |               stage: 3,
 99 |             }),
100 |             // Adds PostCSS Normalize as the reset css with default options,
101 |             // so that it honors browserslist config in package.json
102 |             // which in turn let's users customize the target behavior as per their needs.
103 |             postcssNormalize(),
104 |           ],
105 |           sourceMap: isEnvProduction && shouldUseSourceMap,
106 |         },
107 |       },
108 |     ].filter(Boolean);
109 |     if (preProcessor) {
110 |       loaders.push({
111 |         loader: require.resolve(preProcessor),
112 |         options: {
113 |           sourceMap: isEnvProduction && shouldUseSourceMap,
114 |         },
115 |       });
116 |     }
117 |     return loaders;
118 |   };
119 | 
120 |   return {
121 |     mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
122 |     // Stop compilation early in production
123 |     bail: isEnvProduction,
124 |     devtool: isEnvProduction
125 |       ? shouldUseSourceMap
126 |         ? 'source-map'
127 |         : false
128 |       : isEnvDevelopment && 'cheap-module-source-map',
129 |     // These are the "entry points" to our application.
130 |     // This means they will be the "root" imports that are included in JS bundle.
131 |     entry: [
132 |       // Include an alternative client for WebpackDevServer. A client's job is to
133 |       // connect to WebpackDevServer by a socket and get notified about changes.
134 |       // When you save a file, the client will either apply hot updates (in case
135 |       // of CSS changes), or refresh the page (in case of JS changes). When you
136 |       // make a syntax error, this client will display a syntax error overlay.
137 |       // Note: instead of the default WebpackDevServer client, we use a custom one
138 |       // to bring better experience for Create React App users. You can replace
139 |       // the line below with these two lines if you prefer the stock client:
140 |       // require.resolve('webpack-dev-server/client') + '?/',
141 |       // require.resolve('webpack/hot/dev-server'),
142 |       isEnvDevelopment &&
143 |         require.resolve('react-dev-utils/webpackHotDevClient'),
144 |       // Finally, this is your app's code:
145 |       paths.appIndexJs,
146 |       // We include the app code last so that if there is a runtime error during
147 |       // initialization, it doesn't blow up the WebpackDevServer client, and
148 |       // changing JS code would still trigger a refresh.
149 |     ].filter(Boolean),
150 |     output: {
151 |       // The build folder.
152 |       path: isEnvProduction ? paths.appBuild : undefined,
153 |       // Add /* filename */ comments to generated require()s in the output.
154 |       pathinfo: isEnvDevelopment,
155 |       // There will be one main bundle, and one file per asynchronous chunk.
156 |       // In development, it does not produce real files.
157 |       filename: isEnvProduction
158 |         ? 'static/js/[name].[contenthash:8].js'
159 |         : isEnvDevelopment && 'static/js/bundle.js',
160 |       // TODO: remove this when upgrading to webpack 5
161 |       futureEmitAssets: true,
162 |       // There are also additional JS chunk files if you use code splitting.
163 |       chunkFilename: isEnvProduction
164 |         ? 'static/js/[name].[contenthash:8].chunk.js'
165 |         : isEnvDevelopment && 'static/js/[name].chunk.js',
166 |       // We inferred the "public path" (such as / or /my-project) from homepage.
167 |       // We use "/" in development.
168 |       publicPath: publicPath,
169 |       // Point sourcemap entries to original disk location (format as URL on Windows)
170 |       devtoolModuleFilenameTemplate: isEnvProduction
171 |         ? info =>
172 |             path
173 |               .relative(paths.appSrc, info.absoluteResourcePath)
174 |               .replace(/\\/g, '/')
175 |         : isEnvDevelopment &&
176 |           (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
177 |     },
178 |     optimization: {
179 |       minimize: isEnvProduction,
180 |       minimizer: [
181 |         // This is only used in production mode
182 |         new TerserPlugin({
183 |           terserOptions: {
184 |             parse: {
185 |               // we want terser to parse ecma 8 code. However, we don't want it
186 |               // to apply any minfication steps that turns valid ecma 5 code
187 |               // into invalid ecma 5 code. This is why the 'compress' and 'output'
188 |               // sections only apply transformations that are ecma 5 safe
189 |               // https://github.com/facebook/create-react-app/pull/4234
190 |               ecma: 8,
191 |             },
192 |             compress: {
193 |               ecma: 5,
194 |               warnings: false,
195 |               // Disabled because of an issue with Uglify breaking seemingly valid code:
196 |               // https://github.com/facebook/create-react-app/issues/2376
197 |               // Pending further investigation:
198 |               // https://github.com/mishoo/UglifyJS2/issues/2011
199 |               comparisons: false,
200 |               // Disabled because of an issue with Terser breaking valid code:
201 |               // https://github.com/facebook/create-react-app/issues/5250
202 |               // Pending futher investigation:
203 |               // https://github.com/terser-js/terser/issues/120
204 |               inline: 2,
205 |             },
206 |             mangle: {
207 |               safari10: true,
208 |             },
209 |             output: {
210 |               ecma: 5,
211 |               comments: false,
212 |               // Turned on because emoji and regex is not minified properly using default
213 |               // https://github.com/facebook/create-react-app/issues/2488
214 |               ascii_only: true,
215 |             },
216 |           },
217 |           // Use multi-process parallel running to improve the build speed
218 |           // Default number of concurrent runs: os.cpus().length - 1
219 |           // Disabled on WSL (Windows Subsystem for Linux) due to an issue with Terser
220 |           // https://github.com/webpack-contrib/terser-webpack-plugin/issues/21
221 |           parallel: !isWsl,
222 |           // Enable file caching
223 |           cache: true,
224 |           sourceMap: shouldUseSourceMap,
225 |         }),
226 |         // This is only used in production mode
227 |         new OptimizeCSSAssetsPlugin({
228 |           cssProcessorOptions: {
229 |             parser: safePostCssParser,
230 |             map: shouldUseSourceMap
231 |               ? {
232 |                   // `inline: false` forces the sourcemap to be output into a
233 |                   // separate file
234 |                   inline: false,
235 |                   // `annotation: true` appends the sourceMappingURL to the end of
236 |                   // the css file, helping the browser find the sourcemap
237 |                   annotation: true,
238 |                 }
239 |               : false,
240 |           },
241 |         }),
242 |       ],
243 |       // Automatically split vendor and commons
244 |       // https://twitter.com/wSokra/status/969633336732905474
245 |       // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
246 |       splitChunks: {
247 |         chunks: 'all',
248 |         name: false,
249 |       },
250 |       // Keep the runtime chunk separated to enable long term caching
251 |       // https://twitter.com/wSokra/status/969679223278505985
252 |       runtimeChunk: true,
253 |     },
254 |     resolve: {
255 |       // This allows you to set a fallback for where Webpack should look for modules.
256 |       // We placed these paths second because we want `node_modules` to "win"
257 |       // if there are any conflicts. This matches Node resolution mechanism.
258 |       // https://github.com/facebook/create-react-app/issues/253
259 |       modules: ['node_modules', paths.appNodeModules].concat(
260 |         modules.additionalModulePaths || []
261 |       ),
262 |       // These are the reasonable defaults supported by the Node ecosystem.
263 |       // We also include JSX as a common component filename extension to support
264 |       // some tools, although we do not recommend using it, see:
265 |       // https://github.com/facebook/create-react-app/issues/290
266 |       // `web` extension prefixes have been added for better support
267 |       // for React Native Web.
268 |       extensions: paths.moduleFileExtensions
269 |         .map(ext => `.${ext}`)
270 |         .filter(ext => useTypeScript || !ext.includes('ts')),
271 |       alias: {
272 |         // Support React Native Web
273 |         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
274 |         'react-native': 'react-native-web',
275 |       },
276 |       plugins: [
277 |         // Adds support for installing with Plug'n'Play, leading to faster installs and adding
278 |         // guards against forgotten dependencies and such.
279 |         PnpWebpackPlugin,
280 |         // Prevents users from importing files from outside of src/ (or node_modules/).
281 |         // This often causes confusion because we only process files within src/ with babel.
282 |         // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
283 |         // please link the files into your node_modules/ and let module-resolution kick in.
284 |         // Make sure your source files are compiled, as they will not be processed in any way.
285 |         new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
286 |       ],
287 |     },
288 |     resolveLoader: {
289 |       plugins: [
290 |         // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
291 |         // from the current package.
292 |         PnpWebpackPlugin.moduleLoader(module),
293 |       ],
294 |     },
295 |     module: {
296 |       strictExportPresence: true,
297 |       rules: [
298 |         // Disable require.ensure as it's not a standard language feature.
299 |         { parser: { requireEnsure: false } },
300 | 
301 |         // First, run the linter.
302 |         // It's important to do this before Babel processes the JS.
303 |         {
304 |           test: /\.(js|mjs|jsx|ts|tsx)$/,
305 |           enforce: 'pre',
306 |           use: [
307 |             {
308 |               options: {
309 |                 formatter: require.resolve('react-dev-utils/eslintFormatter'),
310 |                 eslintPath: require.resolve('eslint'),
311 |                 
312 |               },
313 |               loader: require.resolve('eslint-loader'),
314 |             },
315 |           ],
316 |           include: paths.appSrc,
317 |         },
318 |         {
319 |           // "oneOf" will traverse all following loaders until one will
320 |           // match the requirements. When no loader matches it will fall
321 |           // back to the "file" loader at the end of the loader list.
322 |           oneOf: [
323 |             // "url" loader works like "file" loader except that it embeds assets
324 |             // smaller than specified limit in bytes as data URLs to avoid requests.
325 |             // A missing `test` is equivalent to a match.
326 |             {
327 |               test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
328 |               loader: require.resolve('url-loader'),
329 |               options: {
330 |                 limit: 10000,
331 |                 name: 'static/media/[name].[hash:8].[ext]',
332 |               },
333 |             },
334 |             // Process application JS with Babel.
335 |             // The preset includes JSX, Flow, TypeScript, and some ESnext features.
336 |             {
337 |               test: /\.(js|mjs|jsx|ts|tsx)$/,
338 |               include: paths.appSrc,
339 |               loader: require.resolve('babel-loader'),
340 |               options: {
341 |                 customize: require.resolve(
342 |                   'babel-preset-react-app/webpack-overrides'
343 |                 ),
344 |                 
345 |                 plugins: [
346 |                   [
347 |                     require.resolve('babel-plugin-named-asset-import'),
348 |                     {
349 |                       loaderMap: {
350 |                         svg: {
351 |                           ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
352 |                         },
353 |                       },
354 |                     },
355 |                   ],
356 |                 ],
357 |                 // This is a feature of `babel-loader` for webpack (not Babel itself).
358 |                 // It enables caching results in ./node_modules/.cache/babel-loader/
359 |                 // directory for faster rebuilds.
360 |                 cacheDirectory: true,
361 |                 cacheCompression: isEnvProduction,
362 |                 compact: isEnvProduction,
363 |               },
364 |             },
365 |             // Process any JS outside of the app with Babel.
366 |             // Unlike the application JS, we only compile the standard ES features.
367 |             {
368 |               test: /\.(js|mjs)$/,
369 |               exclude: /@babel(?:\/|\\{1,2})runtime/,
370 |               loader: require.resolve('babel-loader'),
371 |               options: {
372 |                 babelrc: true,
373 |                 configFile: false,
374 |                 compact: false,
375 |                 presets: [
376 |                   [
377 |                     require.resolve('babel-preset-react-app/dependencies'),
378 |                     { helpers: true },
379 |                   ],
380 |                 ],
381 |                 cacheDirectory: true,
382 |                 cacheCompression: isEnvProduction,
383 |                 
384 |                 // If an error happens in a package, it's possible to be
385 |                 // because it was compiled. Thus, we don't want the browser
386 |                 // debugger to show the original code. Instead, the code
387 |                 // being evaluated would be much more helpful.
388 |                 sourceMaps: false,
389 |               },
390 |             },
391 |             // "postcss" loader applies autoprefixer to our CSS.
392 |             // "css" loader resolves paths in CSS and adds assets as dependencies.
393 |             // "style" loader turns CSS into JS modules that inject <style> tags.
394 |             // In production, we use MiniCSSExtractPlugin to extract that CSS
395 |             // to a file, but in development "style" loader enables hot editing
396 |             // of CSS.
397 |             // By default we support CSS Modules with the extension .module.css
398 |             {
399 |               test: cssRegex,
400 |               exclude: cssModuleRegex,
401 |               use: getStyleLoaders({
402 |                 importLoaders: 1,
403 |                 sourceMap: isEnvProduction && shouldUseSourceMap,
404 |               }),
405 |               // Don't consider CSS imports dead code even if the
406 |               // containing package claims to have no side effects.
407 |               // Remove this when webpack adds a warning or an error for this.
408 |               // See https://github.com/webpack/webpack/issues/6571
409 |               sideEffects: true,
410 |             },
411 |             // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
412 |             // using the extension .module.css
413 |             {
414 |               test: cssModuleRegex,
415 |               use: getStyleLoaders({
416 |                 importLoaders: 1,
417 |                 sourceMap: isEnvProduction && shouldUseSourceMap,
418 |                 modules: true,
419 |                 getLocalIdent: getCSSModuleLocalIdent,
420 |               }),
421 |             },
422 |             // Opt-in support for SASS (using .scss or .sass extensions).
423 |             // By default we support SASS Modules with the
424 |             // extensions .module.scss or .module.sass
425 |             {
426 |               test: sassRegex,
427 |               exclude: sassModuleRegex,
428 |               use: getStyleLoaders(
429 |                 {
430 |                   importLoaders: 2,
431 |                   sourceMap: isEnvProduction && shouldUseSourceMap,
432 |                 },
433 |                 'sass-loader'
434 |               ),
435 |               // Don't consider CSS imports dead code even if the
436 |               // containing package claims to have no side effects.
437 |               // Remove this when webpack adds a warning or an error for this.
438 |               // See https://github.com/webpack/webpack/issues/6571
439 |               sideEffects: true,
440 |             },
441 |             // Adds support for CSS Modules, but using SASS
442 |             // using the extension .module.scss or .module.sass
443 |             {
444 |               test: sassModuleRegex,
445 |               use: getStyleLoaders(
446 |                 {
447 |                   importLoaders: 2,
448 |                   sourceMap: isEnvProduction && shouldUseSourceMap,
449 |                   modules: true,
450 |                   getLocalIdent: getCSSModuleLocalIdent,
451 |                 },
452 |                 'sass-loader'
453 |               ),
454 |             },
455 |             // "file" loader makes sure those assets get served by WebpackDevServer.
456 |             // When you `import` an asset, you get its (virtual) filename.
457 |             // In production, they would get copied to the `build` folder.
458 |             // This loader doesn't use a "test" so it will catch all modules
459 |             // that fall through the other loaders.
460 |             {
461 |               loader: require.resolve('file-loader'),
462 |               // Exclude `js` files to keep "css" loader working as it injects
463 |               // its runtime that would otherwise be processed through "file" loader.
464 |               // Also exclude `html` and `json` extensions so they get processed
465 |               // by webpacks internal loaders.
466 |               exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
467 |               options: {
468 |                 name: 'static/media/[name].[hash:8].[ext]',
469 |               },
470 |             },
471 |             // ** STOP ** Are you adding a new loader?
472 |             // Make sure to add the new loader(s) before the "file" loader.
473 |           ],
474 |         },
475 |       ],
476 |     },
477 |     plugins: [
478 |       // Generates an `index.html` file with the <script> injected.
479 |       new HtmlWebpackPlugin(
480 |         Object.assign(
481 |           {},
482 |           {
483 |             inject: true,
484 |             template: paths.appHtml,
485 |           },
486 |           isEnvProduction
487 |             ? {
488 |                 minify: {
489 |                   removeComments: true,
490 |                   collapseWhitespace: true,
491 |                   removeRedundantAttributes: true,
492 |                   useShortDoctype: true,
493 |                   removeEmptyAttributes: true,
494 |                   removeStyleLinkTypeAttributes: true,
495 |                   keepClosingSlash: true,
496 |                   minifyJS: true,
497 |                   minifyCSS: true,
498 |                   minifyURLs: true,
499 |                 },
500 |               }
501 |             : undefined
502 |         )
503 |       ),
504 |       // Inlines the webpack runtime script. This script is too small to warrant
505 |       // a network request.
506 |       isEnvProduction &&
507 |         shouldInlineRuntimeChunk &&
508 |         new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
509 |       // Makes some environment variables available in index.html.
510 |       // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
511 |       // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
512 |       // In production, it will be an empty string unless you specify "homepage"
513 |       // in `package.json`, in which case it will be the pathname of that URL.
514 |       // In development, this will be an empty string.
515 |       new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
516 |       // This gives some necessary context to module not found errors, such as
517 |       // the requesting resource.
518 |       new ModuleNotFoundPlugin(paths.appPath),
519 |       // Makes some environment variables available to the JS code, for example:
520 |       // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
521 |       // It is absolutely essential that NODE_ENV is set to production
522 |       // during a production build.
523 |       // Otherwise React will be compiled in the very slow development mode.
524 |       new webpack.DefinePlugin(env.stringified),
525 |       // This is necessary to emit hot updates (currently CSS only):
526 |       isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
527 |       // Watcher doesn't work well if you mistype casing in a path so we use
528 |       // a plugin that prints an error when you attempt to do this.
529 |       // See https://github.com/facebook/create-react-app/issues/240
530 |       isEnvDevelopment && new CaseSensitivePathsPlugin(),
531 |       // If you require a missing module and then `npm install` it, you still have
532 |       // to restart the development server for Webpack to discover it. This plugin
533 |       // makes the discovery automatic so you don't have to restart.
534 |       // See https://github.com/facebook/create-react-app/issues/186
535 |       isEnvDevelopment &&
536 |         new WatchMissingNodeModulesPlugin(paths.appNodeModules),
537 |       isEnvProduction &&
538 |         new MiniCssExtractPlugin({
539 |           // Options similar to the same options in webpackOptions.output
540 |           // both options are optional
541 |           filename: 'static/css/[name].[contenthash:8].css',
542 |           chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
543 |         }),
544 |       // Generate a manifest file which contains a mapping of all asset filenames
545 |       // to their corresponding output file so that tools can pick it up without
546 |       // having to parse `index.html`.
547 |       new ManifestPlugin({
548 |         fileName: 'asset-manifest.json',
549 |         publicPath: publicPath,
550 |         generate: (seed, files) => {
551 |           const manifestFiles = files.reduce(function(manifest, file) {
552 |             manifest[file.name] = file.path;
553 |             return manifest;
554 |           }, seed);
555 | 
556 |           return {
557 |             files: manifestFiles,
558 |           };
559 |         },
560 |       }),
561 |       // Moment.js is an extremely popular library that bundles large locale files
562 |       // by default due to how Webpack interprets its code. This is a practical
563 |       // solution that requires the user to opt into importing specific locales.
564 |       // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
565 |       // You can remove this if you don't use Moment.js:
566 |       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
567 |       // Generate a service worker script that will precache, and keep up to date,
568 |       // the HTML & assets that are part of the Webpack build.
569 |       isEnvProduction &&
570 |         new WorkboxWebpackPlugin.GenerateSW({
571 |           clientsClaim: true,
572 |           exclude: [/\.map$/, /asset-manifest\.json$/],
573 |           importWorkboxFrom: 'cdn',
574 |           navigateFallback: publicUrl + '/index.html',
575 |           navigateFallbackBlacklist: [
576 |             // Exclude URLs starting with /_, as they're likely an API call
577 |             new RegExp('^/_'),
578 |             // Exclude URLs containing a dot, as they're likely a resource in
579 |             // public/ and not a SPA route
580 |             new RegExp('/[^/]+\\.[^/]+$'),
581 |           ],
582 |         }),
583 |       // TypeScript type checking
584 |       useTypeScript &&
585 |         new ForkTsCheckerWebpackPlugin({
586 |           typescript: resolve.sync('typescript', {
587 |             basedir: paths.appNodeModules,
588 |           }),
589 |           async: isEnvDevelopment,
590 |           useTypescriptIncrementalApi: true,
591 |           checkSyntacticErrors: true,
592 |           resolveModuleNameModule: process.versions.pnp
593 |             ? `${__dirname}/pnpTs.js`
594 |             : undefined,
595 |           resolveTypeReferenceDirectiveModule: process.versions.pnp
596 |             ? `${__dirname}/pnpTs.js`
597 |             : undefined,
598 |           tsconfig: paths.appTsConfig,
599 |           reportFiles: [
600 |             '**',
601 |             '!**/__tests__/**',
602 |             '!**/?(*.)(spec|test).*',
603 |             '!**/src/setupProxy.*',
604 |             '!**/src/setupTests.*',
605 |           ],
606 |           watch: paths.appSrc,
607 |           silent: true,
608 |           // The formatter is invoked directly in WebpackDevServerUtils during development
609 |           formatter: isEnvProduction ? typescriptFormatter : undefined,
610 |         }),
611 |     ].filter(Boolean),
612 |     // Some libraries import Node modules but don't use them in the browser.
613 |     // Tell Webpack to provide empty mocks for them so importing them works.
614 |     node: {
615 |       module: 'empty',
616 |       dgram: 'empty',
617 |       dns: 'mock',
618 |       fs: 'empty',
619 |       http2: 'empty',
620 |       net: 'empty',
621 |       tls: 'empty',
622 |       child_process: 'empty',
623 |     },
624 |     // Turn off performance processing because we utilize
625 |     // our own hints via the FileSizeReporter
626 |     performance: false,
627 |   };
628 | };
629 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
  4 | const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
  5 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
  6 | const ignoredFiles = require('react-dev-utils/ignoredFiles');
  7 | const paths = require('./paths');
  8 | const fs = require('fs');
  9 | 
 10 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 11 | const host = process.env.HOST || '0.0.0.0';
 12 | 
 13 | module.exports = function(proxy, allowedHost) {
 14 |   return {
 15 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
 16 |     // websites from potentially accessing local content through DNS rebinding:
 17 |     // https://github.com/webpack/webpack-dev-server/issues/887
 18 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
 19 |     // However, it made several existing use cases such as development in cloud
 20 |     // environment or subdomains in development significantly more complicated:
 21 |     // https://github.com/facebook/create-react-app/issues/2271
 22 |     // https://github.com/facebook/create-react-app/issues/2233
 23 |     // While we're investigating better solutions, for now we will take a
 24 |     // compromise. Since our WDS configuration only serves files in the `public`
 25 |     // folder we won't consider accessing them a vulnerability. However, if you
 26 |     // use the `proxy` feature, it gets more dangerous because it can expose
 27 |     // remote code execution vulnerabilities in backends like Django and Rails.
 28 |     // So we will disable the host check normally, but enable it if you have
 29 |     // specified the `proxy` setting. Finally, we let you override it if you
 30 |     // really know what you're doing with a special environment variable.
 31 |     disableHostCheck:
 32 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
 33 |     // Enable gzip compression of generated files.
 34 |     compress: true,
 35 |     // Silence WebpackDevServer's own logs since they're generally not useful.
 36 |     // It will still show compile warnings and errors with this setting.
 37 |     clientLogLevel: 'none',
 38 |     // By default WebpackDevServer serves physical files from current directory
 39 |     // in addition to all the virtual build products that it serves from memory.
 40 |     // This is confusing because those files won’t automatically be available in
 41 |     // production build folder unless we copy them. However, copying the whole
 42 |     // project directory is dangerous because we may expose sensitive files.
 43 |     // Instead, we establish a convention that only files in `public` directory
 44 |     // get served. Our build script will copy `public` into the `build` folder.
 45 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
 46 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 47 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
 48 |     // Note that we only recommend to use `public` folder as an escape hatch
 49 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
 50 |     // for some reason broken when imported through Webpack. If you just want to
 51 |     // use an image, put it in `src` and `import` it from JavaScript instead.
 52 |     contentBase: paths.appPublic,
 53 |     // By default files from `contentBase` will not trigger a page reload.
 54 |     watchContentBase: true,
 55 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
 56 |     // for the WebpackDevServer client so it can learn when the files were
 57 |     // updated. The WebpackDevServer client is included as an entry point
 58 |     // in the Webpack development configuration. Note that only changes
 59 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
 60 |     hot: true,
 61 |     // It is important to tell WebpackDevServer to use the same "root" path
 62 |     // as we specified in the config. In development, we always serve from /.
 63 |     publicPath: '/',
 64 |     // WebpackDevServer is noisy by default so we emit custom message instead
 65 |     // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
 66 |     quiet: true,
 67 |     // Reportedly, this avoids CPU overload on some systems.
 68 |     // https://github.com/facebook/create-react-app/issues/293
 69 |     // src/node_modules is not ignored to support absolute imports
 70 |     // https://github.com/facebook/create-react-app/issues/1065
 71 |     watchOptions: {
 72 |       ignored: ignoredFiles(paths.appSrc),
 73 |     },
 74 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
 75 |     https: protocol === 'https',
 76 |     host,
 77 |     overlay: false,
 78 |     historyApiFallback: {
 79 |       // Paths with dots should still use the history fallback.
 80 |       // See https://github.com/facebook/create-react-app/issues/387.
 81 |       disableDotRule: true,
 82 |     },
 83 |     public: allowedHost,
 84 |     proxy,
 85 |     before(app, server) {
 86 |       if (fs.existsSync(paths.proxySetup)) {
 87 |         // This registers user provided middleware for proxy reasons
 88 |         require(paths.proxySetup)(app);
 89 |       }
 90 | 
 91 |       // This lets us fetch source contents from webpack for the error overlay
 92 |       app.use(evalSourceMapMiddleware(server));
 93 |       // This lets us open files from the runtime error overlay.
 94 |       app.use(errorOverlayMiddleware());
 95 | 
 96 |       // This service worker file is effectively a 'no-op' that will reset any
 97 |       // previous service worker registered for the same host:port combination.
 98 |       // We do this in development to avoid hitting the production cache if
 99 |       // it used the same host and port.
100 |       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
101 |       app.use(noopServiceWorkerMiddleware());
102 |     },
103 |   };
104 | };
105 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 | </head>
 9 | <script>
10 |   var a = { n: 1 }
11 |   var b = a;
12 |   a.x = (a = { n: 2 })
13 |   console.log(a, b);
14 | </script>
15 | <body>
16 |   
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "react-hooks",
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "dependencies": {
  6 |     "@babel/core": "7.4.3",
  7 |     "@babel/plugin-transform-react-jsx-self": "^7.2.0",
  8 |     "@babel/plugin-transform-react-jsx-source": "^7.2.0",
  9 |     "@svgr/webpack": "4.1.0",
 10 |     "@types/animejs": "^2.0.2",
 11 |     "@types/jest": "24.0.13",
 12 |     "@types/node": "12.0.2",
 13 |     "@types/react": "16.8.18",
 14 |     "@types/react-dom": "16.8.4",
 15 |     "@typescript-eslint/eslint-plugin": "1.6.0",
 16 |     "@typescript-eslint/parser": "1.6.0",
 17 |     "animejs": "^3.0.1",
 18 |     "antd-mobile": "^2.2.13",
 19 |     "axios": "^0.19.0",
 20 |     "babel-eslint": "10.0.1",
 21 |     "babel-jest": "^24.8.0",
 22 |     "babel-loader": "8.0.5",
 23 |     "babel-plugin-import": "^1.11.2",
 24 |     "babel-plugin-named-asset-import": "^0.3.2",
 25 |     "babel-preset-react-app": "^9.0.0",
 26 |     "camelcase": "^5.2.0",
 27 |     "case-sensitive-paths-webpack-plugin": "2.2.0",
 28 |     "css-loader": "2.1.1",
 29 |     "dotenv": "6.2.0",
 30 |     "dotenv-expand": "4.2.0",
 31 |     "eslint": "^5.16.0",
 32 |     "eslint-config-react-app": "^4.0.1",
 33 |     "eslint-loader": "2.1.2",
 34 |     "eslint-plugin-flowtype": "2.50.1",
 35 |     "eslint-plugin-import": "2.16.0",
 36 |     "eslint-plugin-jsx-a11y": "6.2.1",
 37 |     "eslint-plugin-react": "7.12.4",
 38 |     "eslint-plugin-react-hooks": "^1.5.0",
 39 |     "file-loader": "3.0.1",
 40 |     "fs-extra": "7.0.1",
 41 |     "html-webpack-plugin": "4.0.0-beta.5",
 42 |     "identity-obj-proxy": "3.0.0",
 43 |     "is-wsl": "^1.1.0",
 44 |     "jest": "24.7.1",
 45 |     "jest-environment-jsdom-fourteen": "0.1.0",
 46 |     "jest-resolve": "24.7.1",
 47 |     "jest-watch-typeahead": "0.3.0",
 48 |     "mini-css-extract-plugin": "0.5.0",
 49 |     "mozz": "^0.1.3",
 50 |     "node-sass": "^4.12.0",
 51 |     "optimize-css-assets-webpack-plugin": "5.0.1",
 52 |     "pnp-webpack-plugin": "1.2.1",
 53 |     "postcss-flexbugs-fixes": "4.1.0",
 54 |     "postcss-loader": "3.0.0",
 55 |     "postcss-normalize": "7.0.1",
 56 |     "postcss-preset-env": "6.6.0",
 57 |     "postcss-safe-parser": "4.0.1",
 58 |     "react": "^16.8.6",
 59 |     "react-app-polyfill": "^1.0.1",
 60 |     "react-dev-utils": "^9.0.1",
 61 |     "react-dom": "^16.8.6",
 62 |     "resolve": "1.10.0",
 63 |     "sass-loader": "7.1.0",
 64 |     "semver": "6.0.0",
 65 |     "style-loader": "0.23.1",
 66 |     "terser-webpack-plugin": "1.2.3",
 67 |     "ts-pnp": "1.1.2",
 68 |     "typescript": "3.4.5",
 69 |     "url-loader": "1.1.2",
 70 |     "webpack": "4.29.6",
 71 |     "webpack-dev-server": "3.2.1",
 72 |     "webpack-manifest-plugin": "2.0.4",
 73 |     "workbox-webpack-plugin": "4.2.0"
 74 |   },
 75 |   "scripts": {
 76 |     "start": "node scripts/start.js",
 77 |     "build": "node scripts/build.js",
 78 |     "test": "node scripts/test.js"
 79 |   },
 80 |   "eslintConfig": {
 81 |     "extends": "react-app"
 82 |   },
 83 |   "browserslist": {
 84 |     "production": [
 85 |       ">0.2%",
 86 |       "not dead",
 87 |       "not op_mini all"
 88 |     ],
 89 |     "development": [
 90 |       "last 1 chrome version",
 91 |       "last 1 firefox version",
 92 |       "last 1 safari version"
 93 |     ]
 94 |   },
 95 |   "jest": {
 96 |     "collectCoverageFrom": [
 97 |       "src/**/*.{js,jsx,ts,tsx}",
 98 |       "!src/**/*.d.ts"
 99 |     ],
100 |     "setupFiles": [
101 |       "react-app-polyfill/jsdom"
102 |     ],
103 |     "setupFilesAfterEnv": [],
104 |     "testMatch": [
105 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
106 |       "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
107 |     ],
108 |     "testEnvironment": "jest-environment-jsdom-fourteen",
109 |     "transform": {
110 |       "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
111 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
112 |       "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
113 |     },
114 |     "transformIgnorePatterns": [
115 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
116 |       "^.+\\.module\\.(css|sass|scss)$"
117 |     ],
118 |     "modulePaths": [],
119 |     "moduleNameMapper": {
120 |       "^react-native$": "react-native-web",
121 |       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
122 |     },
123 |     "moduleFileExtensions": [
124 |       "web.js",
125 |       "js",
126 |       "web.ts",
127 |       "ts",
128 |       "web.tsx",
129 |       "tsx",
130 |       "json",
131 |       "web.jsx",
132 |       "jsx",
133 |       "node"
134 |     ],
135 |     "watchPlugins": [
136 |       "jest-watch-typeahead/filename",
137 |       "jest-watch-typeahead/testname"
138 |     ]
139 |   }
140 | }
141 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/advance-course/react-hooks/9c5535b6692de70da3c94fce6d1c6d0f0f9641ab/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <!--
 9 |       manifest.json provides metadata used when your web app is installed on a
10 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
11 |     -->
12 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>React App</title>
23 | 
24 |     <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
25 |     <script>
26 |       if ('addEventListener' in document) {
27 |         document.addEventListener('DOMContentLoaded', function () {
28 |           FastClick.attach(document.body);
29 |         }, false);
30 |       }
31 |       if (!window.Promise) {
32 |         document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
33 |       }
34 |     </script>
35 |   </head>
36 |   <body>
37 |     <noscript>You need to enable JavaScript to run this app.</noscript>
38 |     <div id="root"></div>
39 |     <!--
40 |       This HTML file is a template.
41 |       If you open it directly in the browser, you will see an empty page.
42 | 
43 |       You can add webfonts, meta tags, or analytics to this file.
44 |       The build step will place the bundled scripts into the <body> tag.
45 | 
46 |       To begin the development, run `npm start` or `yarn start`.
47 |       To create a production bundle, use `npm run build` or `yarn build`.
48 |     -->
49 |   </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const path = require('path');
 19 | const chalk = require('react-dev-utils/chalk');
 20 | const fs = require('fs-extra');
 21 | const webpack = require('webpack');
 22 | const configFactory = require('../config/webpack.config');
 23 | const paths = require('../config/paths');
 24 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 25 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 26 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 27 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 28 | const printBuildError = require('react-dev-utils/printBuildError');
 29 | 
 30 | const measureFileSizesBeforeBuild =
 31 |   FileSizeReporter.measureFileSizesBeforeBuild;
 32 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 33 | const useYarn = fs.existsSync(paths.yarnLockFile);
 34 | 
 35 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 36 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 37 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 38 | 
 39 | const isInteractive = process.stdout.isTTY;
 40 | 
 41 | // Warn and crash if required files are missing
 42 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 43 |   process.exit(1);
 44 | }
 45 | 
 46 | // Generate configuration
 47 | const config = configFactory('production');
 48 | 
 49 | // We require that you explicitly set browsers and do not fall back to
 50 | // browserslist defaults.
 51 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 52 | checkBrowsers(paths.appPath, isInteractive)
 53 |   .then(() => {
 54 |     // First, read the current file sizes in build directory.
 55 |     // This lets us display how much they changed later.
 56 |     return measureFileSizesBeforeBuild(paths.appBuild);
 57 |   })
 58 |   .then(previousFileSizes => {
 59 |     // Remove all content but keep the directory so that
 60 |     // if you're in it, you don't end up in Trash
 61 |     fs.emptyDirSync(paths.appBuild);
 62 |     // Merge with the public folder
 63 |     copyPublicFolder();
 64 |     // Start the webpack build
 65 |     return build(previousFileSizes);
 66 |   })
 67 |   .then(
 68 |     ({ stats, previousFileSizes, warnings }) => {
 69 |       if (warnings.length) {
 70 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 71 |         console.log(warnings.join('\n\n'));
 72 |         console.log(
 73 |           '\nSearch for the ' +
 74 |             chalk.underline(chalk.yellow('keywords')) +
 75 |             ' to learn more about each warning.'
 76 |         );
 77 |         console.log(
 78 |           'To ignore, add ' +
 79 |             chalk.cyan('// eslint-disable-next-line') +
 80 |             ' to the line before.\n'
 81 |         );
 82 |       } else {
 83 |         console.log(chalk.green('Compiled successfully.\n'));
 84 |       }
 85 | 
 86 |       console.log('File sizes after gzip:\n');
 87 |       printFileSizesAfterBuild(
 88 |         stats,
 89 |         previousFileSizes,
 90 |         paths.appBuild,
 91 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 92 |         WARN_AFTER_CHUNK_GZIP_SIZE
 93 |       );
 94 |       console.log();
 95 | 
 96 |       const appPackage = require(paths.appPackageJson);
 97 |       const publicUrl = paths.publicUrl;
 98 |       const publicPath = config.output.publicPath;
 99 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
100 |       printHostingInstructions(
101 |         appPackage,
102 |         publicUrl,
103 |         publicPath,
104 |         buildFolder,
105 |         useYarn
106 |       );
107 |     },
108 |     err => {
109 |       console.log(chalk.red('Failed to compile.\n'));
110 |       printBuildError(err);
111 |       process.exit(1);
112 |     }
113 |   )
114 |   .catch(err => {
115 |     if (err && err.message) {
116 |       console.log(err.message);
117 |     }
118 |     process.exit(1);
119 |   });
120 | 
121 | // Create the production build and print the deployment instructions.
122 | function build(previousFileSizes) {
123 |   // We used to support resolving modules according to `NODE_PATH`.
124 |   // This now has been deprecated in favor of jsconfig/tsconfig.json
125 |   // This lets you use absolute paths in imports inside large monorepos:
126 |   if (process.env.NODE_PATH) {
127 |     console.log(
128 |       chalk.yellow(
129 |         'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
130 |       )
131 |     );
132 |     console.log();
133 |   }
134 | 
135 |   console.log('Creating an optimized production build...');
136 | 
137 |   const compiler = webpack(config);
138 |   return new Promise((resolve, reject) => {
139 |     compiler.run((err, stats) => {
140 |       let messages;
141 |       if (err) {
142 |         if (!err.message) {
143 |           return reject(err);
144 |         }
145 |         messages = formatWebpackMessages({
146 |           errors: [err.message],
147 |           warnings: [],
148 |         });
149 |       } else {
150 |         messages = formatWebpackMessages(
151 |           stats.toJson({ all: false, warnings: true, errors: true })
152 |         );
153 |       }
154 |       if (messages.errors.length) {
155 |         // Only keep the first error. Others are often indicative
156 |         // of the same problem, but confuse the reader with noise.
157 |         if (messages.errors.length > 1) {
158 |           messages.errors.length = 1;
159 |         }
160 |         return reject(new Error(messages.errors.join('\n\n')));
161 |       }
162 |       if (
163 |         process.env.CI &&
164 |         (typeof process.env.CI !== 'string' ||
165 |           process.env.CI.toLowerCase() !== 'false') &&
166 |         messages.warnings.length
167 |       ) {
168 |         console.log(
169 |           chalk.yellow(
170 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
171 |               'Most CI servers set it automatically.\n'
172 |           )
173 |         );
174 |         return reject(new Error(messages.warnings.join('\n\n')));
175 |       }
176 | 
177 |       return resolve({
178 |         stats,
179 |         previousFileSizes,
180 |         warnings: messages.warnings,
181 |       });
182 |     });
183 |   });
184 | }
185 | 
186 | function copyPublicFolder() {
187 |   fs.copySync(paths.appPublic, paths.appBuild, {
188 |     dereference: true,
189 |     filter: file => file !== paths.appHtml,
190 |   });
191 | }
192 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'development';
  5 | process.env.NODE_ENV = 'development';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const fs = require('fs');
 19 | const chalk = require('react-dev-utils/chalk');
 20 | const webpack = require('webpack');
 21 | const WebpackDevServer = require('webpack-dev-server');
 22 | const clearConsole = require('react-dev-utils/clearConsole');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const {
 25 |   choosePort,
 26 |   createCompiler,
 27 |   prepareProxy,
 28 |   prepareUrls,
 29 | } = require('react-dev-utils/WebpackDevServerUtils');
 30 | const openBrowser = require('react-dev-utils/openBrowser');
 31 | const paths = require('../config/paths');
 32 | const configFactory = require('../config/webpack.config');
 33 | const createDevServerConfig = require('../config/webpackDevServer.config');
 34 | 
 35 | const useYarn = fs.existsSync(paths.yarnLockFile);
 36 | const isInteractive = process.stdout.isTTY;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // Tools like Cloud9 rely on this.
 44 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 45 | const HOST = process.env.HOST || '0.0.0.0';
 46 | 
 47 | if (process.env.HOST) {
 48 |   console.log(
 49 |     chalk.cyan(
 50 |       `Attempting to bind to HOST environment variable: ${chalk.yellow(
 51 |         chalk.bold(process.env.HOST)
 52 |       )}`
 53 |     )
 54 |   );
 55 |   console.log(
 56 |     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
 57 |   );
 58 |   console.log(
 59 |     `Learn more here: ${chalk.yellow('https://bit.ly/CRA-advanced-config')}`
 60 |   );
 61 |   console.log();
 62 | }
 63 | 
 64 | // We require that you explicitly set browsers and do not fall back to
 65 | // browserslist defaults.
 66 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 67 | checkBrowsers(paths.appPath, isInteractive)
 68 |   .then(() => {
 69 |     // We attempt to use the default port but if it is busy, we offer the user to
 70 |     // run on a different port. `choosePort()` Promise resolves to the next free port.
 71 |     return choosePort(HOST, DEFAULT_PORT);
 72 |   })
 73 |   .then(port => {
 74 |     if (port == null) {
 75 |       // We have not found a port.
 76 |       return;
 77 |     }
 78 |     const config = configFactory('development');
 79 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 80 |     const appName = require(paths.appPackageJson).name;
 81 |     const useTypeScript = fs.existsSync(paths.appTsConfig);
 82 |     const urls = prepareUrls(protocol, HOST, port);
 83 |     const devSocket = {
 84 |       warnings: warnings =>
 85 |         devServer.sockWrite(devServer.sockets, 'warnings', warnings),
 86 |       errors: errors =>
 87 |         devServer.sockWrite(devServer.sockets, 'errors', errors),
 88 |     };
 89 |     // Create a webpack compiler that is configured with custom messages.
 90 |     const compiler = createCompiler({
 91 |       appName,
 92 |       config,
 93 |       devSocket,
 94 |       urls,
 95 |       useYarn,
 96 |       useTypeScript,
 97 |       webpack,
 98 |     });
 99 |     // Load proxy config
100 |     const proxySetting = require(paths.appPackageJson).proxy;
101 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
102 |     // Serve webpack assets generated by the compiler over a web server.
103 |     const serverConfig = createDevServerConfig(
104 |       proxyConfig,
105 |       urls.lanUrlForConfig
106 |     );
107 |     const devServer = new WebpackDevServer(compiler, serverConfig);
108 |     // Launch WebpackDevServer.
109 |     devServer.listen(port, HOST, err => {
110 |       if (err) {
111 |         return console.log(err);
112 |       }
113 |       if (isInteractive) {
114 |         clearConsole();
115 |       }
116 | 
117 |       // We used to support resolving modules according to `NODE_PATH`.
118 |       // This now has been deprecated in favor of jsconfig/tsconfig.json
119 |       // This lets you use absolute paths in imports inside large monorepos:
120 |       if (process.env.NODE_PATH) {
121 |         console.log(
122 |           chalk.yellow(
123 |             'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
124 |           )
125 |         );
126 |         console.log();
127 |       }
128 | 
129 |       console.log(chalk.cyan('Starting the development server...\n'));
130 |       openBrowser(urls.localUrlForBrowser);
131 |     });
132 | 
133 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
134 |       process.on(sig, function() {
135 |         devServer.close();
136 |         process.exit();
137 |       });
138 |     });
139 |   })
140 |   .catch(err => {
141 |     if (err && err.message) {
142 |       console.log(err.message);
143 |     }
144 |     process.exit(1);
145 |   });
146 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | 
19 | const jest = require('jest');
20 | const execSync = require('child_process').execSync;
21 | let argv = process.argv.slice(2);
22 | 
23 | function isInGitRepository() {
24 |   try {
25 |     execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
26 |     return true;
27 |   } catch (e) {
28 |     return false;
29 |   }
30 | }
31 | 
32 | function isInMercurialRepository() {
33 |   try {
34 |     execSync('hg --cwd . root', { stdio: 'ignore' });
35 |     return true;
36 |   } catch (e) {
37 |     return false;
38 |   }
39 | }
40 | 
41 | // Watch unless on CI or explicitly running all tests
42 | if (
43 |   !process.env.CI &&
44 |   argv.indexOf('--watchAll') === -1
45 | ) {
46 |   // https://github.com/facebook/create-react-app/issues/5210
47 |   const hasSourceControl = isInGitRepository() || isInMercurialRepository();
48 |   argv.push(hasSourceControl ? '--watch' : '--watchAll');
49 | }
50 | 
51 | 
52 | jest.run(argv);
53 | 


--------------------------------------------------------------------------------
/src/course/2.closure/app.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {useState} from './state';
 3 | 
 4 | function Demo() {
 5 |   const [counter, setCounter] = useState(0);
 6 | 
 7 |   return (
 8 |     <div onClick={() => setCounter(counter + 1)}>hello world, {counter}</div>
 9 |   )
10 | }
11 | 
12 | export default Demo();


--------------------------------------------------------------------------------
/src/course/2.closure/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | 
3 | export default function() {
4 |   return <div>hello worlld</div>
5 | }


--------------------------------------------------------------------------------
/src/course/2.closure/state.ts:
--------------------------------------------------------------------------------
 1 | let state: any = null;
 2 | 
 3 | export const useState = (value: number) => {
 4 |   state = state || value;
 5 | 
 6 |   function dispatch(newValue: any) {
 7 |     state = newValue;
 8 |     // 假设此方法能触发页面渲染
 9 |     // render();
10 |   }
11 | 
12 |   return [state, dispatch];
13 | }
14 | 


--------------------------------------------------------------------------------
/src/course/customHooks/EqualArr/equalArr.ts:
--------------------------------------------------------------------------------
 1 | export default function equalArr(a: number[], b: number[]) {
 2 |   if (a.length !== b.length) {
 3 |     return false;
 4 |   }
 5 |   if (a.length === 0 && b.length === 0) {
 6 |     return true;
 7 |   }
 8 |   return a.every((item, i) => item === b[i]);
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/course/customHooks/EqualArr/index.tsx:
--------------------------------------------------------------------------------
 1 | /** 对比两个数组是否相等 */
 2 | import React, { useState } from 'react';
 3 | import {Button, Flex, Card} from 'antd-mobile';
 4 | import equalArr from './equalArr';
 5 | import './style.scss';
 6 | 
 7 | export default function EqualArr() {
 8 |   const [arrA, setArrA] = useState<number[]>([]);
 9 |   const [arrB, setArrB] = useState<number[]>([]);
10 |   const isEqual = equalArr(arrA, arrB);
11 | 
12 |   return (
13 |     <Flex className="queal_arr_container" justify="between" align="start">
14 |       <Card className="inner left" title="左边数组arrA">
15 |         <Button className="btn" onClick={() => setArrA([...arrA, 1])}>新增数字1到arrA</Button>
16 |         {arrA.map((item, i) => (
17 |           <div className="item" key={i}>{item}</div>
18 |         ))}
19 |         <Button className="btn" onClick={() => setArrA([...arrA, 2])}>新增数字2到arrA</Button>
20 |       </Card>
21 | 
22 |       <Flex className="middle" justify="center" align="center">{isEqual.toString()}</Flex>
23 | 
24 |       <Card className="inner right" title="右边数组arrB">
25 |         <Button className="btn" onClick={() => setArrB([...arrB, 1])}>新增数字1到arrB</Button>
26 |         {arrB.map((item, i) => (
27 |           <div className="item" key={i}>{item}</div>
28 |         ))}
29 |         <Button className="btn" onClick={() => setArrB([...arrB, 2])}>新增数字2到arrB</Button>
30 |       </Card>
31 |     </Flex>
32 |   )
33 | }


--------------------------------------------------------------------------------
/src/course/customHooks/EqualArr/style.scss:
--------------------------------------------------------------------------------
 1 | .queal_arr_container {
 2 |   margin: 20px auto;
 3 |   width: 320px;
 4 | 
 5 |   .inner {
 6 |     width: 130px;
 7 |   }
 8 | 
 9 |   .middle {
10 |     flex: 1;
11 |     height: 100px;
12 |     font-size: 20px;
13 |     color: red;
14 |   }
15 | 
16 |   .btn {
17 |     font-size: 12px;
18 |   }
19 |   .item {
20 |     height: 40px;
21 |     display: flex;
22 |     justify-content: center;
23 |     align-items: center;
24 |   }
25 | }


--------------------------------------------------------------------------------
/src/course/customHooks/EqualArrPlus/index.tsx:
--------------------------------------------------------------------------------
 1 | /** 对比两个数组是否相等 */
 2 | import React from 'react';
 3 | import {Button, Flex, Card} from 'antd-mobile';
 4 | import useEqualArr from './useEqualArr';
 5 | import './style.scss';
 6 | 
 7 | export default function EqualArr() {
 8 |   const {arrA, arrB, setArrA, setArrB, isEqual} = useEqualArr();
 9 | 
10 |   return (
11 |     <Flex className="queal_arr_container" justify="between" align="start">
12 |       <Card className="inner left" title="左边数组arrA">
13 |         <Button className="btn" onClick={() => setArrA([...arrA, 1])}>新增数字1到arrA</Button>
14 |         {arrA.map((item, i) => (
15 |           <div className="item" key={i}>{item}</div>
16 |         ))}
17 |         <Button className="btn" onClick={() => setArrA([...arrA, 2])}>新增数字2到arrA</Button>
18 |       </Card>
19 | 
20 |       <Flex className="middle" justify="center" align="center">{isEqual.toString()}</Flex>
21 | 
22 |       <Card className="inner right" title="右边数组arrB">
23 |         <Button className="btn" onClick={() => setArrB([...arrB, 1])}>新增数字1到arrB</Button>
24 |         {arrB.map((item, i) => (
25 |           <div className="item" key={i}>{item}</div>
26 |         ))}
27 |         <Button className="btn" onClick={() => setArrB([...arrB, 2])}>新增数字2到arrB</Button>
28 |       </Card>
29 |     </Flex>
30 |   )
31 | }


--------------------------------------------------------------------------------
/src/course/customHooks/EqualArrPlus/style.scss:
--------------------------------------------------------------------------------
 1 | .queal_arr_container {
 2 |   margin: 20px auto;
 3 |   width: 320px;
 4 | 
 5 |   .inner {
 6 |     width: 130px;
 7 |   }
 8 | 
 9 |   .middle {
10 |     flex: 1;
11 |     height: 100px;
12 |     font-size: 20px;
13 |     color: red;
14 |   }
15 | 
16 |   .btn {
17 |     font-size: 12px;
18 |   }
19 |   .item {
20 |     height: 40px;
21 |     display: flex;
22 |     justify-content: center;
23 |     align-items: center;
24 |   }
25 | }


--------------------------------------------------------------------------------
/src/course/customHooks/EqualArrPlus/useEqualArr.ts:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | 
 3 | function equalArr(a: number[], b: number[]) {
 4 |   if (a.length !== b.length) {
 5 |     return false;
 6 |   }
 7 |   if (a.length === 0 && b.length === 0) {
 8 |     return true;
 9 |   }
10 |   return a.every((item, i) => item === b[i]);
11 | }
12 | 
13 | 
14 | export default function useEqualArr() {
15 |   const [arrA, setArrA] = useState<number[]>([]);
16 |   const [arrB, setArrB] = useState<number[]>([]);
17 |   const isEqual = equalArr(arrA, arrB);
18 | 
19 |   return {
20 |     arrA,
21 |     setArrA,
22 |     arrB,
23 |     setArrB,
24 |     isEqual
25 |   }
26 | }


--------------------------------------------------------------------------------
/src/course/customHooks/MousePos/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import usePointor from './usePointor';
 3 | 
 4 | export default function MousePos() {
 5 |   const {position, handleMouseMove} = usePointor();
 6 |   return (
 7 |     <div onMouseMove={handleMouseMove} style={{width: 500, height: 500}}>
 8 |       <div>x: {position.x}, y: {position.y}</div>
 9 |     </div>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/src/course/customHooks/MousePos/usePointor.ts:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | 
 3 | export default function usePointor() {
 4 |   const [position, setPosition] = useState({x: 0, y: 0});
 5 | 
 6 |   function handleMouseMove(event: React.MouseEvent<HTMLDivElement, any>) {
 7 |     setPosition({x: event.clientX, y: event.clientY});
 8 |   }
 9 |   return {position, handleMouseMove}
10 | }


--------------------------------------------------------------------------------
/src/course/customHooks/MousePos2/Mouse.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | interface Props {
 4 |   render: (props: {x: number, y: number}) => any
 5 | }
 6 | 
 7 | export default class Mouse extends React.Component<Props> {
 8 |   state = { x: 0, y: 0 }
 9 | 
10 |   handleMouseMove = (event: any) => {
11 |     this.setState({
12 |       x: event.clientX,
13 |       y: event.clientY
14 |     })
15 |   }
16 | 
17 |   render() {
18 |     return (
19 |       <div onMouseMove={this.handleMouseMove}>
20 |         {this.props.render(this.state)}
21 |       </div>
22 |     )
23 |   }
24 | }


--------------------------------------------------------------------------------
/src/course/customHooks/MousePos2/index.tsx:
--------------------------------------------------------------------------------
 1 | import Mouse from './Mouse';
 2 | 
 3 | import React from 'react';
 4 | 
 5 | export default function MousePos() {
 6 |   return (
 7 |     <div>
 8 |       <Mouse 
 9 |         render={({ x, y }) => (
10 |           <div>x: {x}, y: {y}</div>
11 |         )}
12 |       />
13 |     </div>
14 |   )
15 | }


--------------------------------------------------------------------------------
/src/course/customHooks/ZhihuFeed/api.ts:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | interface Story {
 4 |   id?: number,
 5 |   ga_prefix?: string,
 6 |   hint?: string,
 7 |   image_hue?: string,
 8 |   title?: string,
 9 |   type?: number,
10 |   url?: string,
11 |   images?: string[]
12 |   image?: string
13 | }
14 | 
15 | export interface Feed {
16 |   date: string,
17 |   stories: Story[],
18 |   top_stories: Story[]
19 | }
20 | 
21 | export function zhLastFeedApi(): Promise<Feed> {
22 |   return axios.get('https://news-at.zhihu.com/api/4/news/latest').then(res => {
23 |     return res.data;
24 |   });
25 | }


--------------------------------------------------------------------------------
/src/course/customHooks/ZhihuFeed/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import useFeed from './useFeed';
 3 | import { ActivityIndicator, Carousel } from 'antd-mobile';
 4 | import './style.scss';
 5 | 
 6 | // 执行如下指令，禁用chrome跨域限制
 7 | // open -a "Google Chrome" --args --disable-web-security  --user-data-dir
 8 | 
 9 | export default function ZhihuFeed() {
10 |   const feed = useFeed();
11 | 
12 |   if (!feed) {
13 |     return <div className="feed_container loading"><ActivityIndicator /></div>
14 |   }
15 | 
16 |   const {stories, top_stories} = feed;
17 |   
18 |   return (
19 |     <div className="feed_container">
20 |       <Carousel infinite autoplay dots={false}>
21 |         {top_stories.map((item, i) => (
22 |           <a className="top_feed_item" key={i} href={item.url}>
23 |             <img src={item.image} alt="" />
24 |             <div className="title">{item.title}</div>
25 |           </a>
26 |         ))}
27 |       </Carousel>
28 | 
29 |       <div className="inner">
30 |         {stories.map((item, i) => (
31 |           <a className="feed_item" href={item.url} key={i}>
32 |             <img src={item.images![0]} alt=""/>
33 |             <div className="info">
34 |               <div className="title">{item.title}</div>
35 |               <div className="tip">{item.hint}</div>
36 |             </div>
37 |           </a>
38 |         ))}
39 |       </div>
40 |     </div>
41 |   )
42 | }


--------------------------------------------------------------------------------
/src/course/customHooks/ZhihuFeed/style.scss:
--------------------------------------------------------------------------------
 1 | .feed_container {
 2 |   width: 375px;
 3 |   margin: 0 auto;
 4 |   background: #FFF;
 5 | 
 6 |   &.loading {
 7 |     display: flex;
 8 |     justify-content: center;
 9 |   }
10 | 
11 |   .top_feed_item {
12 |     display: block;
13 |     height: 200px;
14 |     position: relative;
15 | 
16 |     img {
17 |       display: block;
18 |       width: 100%;
19 |       height: 100%;
20 |     }
21 |     .title {
22 |       position: absolute;
23 |       width: 100%;
24 |       height: 30px;
25 |       bottom: 0;
26 |       background-color: rgba($color: #000000, $alpha: 0.5);
27 |       color: #FFF;
28 |       line-height: 30px;
29 |       text-indent: 10px;
30 |     }
31 |   }
32 | 
33 |   .feed_item {
34 |     display: flex;
35 |     height: 50px;
36 |     padding: 10px;
37 |     align-items: center;
38 | 
39 |     img {
40 |       display: block;
41 |       width: 50px;
42 |       height: 50px;
43 |       margin-right: 10px;
44 |     }
45 | 
46 |     .info {
47 |       flex: 1
48 |     }
49 |     .title {
50 |       font-size: 16px;
51 |       color: #333;
52 |     }
53 |     .tip {
54 |       font-size: 13px;
55 |       color: #666;
56 |       margin-top: 10px;
57 |     }
58 |   }
59 | 
60 | }


--------------------------------------------------------------------------------
/src/course/customHooks/ZhihuFeed/useFeed.ts:
--------------------------------------------------------------------------------
 1 | import {useState, useEffect} from 'react';
 2 | import {zhLastFeedApi, Feed} from './api';
 3 | 
 4 | export default function useFeed() {
 5 |   
 6 |   const [feed, setFeed] = useState<Feed>();
 7 | 
 8 |   useEffect(() => {
 9 |     zhLastFeedApi().then(res => {
10 |       setFeed(res);
11 |     })
12 |   }, []);
13 | 
14 |   return feed;
15 | }


--------------------------------------------------------------------------------
/src/course/customHooks/ZhihuFeed2/api.ts:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | interface Story {
 4 |   id?: number,
 5 |   ga_prefix?: string,
 6 |   hint?: string,
 7 |   image_hue?: string,
 8 |   title?: string,
 9 |   type?: number,
10 |   url?: string,
11 |   images?: string[]
12 |   image?: string
13 | }
14 | 
15 | export interface Feed {
16 |   date: string,
17 |   stories: Story[],
18 |   top_stories: Story[]
19 | }
20 | 
21 | export function zhLastFeedApi(): Promise<Feed> {
22 |   return axios.get('https://news-at.zhihu.com/api/4/news/latest').then(res => {
23 |     return res.data;
24 |   });
25 | }


--------------------------------------------------------------------------------
/src/course/customHooks/ZhihuFeed2/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import useFeed from './useFeed';
 3 | import { ActivityIndicator, Carousel, Button } from 'antd-mobile';
 4 | import './style.scss';
 5 | 
 6 | // 执行如下指令，禁用chrome跨域限制
 7 | // open -a "Google Chrome" --args --disable-web-security  --user-data-dir
 8 | 
 9 | export default function ZhihuFeed() {
10 |   const {feed, setLoading, loading} = useFeed();
11 | 
12 |   if (loading) {
13 |     return <div className="feed_container loading"><ActivityIndicator /></div>
14 |   }
15 | 
16 |   if (!feed) { return null };
17 |   const {stories, top_stories} = feed;
18 |   
19 |   return (
20 |     <div className="feed_container">
21 |       <Carousel infinite autoplay dots={false}>
22 |         {top_stories.map((item, i) => (
23 |           <a className="top_feed_item" key={i} href={item.url}>
24 |             <img src={item.image} alt="" />
25 |             <div className="title">{item.title}</div>
26 |           </a>
27 |         ))}
28 |       </Carousel>
29 | 
30 |       <div className="inner">
31 |         {stories.map((item, i) => (
32 |           <a className="feed_item" href={item.url} key={i}>
33 |             <img src={item.images![0]} alt=""/>
34 |             <div className="info">
35 |               <div className="title">{item.title}</div>
36 |               <div className="tip">{item.hint}</div>
37 |             </div>
38 |           </a>
39 |         ))}
40 |       </div>
41 |       <Button onClick={() => setLoading(true)}>刷新</Button>
42 |     </div>
43 |   )
44 | }


--------------------------------------------------------------------------------
/src/course/customHooks/ZhihuFeed2/style.scss:
--------------------------------------------------------------------------------
 1 | .feed_container {
 2 |   width: 375px;
 3 |   margin: 0 auto;
 4 |   background: #FFF;
 5 | 
 6 |   &.loading {
 7 |     display: flex;
 8 |     justify-content: center;
 9 |   }
10 | 
11 |   .top_feed_item {
12 |     display: block;
13 |     height: 200px;
14 |     position: relative;
15 | 
16 |     img {
17 |       display: block;
18 |       width: 100%;
19 |       height: 100%;
20 |     }
21 |     .title {
22 |       position: absolute;
23 |       width: 100%;
24 |       height: 30px;
25 |       bottom: 0;
26 |       background-color: rgba($color: #000000, $alpha: 0.5);
27 |       color: #FFF;
28 |       line-height: 30px;
29 |       text-indent: 10px;
30 |     }
31 |   }
32 | 
33 |   .feed_item {
34 |     display: flex;
35 |     height: 50px;
36 |     padding: 10px;
37 |     align-items: center;
38 | 
39 |     img {
40 |       display: block;
41 |       width: 50px;
42 |       height: 50px;
43 |       margin-right: 10px;
44 |     }
45 | 
46 |     .info {
47 |       flex: 1
48 |     }
49 |     .title {
50 |       font-size: 16px;
51 |       color: #333;
52 |     }
53 |     .tip {
54 |       font-size: 13px;
55 |       color: #666;
56 |       margin-top: 10px;
57 |     }
58 |   }
59 | 
60 | }


--------------------------------------------------------------------------------
/src/course/customHooks/ZhihuFeed2/useFeed.ts:
--------------------------------------------------------------------------------
 1 | import {useState, useEffect} from 'react';
 2 | import {zhLastFeedApi, Feed} from './api';
 3 | 
 4 | export default function useFeed() {
 5 |   const [feed, setFeed] = useState<Feed>();
 6 |   const [loading, setLoading] = useState(true);
 7 | 
 8 |   useEffect(() => {
 9 |     // 做一个优化判断
10 |     if (!loading) {
11 |       return;
12 |     }
13 |     zhLastFeedApi().then(res => {
14 |       setLoading(false);
15 |       setFeed(res);
16 |     })
17 |   }, [loading]);
18 | 
19 |   return {feed, setLoading, loading};
20 | }
21 | 
22 | /** 判断两个数组是否相等 */
23 | export function equal(a: number[], b: number[]) {
24 |   if (a.length !== b.length) {
25 |     return false;
26 |   }
27 |   if (a.length === 0 && b.length === 0) {
28 |     return true;
29 |   }
30 | 
31 |   return a.every((item, i) => item === b[i]);
32 | }


--------------------------------------------------------------------------------
/src/course/customHooks/app.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import usePageTitle from './usePageTitle';
 3 | import useCounter from './useCouter';
 4 | import './style.scss';
 5 | 
 6 | interface Postion {
 7 |   x: number,
 8 |   y: number
 9 | }
10 | 
11 | export default function AnimateDemo() {
12 |   const def = { x: 0, y: 0 };
13 |   const [startPointPos, setStartPointPos] = useState<Postion>(def);
14 |   const [curPos, setCurPos] = useState<Postion>(def);
15 |   const [startElePos, setStartElePos] = useState(def);
16 | 
17 |   usePageTitle(`x位置: ${curPos.x}`);
18 |   const coutner = useCounter(curPos.x);
19 | 
20 |   function start(e: any) {
21 |     setStartPointPos({ x: e.clientX, y: e.clientY });
22 |   }
23 | 
24 |   function move(e: any) {
25 |     if (!e.clientX && !e.clientX) {
26 |       return;
27 |     }
28 | 
29 |     const dis = {
30 |       x: e.clientX - startPointPos.x,
31 |       y: e.clientY - startPointPos.y
32 |     }
33 | 
34 |     setCurPos({
35 |       x: startElePos.x + dis.x,
36 |       y: startElePos.y + dis.y
37 |     })
38 |   }
39 | 
40 |   function end(e: any) {
41 |     setStartElePos(curPos);
42 |   }
43 | 
44 |   return (
45 |     <div className="container">
46 |       <div>白色方块位置变动次数：{coutner}</div>
47 |       <div 
48 |         className="el" 
49 |         onDragStart={start}
50 |         onDrag={move}
51 |         onDragEnd={end}
52 |         style={{ left: `${curPos.x}px`, top: `${curPos.y}px` }}
53 |         draggable
54 |       />
55 |     </div>
56 |   )
57 | }
58 | 


--------------------------------------------------------------------------------
/src/course/customHooks/style.scss:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   width: 600px;
 3 |   height: 400px;
 4 |   margin: 0 auto;
 5 |   background-color: #FF4B4B;
 6 |   padding-left: 30px;
 7 |   display: flex;
 8 |   align-items: center;
 9 | 
10 |   .el {
11 |     background: #FFF;
12 |     width: 50px;
13 |     height: 50px;
14 |     display: flex;
15 |     justify-content: center;
16 |     align-items: center;
17 |     font-weight: bold;
18 |     color: #FF4B4B;
19 |     position: relative;
20 |   }
21 | }


--------------------------------------------------------------------------------
/src/course/customHooks/useCouter.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react';
 2 | 
 3 | // 用于记录某个值的变化次数
 4 | export default function useCounter(param: any) {
 5 |   const [counter, setCounter] = useState(0);
 6 | 
 7 |   useEffect(() => {
 8 |     setCounter(counter + 1);
 9 |   }, [param]);
10 | 
11 |   return counter;
12 | }


--------------------------------------------------------------------------------
/src/course/customHooks/useEqual.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react';
 2 | 
 3 | export default function useEqual(a: number[], b: number[], q: boolean) {
 4 |   const [isEqual, setEqual] = useState<boolean>(false);
 5 | 
 6 |   useEffect(() => {
 7 |     if (q) {
 8 |       if (a.length != b.length) {
 9 |         return setEqual(false);
10 |       }
11 | 
12 |       a.forEach((item, index) => {
13 |         if (item != b[index]) {
14 |           setEqual(false);
15 |         }
16 |       })
17 |     }
18 |   }, [q]);
19 | 
20 |   return isEqual;
21 | }
22 | 


--------------------------------------------------------------------------------
/src/course/customHooks/useInitial.ts:
--------------------------------------------------------------------------------
 1 | import {useState, useEffect} from 'react';
 2 | 
 3 | export default function useInitial<T, P>(
 4 |   api: (params: P) => Promise<T>,
 5 |   params: P,
 6 |   defaultData: T
 7 | ) {
 8 |   const [loading, setLoading] = useState(true);
 9 |   const [response, setResponse] = useState(defaultData);
10 |   const [errMsg, setErrmsg] = useState('');
11 | 
12 |   useEffect(() => {
13 |     if (!loading) { return };
14 |     getData();
15 |   }, [loading]);
16 | 
17 |   function getData() {
18 |     api(params).then(res => {
19 |       setResponse(res);
20 |     }).catch(e => {
21 |       setErrmsg(errMsg);
22 |     }).finally(() => {
23 |       setLoading(false);
24 |     })
25 |   }
26 | 
27 |   return {
28 |     loading,
29 |     setLoading,
30 |     response,
31 |     errMsg
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/course/customHooks/useLogin.ts:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | 
 3 | export default function useLogin() {
 4 |   const [loginInfo, setLoginInfo] = useState();
 5 |   const _loginInfo = localStorage.getItem('loginInfo');
 6 | 
 7 |   /** 
 8 |    * 从可能缓存登陆信息的地方取登陆信息 
 9 |    * + 本地缓存
10 |    * + cookie
11 |    * + 内存中等
12 |    * */
13 |   if (_loginInfo) {
14 |     setLoginInfo(JSON.parse(_loginInfo));
15 |   }
16 | 
17 |   /** 如果没有拿到登陆信息，则跳转至登陆页面，或者利用缓存的账号密码信息自动重新登录，获得loginInfo */
18 |   window.location.href = '/user/login';
19 | 
20 |   return loginInfo;
21 | }
22 | 
23 | // 如果是小程序，需要处理的前置逻辑就非常多。


--------------------------------------------------------------------------------
/src/course/customHooks/usePageTitle.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | 
3 | /** 设置标题 */
4 | export default function useDrag(title: string) {
5 |   useEffect(() => {
6 |     document.title = title;
7 |   }, [title])
8 | }


--------------------------------------------------------------------------------
/src/course/customHooks/useSurvivalTime.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react';
 2 | 
 3 | /**
 4 |  * 记录组件的存活时间
 5 |  * @param {destory} Boolean 默认为false，当组件确认要被销毁时，传入true
 6 |  */
 7 | export default function useSurvivalTime() {
 8 |   const [startTime] = useState(new Date().getTime());
 9 | 
10 |   useEffect(() => {
11 |     return () => {
12 |       const curTime = new Date().getTime();
13 | 
14 |       // 计算得到时差，通常的处理是调用埋点接口，将时差数据保存在服务端
15 |       const disTime = curTime - startTime;
16 |       // api(disTime); 调用埋点接口
17 |     }
18 |   }, []);
19 | }


--------------------------------------------------------------------------------
/src/course/customHooks/useUserInfo.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react';
 2 | import axios from 'axios';
 3 | 
 4 | export default function useUserInfo() {
 5 |   const [userInfo, setUserInfo] = useState({});
 6 | 
 7 |   useEffect(() => {
 8 |     axios.get('/userinfo').then(res => {
 9 |       setUserInfo(res.data);
10 |     })
11 |   }, []);
12 | 
13 |   return userInfo;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/course/customHooks/withMousePos.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | 
 3 | export default function withMousePos(MouseComponent) {
 4 |   return class extends Component {
 5 |     state = {
 6 |       x: 0,
 7 |       y: 0
 8 |     }
 9 | 
10 |     mouseMoveHandler = (event) => {
11 |       this.setState({
12 |         x: event.clientX,
13 |         y: event.clientX
14 |       })
15 |     }
16 | 
17 |     render() {
18 |       return (
19 |         <div onMouseMove={this.mouseMoveHandler}>
20 |           <MouseComponent mouse={this.state} />
21 |         </div>
22 |       )
23 |     }
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/course/introduce/controlledByClass.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | 
 3 | interface Props {
 4 |   value: number,
 5 |   onChange: (num: number) => any
 6 | }
 7 | 
 8 | interface State {
 9 |   count: number
10 | }
11 | 
12 | export default class Counter extends Component<Props, State> {
13 |   static getDerivedStateFromProps(nextProps: Props) {
14 |     return {
15 |       count: nextProps.value
16 |     }
17 |   }
18 | 
19 |   public state = {
20 |     count: 0
21 |   }
22 | 
23 |   public onClickHandler = (count: number) => {
24 |     const { onChange } = this.props;
25 |     this.setState({
26 |       count
27 |     })
28 |     onChange && onChange(count);
29 |   }
30 | 
31 |   render() {
32 |     const { count } = this.state;
33 |     return [
34 |       <div key="a">{count}</div>,
35 |       <button key="b" onClick={() => this.onClickHandler(count + 1)}>
36 |         点击+1
37 |       </button>
38 |     ]
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/course/introduce/controlledByHooks.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | 
 3 | interface Props {
 4 |   value: number,
 5 |   onChange: (num: number) => any
 6 | }
 7 | 
 8 | export default function Counter({ value, onChange }: Props) {
 9 |   const [count, setCount] = useState<number>(0);
10 | 
11 |   useEffect(() => {
12 |     value && setCount(value);
13 |   }, [value]);
14 | 
15 |   return [
16 |     <div key="a">{count}</div>,
17 |     <button key="b" onClick={() => onChange(count + 1)}>
18 |       点击+1
19 |     </button>
20 |   ]
21 | }


--------------------------------------------------------------------------------
/src/course/introduce/demoByClass.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | 
 3 | export default class Counter extends Component {
 4 |   state = {
 5 |     count: 0
 6 |   }
 7 | 
 8 |   render() {
 9 |     const { count } = this.state;
10 |     return (
11 |       <>
12 |         <div>{count}</div>
13 |         <button onClick={() => this.setState({ count: count + 1 })}>
14 |           点击+1
15 |         </button>
16 |       </>
17 |     );
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/course/introduce/demoByHooks.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | export default function Counter() {
 4 |   const [counter, setCounter] = useState(0);
 5 | 
 6 |   return [
 7 |     <div key="a">{counter}</div>,
 8 |     <button key="b" onClick={() => setCounter(counter + 1)}>
 9 |       点击+1
10 |     </button>
11 |   ]
12 | }


--------------------------------------------------------------------------------
/src/course/introduce/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import Counter from './controlledByHooks';
 3 | 
 4 | export default function Introduce() {
 5 |   const [count, setCount] = useState(0);
 6 | 
 7 |   return (
 8 |     // @ts-ignore
 9 |     <Counter value={count} onChange={setCount} />
10 |   )
11 | }
12 | 


--------------------------------------------------------------------------------
/src/course/useCallback/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useMemo, useState, useCallback } from 'react';
 2 | import { Button } from 'antd-mobile';
 3 | 
 4 | export default function App() {
 5 |   const [target, setTarget] = useState(0);
 6 |   const [other, setOther] = useState(0)
 7 | 
 8 |   const sum = useMemo(() => {
 9 |     console.log('重新计算一次');
10 |     let _sum = 0;
11 |     for (let i = 1; i <= target; i++) {
12 |       _sum += i;
13 |     }
14 |     return _sum;
15 |   }, [target]);
16 | 
17 |   const inputChange = useCallback((e) => {
18 |     console.log(e.target.value);
19 |   }, []);
20 | 
21 |   return (
22 |     <div style={{ width: '200px', margin: 'auto' }}>
23 |       <input type="text" onChange={inputChange} />
24 |       <div style={{ width: '80px', margin: '100px auto', fontSize: '40px' }}>{target} {sum}</div>
25 |       <Button onClick={() => setTarget(target + 1)}>递增</Button>
26 |       <Button onClick={() => setTarget(target - 1)}>递减</Button>
27 | 
28 |       <div style={{ width: '80px', margin: '100px auto', fontSize: '20px' }}>干扰项 {other}</div>
29 |       <Button onClick={() => setOther(other + 1)}>递增</Button>
30 |       <Button onClick={() => setOther(other - 1)}>递减</Button>
31 |     </div>
32 |   )
33 | }
34 | 
35 | 


--------------------------------------------------------------------------------
/src/course/useCallback/utils.ts:
--------------------------------------------------------------------------------
 1 | export function summation(target: number) {
 2 |   let sum = 0;
 3 |   for(let i = 1; i <= target; i++) {
 4 |     sum += i;
 5 |   }
 6 |   return sum;
 7 | }
 8 | 
 9 | // 初始化一个非正常数字，用于缓存上一次的计算结果
10 | let preTarget = -1;
11 | let memoSum = 0;
12 | 
13 | export function memoSummation(target: number) {
14 |   // 如果传入的参数与上一次一样，直接换回缓存结果
15 |   if (preTarget > 0 && preTarget === target) {
16 |     return memoSum;
17 |   }
18 | 
19 |   console.log('我出现，就表示重新计算了一次');
20 |   // 缓存本次传入的参数
21 |   preTarget = target;
22 |   let sum = 0;
23 |   for (let i = 1; i <= target; i++) {
24 |     sum += i;
25 |   }
26 |   // 缓存本次的计算结果
27 |   memoSum = sum;
28 |   return sum;
29 | }
30 | 


--------------------------------------------------------------------------------
/src/course/useContext/context.tsx:
--------------------------------------------------------------------------------
 1 | import React, { createContext, ReactNode, useState, Dispatch } from 'react';
 2 | 
 3 | interface Injected {
 4 |   counter: number,
 5 |   setCounter: Dispatch<any>,
 6 |   increment: () => any,
 7 |   decrement: () => any
 8 | }
 9 | 
10 | export const context = createContext<Injected>({} as Injected);
11 | 
12 | interface Props {
13 |   children?: ReactNode
14 | }
15 | 
16 | export function CounterProvider({ children }: Props) {
17 |   const [counter, setCounter] = useState(0);
18 | 
19 |   const value = {
20 |     counter,
21 |     setCounter,
22 |     increment: () => setCounter(counter + 1),
23 |     decrement: () => setCounter(counter - 1)
24 |   }
25 | 
26 |   return (
27 |     <context.Provider value={value}>{children}</context.Provider>
28 |   )
29 | }


--------------------------------------------------------------------------------
/src/course/useContext/context2.tsx:
--------------------------------------------------------------------------------
 1 | import React, { createContext, ReactNode, useState, Dispatch } from 'react';
 2 | 
 3 | interface Injected {
 4 |   counter: number,
 5 |   setCounter: Dispatch<any>,
 6 |   increment: () => any,
 7 |   decrement: () => any
 8 | }
 9 | 
10 | export const context = createContext<Injected>({} as Injected);
11 | 
12 | interface Props {
13 |   children?: ReactNode
14 | }
15 | 
16 | export function CounterProvider({ children }: Props) {
17 |   const [counter, setCounter] = useState(0);
18 | 
19 |   const value = {
20 |     counter,
21 |     setCounter,
22 |     increment: () => setCounter(counter + 1),
23 |     decrement: () => setCounter(counter - 1)
24 |   }
25 | 
26 |   return (
27 |     <context.Provider value={value}>{children}</context.Provider>
28 |   )
29 | }


--------------------------------------------------------------------------------
/src/course/useContext/demo/components/Home/api.ts:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | interface Story {
 4 |   id?: number,
 5 |   ga_prefix?: string,
 6 |   hint?: string,
 7 |   image_hue?: string,
 8 |   title?: string,
 9 |   type?: number,
10 |   url?: string,
11 |   images?: string[]
12 |   image?: string
13 | }
14 | 
15 | export interface Feed {
16 |   date: string,
17 |   stories: Story[],
18 |   top_stories: Story[]
19 | }
20 | 
21 | export function zhLastFeedApi(): Promise<Feed> {
22 |   return axios.get('https://news-at.zhihu.com/api/4/news/latest').then(res => {
23 |     return res.data;
24 |   });
25 | }
26 | 


--------------------------------------------------------------------------------
/src/course/useContext/demo/components/Home/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect, useContext } from 'react';
 2 | import {zhLastFeedApi, Feed} from './api';
 3 | import { ActivityIndicator, Carousel } from 'antd-mobile';
 4 | import {ctx} from '../../context';
 5 | import './style.scss';
 6 | 
 7 | // 执行如下指令，禁用chrome跨域限制
 8 | // open -a "Google Chrome" --args --disable-web-security  --user-data-dir
 9 | 
10 | export default function ZhihuFeed() {
11 |   const [feed, setFeed] = useState<Feed>();
12 |   const {setUnreadIndex} = useContext(ctx);
13 | 
14 |   useEffect(() => {
15 |     setUnreadIndex(0);
16 |     zhLastFeedApi().then(res => {
17 |       setFeed(res);
18 |     });
19 |   }, []);
20 | 
21 |   if (!feed) {
22 |     return <div className="feed_container loading"><ActivityIndicator /></div>
23 |   }
24 | 
25 |   const {stories, top_stories} = feed;
26 |   
27 |   return (
28 |     <div className="feed_container">
29 |       <Carousel infinite autoplay dots={false}>
30 |         {top_stories.map((item, i) => (
31 |           <a className="top_feed_item" key={i} href={item.url} style={{backgroundImage: `url(${item.image})`}}>
32 |             <div className="title">{item.title}</div>
33 |           </a>
34 |         ))}
35 |       </Carousel>
36 | 
37 |       <div className="inner">
38 |         {stories.map((item, i) => (
39 |           <a className="feed_item" href={item.url} key={i}>
40 |             <img src={item.images![0]} alt=""/>
41 |             <div className="info">
42 |               <div className="title">{item.title}</div>
43 |               <div className="tip">{item.hint}</div>
44 |             </div>
45 |           </a>
46 |         ))}
47 |       </div>
48 |     </div>
49 |   )
50 | }


--------------------------------------------------------------------------------
/src/course/useContext/demo/components/Home/style.scss:
--------------------------------------------------------------------------------
 1 | .feed_container {
 2 |   width: 375px;
 3 |   height: 400px;
 4 |   margin: 0 auto;
 5 | 
 6 |   &.loading {
 7 |     display: flex;
 8 |     justify-content: center;
 9 |   }
10 | 
11 |   .top_feed_item {
12 |     display: block;
13 |     height: 200px;
14 |     position: relative;
15 |     background-size: cover;
16 |     background-repeat: no-repeat;
17 | 
18 |     img {
19 |       display: block;
20 |       width: 100%;
21 |       height: 100%;
22 |     }
23 |     .title {
24 |       position: absolute;
25 |       width: 100%;
26 |       height: 30px;
27 |       bottom: 0;
28 |       background-color: rgba($color: #000000, $alpha: 0.5);
29 |       color: #FFF;
30 |       line-height: 30px;
31 |       text-indent: 10px;
32 |     }
33 |   }
34 | 
35 |   .feed_item {
36 |     display: flex;
37 |     height: 50px;
38 |     padding: 15px;
39 |     align-items: center;
40 |     background-color: #FFF;
41 |     margin-bottom: 1px;
42 | 
43 |     img {
44 |       display: block;
45 |       width: 50px;
46 |       height: 50px;
47 |       margin-right: 10px;
48 |     }
49 | 
50 |     .info {
51 |       flex: 1
52 |     }
53 |     .title {
54 |       font-size: 16px;
55 |       color: #333;
56 |     }
57 |     .tip {
58 |       font-size: 13px;
59 |       color: #666;
60 |       margin-top: 10px;
61 |     }
62 |   }
63 | 
64 | }


--------------------------------------------------------------------------------
/src/course/useContext/demo/components/Hot/api.ts:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | interface Story {
 4 |   id?: number,
 5 |   ga_prefix?: string,
 6 |   hint?: string,
 7 |   image_hue?: string,
 8 |   title?: string,
 9 |   type?: number,
10 |   url?: string,
11 |   images?: string[]
12 |   image?: string
13 | }
14 | 
15 | export interface Feed {
16 |   date: string,
17 |   stories: Story[],
18 |   top_stories: Story[]
19 | }
20 | 
21 | export function topViewApi(): Promise<any> {
22 |   return axios.get('http://wcf.open.cnblogs.com/blog/48HoursTopViewPosts/10').then(res => {
23 |     return res.data;
24 |   });
25 | }


--------------------------------------------------------------------------------
/src/course/useContext/demo/components/Hot/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect, useContext } from 'react';
 2 | import {topViewApi} from './api';
 3 | import { ActivityIndicator } from 'antd-mobile';
 4 | import { ctx } from '../../context';
 5 | import './style.scss';
 6 | 
 7 | // 执行如下指令，禁用chrome跨域限制
 8 | // open -a "Google Chrome" --args --disable-web-security  --user-data-dir
 9 | 
10 | export default function ZhihuFeed() {
11 |   const [feed, setFeed] = useState<string>();
12 |   const {setUnreadHot} = useContext(ctx);
13 | 
14 |   useEffect(() => {
15 |     setUnreadHot(0);
16 |     topViewApi().then(res => {
17 |       setFeed(res);
18 |     })
19 |   }, []);
20 | 
21 |   if (!feed) {
22 |     return <div className="feed_container loading"><ActivityIndicator /></div>
23 |   }
24 |   
25 |   return (
26 |     <div className="blog_container" dangerouslySetInnerHTML={{__html: feed}}>
27 |     </div>
28 |   )
29 | }


--------------------------------------------------------------------------------
/src/course/useContext/demo/components/Hot/style.scss:
--------------------------------------------------------------------------------
 1 | .feed_container {
 2 |   width: 375px;
 3 |   height: 400px;
 4 |   margin: 0 auto;
 5 | 
 6 |   &.loading {
 7 |     display: flex;
 8 |     justify-content: center;
 9 |   }
10 | }
11 | 
12 | .blog_container {
13 |   padding: 0 15px;
14 | 
15 |   title {
16 |     display: block;
17 |     height: 50px;
18 |     line-height: 50px;
19 |     font-size: 18px;
20 |     overflow: hidden;
21 |     white-space: nowrap;
22 |     text-overflow: ellipsis
23 |   }
24 | 
25 |   id {
26 |     display: block;
27 |   }
28 | 
29 |   updated {
30 |     display: block;
31 |   }
32 | 
33 |   entry {
34 |     display: block;
35 |     margin-top: 10px;
36 |   }
37 | }


--------------------------------------------------------------------------------
/src/course/useContext/demo/components/Setting/index.scss:
--------------------------------------------------------------------------------
 1 | .setting_container {
 2 |   .title {
 3 |     padding: 0 15px;
 4 |     height: 50px;
 5 |     line-height: 50px;
 6 |   }
 7 | 
 8 |   .tip {
 9 |     font-size: 12px;
10 |     color: #666;
11 |     padding: 15px;
12 |     line-height: 20px;
13 |   }
14 | }


--------------------------------------------------------------------------------
/src/course/useContext/demo/components/Setting/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import { List, Stepper } from 'antd-mobile';
 3 | import {ctx} from '../../context';
 4 | import './index.scss';
 5 | 
 6 | export default function Setting() {
 7 |   const {unreadIndex, unreadHot, setUnreadIndex, setUnreadHot} = useContext(ctx);
 8 | 
 9 |   return (
10 |     <div className="setting_container">
11 |       <div className="title">基本设置</div>
12 |       <List>
13 |         <List.Item wrap extra={
14 |           <Stepper
15 |             showNumber
16 |             min={0}
17 |             value={unreadIndex}
18 |             onChange={setUnreadIndex}
19 |           />}
20 |         >
21 |           首页未读
22 |         </List.Item>
23 |         <List.Item extra={
24 |           <Stepper
25 |             showNumber
26 |             min={0}
27 |             value={unreadHot}
28 |             onChange={setUnreadHot}
29 |           />}
30 |         >
31 |           热门未读
32 |         </List.Item>
33 |       </List>
34 | 
35 |       <div className="tip">该设置项仅仅用于展示context功能，实践中几乎不会有这样的需求，不过需要使用相同处理方式的需求很多</div>
36 |     </div>
37 |   )
38 | }


--------------------------------------------------------------------------------
/src/course/useContext/demo/context.tsx:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useState, Dispatch, ReactNode } from 'react';
 2 | 
 3 | interface Injected {
 4 |   unreadIndex: number,
 5 |   setUnreadIndex: Dispatch<any>,
 6 |   unreadHot: number,
 7 |   setUnreadHot: Dispatch<any>,
 8 | }
 9 | 
10 | export const ctx = createContext<Injected>({} as Injected);
11 | 
12 | interface Props {
13 |   children?: ReactNode
14 | }
15 | 
16 | export function Provider({children}: Props) {
17 |   const [unreadIndex, setUnreadIndex] = useState(0);
18 |   const [unreadHot, setUnreadHot] = useState(0);
19 | 
20 |   const value = {
21 |     unreadIndex,
22 |     setUnreadIndex,
23 |     unreadHot,
24 |     setUnreadHot,
25 |   }
26 | 
27 |   return (
28 |     <ctx.Provider value={value}>{children}</ctx.Provider>
29 |   )
30 | }


--------------------------------------------------------------------------------
/src/course/useContext/demo/index.scss:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |   height: 100%;
 3 | }
 4 | 
 5 | #root {
 6 |   height: 100%;
 7 | }
 8 | 
 9 | .use_context_container {
10 |   height: 100%;
11 |   max-width: 475px;
12 |   width: 100%;
13 |   margin: 0 auto;
14 |   display: flex;
15 |   flex-direction: column;
16 | 
17 |   .tab_wrapper {
18 |     height: 50px;
19 |     display: flex;
20 |     justify-content: space-around;
21 |     align-items: center;
22 |     border-bottom: 1px solid orange;
23 |   }
24 | 
25 |   .content_wrapper {
26 |     flex: 1;
27 |     overflow: auto;
28 |   } 
29 | }


--------------------------------------------------------------------------------
/src/course/useContext/demo/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, {useContext, useState} from 'react';
 2 | import {ctx, Provider} from './context';
 3 | import {Badge} from 'antd-mobile';
 4 | import Home from './components/Home';
 5 | import Hot from './components/Hot';
 6 | import Setting from './components/Setting';
 7 | import './index.scss';
 8 | 
 9 | function App() {
10 |   const {unreadIndex, unreadHot} = useContext(ctx);
11 |   const [tabIndex, setTabindex] = useState(0);
12 |   
13 |   return (
14 |     <div className="use_context_container">
15 |       <div className="tab_wrapper">
16 |         <Badge text={unreadIndex} style={{ marginLeft: 42 }}>
17 |           <div onClick={() => setTabindex(0)}>首页</div>
18 |         </Badge>
19 |         
20 |         <Badge text={unreadHot} style={{ marginLeft: 42 }}>
21 |           <div onClick={() => setTabindex(1)}>热门</div>
22 |         </Badge>
23 |         
24 |         <div onClick={() => setTabindex(2)}>设置</div>
25 |       </div>
26 | 
27 |       <div className="content_wrapper">
28 |         {tabIndex === 0 && (
29 |           <Home />
30 |         )}
31 | 
32 |         {tabIndex === 1 && (
33 |           <Hot />
34 |         )}
35 | 
36 |         {tabIndex === 2 && (
37 |           <Setting />
38 |         )}
39 |       </div>
40 |     </div>
41 |   )
42 | }
43 | 
44 | export default () => (
45 |   <Provider>
46 |     <App />
47 |   </Provider>
48 | )


--------------------------------------------------------------------------------
/src/course/useContext/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import { Button } from 'antd-mobile';
 3 | import { context, CounterProvider } from './context';
 4 | import { context as context2, CounterProvider as CounterProvider2 } from './context2';
 5 | 
 6 | function Counter() {
 7 |   const { counter = 0, increment, decrement } = useContext(context);
 8 |   const { counter: coutner2, increment: increment2, decrement: decrement2 } = useContext(context2);
 9 | 
10 |   return (
11 |     <div style={{ width: '200px', margin: 'auto' }}>
12 |       <div style={{ width: '40px', margin: '100px auto', fontSize: '40px' }}>{counter}</div>
13 |       <Button onClick={increment}>递增</Button>
14 |       <Button onClick={decrement}>递减</Button>
15 | 
16 |       <div style={{ width: '40px', margin: '100px auto', fontSize: '40px' }}>{coutner2}</div>
17 |       <Button onClick={increment2}>递增</Button>
18 |       <Button onClick={decrement2}>递减</Button>
19 |     </div>
20 |   );
21 | }
22 | 
23 | export default () => (
24 |   <CounterProvider>
25 |     <CounterProvider2>
26 |       <Counter />
27 |     </CounterProvider2>
28 |   </CounterProvider>
29 | );
30 | 


--------------------------------------------------------------------------------
/src/course/useContextWithReducer/context.tsx:
--------------------------------------------------------------------------------
 1 | import React, { createContext, ReactNode, useReducer } from 'react';
 2 | 
 3 | const initialState: number = 0;
 4 | const reduer = (state: number, action: string) => {
 5 |   switch (action) {
 6 |     case 'increment': return state + 1;
 7 |     case 'decrement': return state - 1;
 8 |     case 'reset': return 0;
 9 |   }
10 | }
11 | 
12 | interface Injected {
13 |   counter: number,
14 |   increment: () => any,
15 |   decrement: () => any,
16 |   reset: () => any
17 | }
18 | 
19 | export const contenxt = createContext<Injected>({} as Injected);
20 | 
21 | interface Props {
22 |   children?: ReactNode
23 | }
24 | 
25 | export function CounterProvider({ children }: Props) {
26 |   // @ts-ignore
27 |   const [counter, dispatch] = useReducer(reduer, initialState);
28 | 
29 |   const value = {
30 |     counter,
31 |     increment: () => dispatch('increment'),
32 |     decrement: () => dispatch('decrement'),
33 |     reset: () => dispatch('reset')
34 |   }
35 | 
36 |   return (
37 |     <contenxt.Provider value={value}>{children}</contenxt.Provider>
38 |   )
39 | }


--------------------------------------------------------------------------------
/src/course/useContextWithReducer/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import { Button } from 'antd-mobile';
 3 | import { contenxt, CounterProvider } from './context';
 4 | 
 5 | function Counter() {
 6 |   const { counter = 0, increment, decrement, reset } = useContext(contenxt);
 7 | 
 8 |   return (
 9 |     <div style={{ width: '200px', margin: 'auto' }}>
10 |       <div style={{ width: '40px', margin: '100px auto', fontSize: '40px' }}>{counter}</div>
11 |       <Button onClick={increment}>递增</Button>
12 |       <Button onClick={decrement}>递减</Button>
13 |       <Button onClick={reset}>重置</Button>
14 |     </div>
15 |   );
16 | }
17 | 
18 | export default () => <CounterProvider><Counter /></CounterProvider>;


--------------------------------------------------------------------------------
/src/course/useEffect/demo01.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useRef, useEffect } from 'react';
 2 | import anime from 'animejs';
 3 | import './style.scss';
 4 | 
 5 | export default function AnimateDemo() {
 6 |   const [anime01, setAnime01] = useState(false);
 7 |   const [anime02, setAnime02] = useState(false);
 8 |   const element = useRef<any>();
 9 | 
10 |   useEffect(() => {
11 |     anime01 && !anime02 && animate01();
12 |     anime02 && !anime01 && animate02();
13 | 
14 |     return () => {
15 |       console.log('xxx');
16 |     }
17 |   }, [anime01, anime02]);
18 | 
19 |   function animate01() {
20 |     if (element) {
21 |       anime({
22 |         targets: element.current,
23 |         translateX: 400,
24 |         backgroundColor: '#FF8F42',
25 |         borderRadius: ['0%', '50%'],
26 |         complete: () => {
27 |           setAnime01(false);
28 |         }
29 |       })
30 |     }
31 |   }
32 | 
33 |   function animate02() {
34 |     if (element) {
35 |       anime({
36 |         targets: element.current,
37 |         translateX: 0,
38 |         backgroundColor: '#FFF',
39 |         borderRadius: ['50%', '0%'],
40 |         easing: 'easeInOutQuad',
41 |         complete: () => {
42 |           setAnime02(false);
43 |         }
44 |       })
45 |     }
46 |   }
47 | 
48 |   function clickHandler() {
49 |     setAnime01(true);
50 |     setTimeout(setAnime02.bind(null, true), 500);
51 |   }
52 | 
53 |   return (
54 |     <div className="container" onClick={clickHandler}>
55 |       <div className="el" ref={element} />
56 |     </div>
57 |   )
58 | }


--------------------------------------------------------------------------------
/src/course/useEffect/demo02.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import './style.scss';
 3 | 
 4 | export default function AnimateDemo() {
 5 |   const [counter, setCounter] = useState(0);
 6 | 
 7 |   // DOM渲染完成之后副作用执行
 8 |   useEffect(() => {
 9 |     const timer = setTimeout(() => {
10 |       setCounter(counter + 1);
11 |     }, 300);
12 |     console.log('effect:', timer);
13 | 
14 |     return () => {
15 |       console.log('clear:', timer);
16 |       clearTimeout(timer);
17 |     }
18 |   });
19 | 
20 |   console.log('before render');
21 | 
22 |   return (
23 |     <div className="container">
24 |       <div className="el">{counter}</div>
25 |     </div>
26 |   )
27 | }
28 | 


--------------------------------------------------------------------------------
/src/course/useEffect/demo03.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useRef, useEffect, useCallback } from 'react';
 2 | import anime from 'animejs';
 3 | import './style.scss';
 4 | 
 5 | export default function AnimateDemo() {
 6 |   const [anime01, setAnime01] = useState(false);
 7 |   const [anime02, setAnime02] = useState(false);
 8 |   const element = useRef<any>();
 9 | 
10 |   const animate01 = useCallback(() => {
11 |     if (element) {
12 |       anime({
13 |         targets: element.current,
14 |         translateX: 400,
15 |         backgroundColor: '#FF8F42',
16 |         borderRadius: ['0%', '50%'],
17 |         complete: () => {
18 |           setAnime01(false);
19 |         }
20 |       })
21 |     }
22 |   }, []);
23 | 
24 |   const animate02 = useCallback(() => {
25 |     if (element) {
26 |       anime({
27 |         targets: element.current,
28 |         translateX: 0,
29 |         backgroundColor: '#FFF',
30 |         borderRadius: ['50%', '0%'],
31 |         easing: 'easeInOutQuad',
32 |         complete: () => {
33 |           setAnime02(false);
34 |         }
35 |       })
36 |     }
37 |   }, []);
38 | 
39 |   useEffect(() => {
40 |     anime01 && animate01();
41 |   }, [anime01]);
42 | 
43 |   useEffect(() => {
44 |     anime02 && animate02();
45 |   }, [anime02]);
46 | 
47 |   const clickHandler = useCallback(() => {
48 |     setAnime01(true);
49 |     setTimeout(setAnime02.bind(null, true), 500);
50 |   }, []);
51 | 
52 |   return (
53 |     <div className="container" onClick={clickHandler}>
54 |       <div className="el" ref={element} />
55 |     </div>
56 |   )
57 | }
58 | 


--------------------------------------------------------------------------------
/src/course/useEffect/style.scss:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   width: 600px;
 3 |   height: 400px;
 4 |   margin: 0 auto;
 5 |   background-color: #FF4B4B;
 6 |   padding-left: 30px;
 7 |   display: flex;
 8 |   align-items: center;
 9 | 
10 |   .el {
11 |     background: #FFF;
12 |     width: 50px;
13 |     height: 50px;
14 |     display: flex;
15 |     justify-content: center;
16 |     align-items: center;
17 |     font-weight: bold;
18 |     color: #FF4B4B;
19 |   }
20 | }


--------------------------------------------------------------------------------
/src/course/useReducer/Counter/combineReducer.ts:
--------------------------------------------------------------------------------
 1 | export interface IterationOB {
 2 |   [key: string]: any
 3 | }
 4 | 
 5 | // 参数为一个对象，里面有所有的reducer
 6 | const combineReducer = (reducers: IterationOB) => {
 7 |   // 取得所有 key
 8 |   const reducerKeys = Object.keys(reducers);
 9 |   // 合并之后的State放在这里
10 |   let objInitState: IterationOB = {};
11 | 
12 |   // 检查每一项是否有默认值
13 |   reducerKeys.forEach((key) => {
14 |     // 传入空的type，获取默认值，这样写了之后，action的类型就只能是 { type: 'xxx', } 这种格式了
15 |     const initState = reducers[key](undefined, { type: '' })
16 |     if (initState == 'undefined'){
17 |       throw new Error(`${key} does not return state.`)
18 |     }
19 |     objInitState[key] = initState;
20 |   })
21 | 
22 |   // 返回的函数里执行每一项reducer，最终返回合并之后的state
23 |   return (state?: any, action?: any) => {
24 |     if(action){
25 |       reducerKeys.forEach((key) => {
26 |         const previousState = objInitState[key];
27 |         objInitState[key] = reducers[key](previousState, action);
28 |       })
29 |     }
30 |     
31 |     return { ...objInitState };
32 |   }
33 | }
34 | 
35 | export default combineReducer;


--------------------------------------------------------------------------------
/src/course/useReducer/Counter/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useReducer } from 'react';
 2 | import { Button } from 'antd-mobile';
 3 | import reducer from './reducer';
 4 | 
 5 | export default function Counter() {
 6 |   const [counter, dispatch] = useReducer(reducer, reducer());
 7 |   console.log(counter);
 8 | 
 9 |   return (
10 |     <div style={{ width: '200px', margin: 'auto' }}>
11 |       <div style={{ width: '40px', margin: '100px auto', fontSize: '40px' }}>{counter.reducerA}</div>
12 |       <Button onClick={() => dispatch({type: 'incrementA', payload: 10})}>递增A</Button>
13 |       <Button onClick={() => dispatch({type: 'decrementA', payload: 10})}>递减A</Button>
14 |       <div style={{ width: '40px', margin: '100px auto', fontSize: '40px' }}>{counter.reducerB}</div>
15 |       <Button onClick={() => dispatch({type: 'incrementB', payload: 10})}>递增B</Button>
16 |       <Button onClick={() => dispatch({type: 'decrementB', payload: 10})}>递减B</Button>
17 |     </div>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/src/course/useReducer/Counter/reducer.ts:
--------------------------------------------------------------------------------
 1 | import combineReducer from './combineReducer';
 2 | 
 3 | interface Action {
 4 |   type: string,
 5 |   payload: number
 6 | }
 7 | 
 8 | const stateA: number = 0
 9 | 
10 | function reducerA(state = stateA, action: Action) {
11 |   switch (action.type) {
12 |     case 'incrementA': 
13 |       return state + action.payload
14 |     case 'decrementA':
15 |       return state - action.payload
16 |     default:
17 |       return state;
18 |   }
19 | }
20 | 
21 | const stateB: number = 0
22 | 
23 | function reducerB(state = stateB, action: Action) {
24 |   switch (action.type) {
25 |     case 'incrementB': 
26 |       return state + action.payload
27 |     case 'decrementB':
28 |       return state - action.payload
29 |     default:
30 |       return state;
31 |   }
32 | }
33 | 
34 | export default combineReducer({reducerA, reducerB});


--------------------------------------------------------------------------------
/src/course/useReducer/ZhihuFeed2/api.ts:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | interface Story {
 4 |   id?: number,
 5 |   ga_prefix?: string,
 6 |   hint?: string,
 7 |   image_hue?: string,
 8 |   title?: string,
 9 |   type?: number,
10 |   url?: string,
11 |   images?: string[]
12 |   image?: string
13 | }
14 | 
15 | export interface Feed {
16 |   date: string,
17 |   stories: Story[],
18 |   top_stories: Story[]
19 | }
20 | 
21 | export function zhLastFeedApi(): Promise<Feed> {
22 |   return axios.get('https://news-at.zhihu.com/api/4/news/latest').then(res => {
23 |     return res.data;
24 |   });
25 | }


--------------------------------------------------------------------------------
/src/course/useReducer/ZhihuFeed2/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import useFeed from './useFeed';
 3 | import { ActivityIndicator, Carousel, Button } from 'antd-mobile';
 4 | import './style.scss';
 5 | 
 6 | // 执行如下指令，禁用chrome跨域限制
 7 | // open -a "Google Chrome" --args --disable-web-security  --user-data-dir
 8 | 
 9 | export default function ZhihuFeed() {
10 |   const {feed, setLoading, loading} = useFeed();
11 | 
12 |   if (loading) {
13 |     return <div className="feed_container loading"><ActivityIndicator /></div>
14 |   }
15 | 
16 |   if (!feed) { return null };
17 |   const {stories, top_stories} = feed;
18 |   
19 |   return (
20 |     <div className="feed_container">
21 |       <Carousel infinite autoplay dots={false}>
22 |         {top_stories.map((item, i) => (
23 |           <a className="top_feed_item" key={i} href={item.url}>
24 |             <img src={item.image} alt="" />
25 |             <div className="title">{item.title}</div>
26 |           </a>
27 |         ))}
28 |       </Carousel>
29 | 
30 |       <div className="inner">
31 |         {stories.map((item, i) => (
32 |           <a className="feed_item" href={item.url} key={i}>
33 |             <img src={item.images![0]} alt=""/>
34 |             <div className="info">
35 |               <div className="title">{item.title}</div>
36 |               <div className="tip">{item.hint}</div>
37 |             </div>
38 |           </a>
39 |         ))}
40 |       </div>
41 |       <Button onClick={() => setLoading(true)}>刷新</Button>
42 |     </div>
43 |   )
44 | }


--------------------------------------------------------------------------------
/src/course/useReducer/ZhihuFeed2/style.scss:
--------------------------------------------------------------------------------
 1 | .feed_container {
 2 |   width: 375px;
 3 |   margin: 0 auto;
 4 |   background: #FFF;
 5 | 
 6 |   &.loading {
 7 |     display: flex;
 8 |     justify-content: center;
 9 |   }
10 | 
11 |   .top_feed_item {
12 |     display: block;
13 |     height: 200px;
14 |     position: relative;
15 | 
16 |     img {
17 |       display: block;
18 |       width: 100%;
19 |       height: 100%;
20 |     }
21 |     .title {
22 |       position: absolute;
23 |       width: 100%;
24 |       height: 30px;
25 |       bottom: 0;
26 |       background-color: rgba($color: #000000, $alpha: 0.5);
27 |       color: #FFF;
28 |       line-height: 30px;
29 |       text-indent: 10px;
30 |     }
31 |   }
32 | 
33 |   .feed_item {
34 |     display: flex;
35 |     height: 50px;
36 |     padding: 10px;
37 |     align-items: center;
38 | 
39 |     img {
40 |       display: block;
41 |       width: 50px;
42 |       height: 50px;
43 |       margin-right: 10px;
44 |     }
45 | 
46 |     .info {
47 |       flex: 1
48 |     }
49 |     .title {
50 |       font-size: 16px;
51 |       color: #333;
52 |     }
53 |     .tip {
54 |       font-size: 13px;
55 |       color: #666;
56 |       margin-top: 10px;
57 |     }
58 |   }
59 | 
60 | }


--------------------------------------------------------------------------------
/src/course/useReducer/ZhihuFeed2/useFeed.ts:
--------------------------------------------------------------------------------
 1 | import {useState, useEffect} from 'react';
 2 | import {zhLastFeedApi, Feed} from './api';
 3 | 
 4 | export default function useFeed() {
 5 |   const [feed, setFeed] = useState<Feed>();
 6 |   const [loading, setLoading] = useState(true);
 7 | 
 8 |   useEffect(() => {
 9 |     // 做一个优化判断
10 |     if (!loading) {
11 |       return;
12 |     }
13 |     zhLastFeedApi().then(res => {
14 |       setLoading(false);
15 |       setFeed(res);
16 |     })
17 |   }, [loading]);
18 | 
19 |   return {feed, setLoading, loading};
20 | }
21 | 
22 | /** 判断两个数组是否相等 */
23 | export function equal(a: number[], b: number[]) {
24 |   if (a.length !== b.length) {
25 |     return false;
26 |   }
27 |   if (a.length === 0 && b.length === 0) {
28 |     return true;
29 |   }
30 | 
31 |   return a.every((item, i) => item === b[i]);
32 | }


--------------------------------------------------------------------------------
/src/course/useReducer/context.tsx:
--------------------------------------------------------------------------------
 1 | import React, { createContext, ReactNode, useState, Dispatch } from 'react';
 2 | 
 3 | interface Injected {
 4 |   counter: number,
 5 |   setCounter: Dispatch<any>,
 6 |   increment: () => any,
 7 |   decrement: () => any
 8 | }
 9 | 
10 | export const contenxt = createContext<Injected>({} as Injected);
11 | 
12 | interface Props {
13 |   children?: ReactNode
14 | }
15 | 
16 | export function CounterProvider({ children }: Props) {
17 |   const [counter, setCounter] = useState(0);
18 | 
19 |   const value = {
20 |     counter,
21 |     setCounter,
22 |     increment: () => setCounter(counter + 1),
23 |     decrement: () => setCounter(counter - 1)
24 |   }
25 | 
26 |   return (
27 |     <contenxt.Provider value={value}>{children}</contenxt.Provider>
28 |   )
29 | }


--------------------------------------------------------------------------------
/src/course/useReducer/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useReducer, useState } from 'react';
 2 | import { Button } from 'antd-mobile';
 3 | 
 4 | const initialState: number = 0;
 5 | const reduer = (state: number, action: string) => {
 6 |   switch(action) {
 7 |     case 'increment': return state + 1;
 8 |     case 'decrement': return state - 1;
 9 |     case 'reset': return 0;
10 |     default:
11 |       return state;
12 |   }
13 | }
14 | 
15 | export default function Counter() {
16 |   const [counter, dispatch] = useReducer(reduer, initialState);
17 | 
18 |   return (
19 |     <div style={{ width: '200px', margin: 'auto' }}>
20 |       <div style={{ width: '40px', margin: '100px auto', fontSize: '40px' }}>{counter}</div>
21 |       <Button onClick={() => dispatch('increment')}>递增</Button>
22 |       <Button onClick={() => dispatch('decrement')}>递减</Button>
23 |       <Button onClick={() => dispatch('reset')}>重置</Button>
24 |     </div>
25 |   );
26 | }
27 | 
28 | export function Counter1() {
29 |   const [counter, setCounter] = useState(10);
30 |   return (
31 |     <div>
32 |       <div>{counter}</div>
33 |       <Button onClick={() => setCounter(counter - 1)}>increment</Button>
34 |       <Button onClick={() => setCounter(counter + 1)}>cecrement</Button>
35 |       <Button onClick={() => setCounter(1)}>reset</Button>
36 |     </div>
37 |   );
38 | }
39 | 


--------------------------------------------------------------------------------
/src/course/useRef/BaseRefClass.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, createRef } from "react";
 2 | 
 3 | export default class Demo extends Component {
 4 |   textInput = createRef<HTMLInputElement>();
 5 | 
 6 |   focusTextInput = () => {
 7 |     if (this.textInput.current) {
 8 |       this.textInput.current.focus();
 9 |     }
10 |   }
11 | 
12 |   render() {
13 |     return (
14 |       <>
15 |         <input type="text" ref={this.textInput} />
16 |         <button onClick={this.focusTextInput}>点击我让input组件获得焦点</button>
17 |       </>
18 |     );
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/course/useRef/BaseRefFunction.tsx:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from "react";
 2 | 
 3 | export default function Demo() {
 4 |   const inputRef = useRef<HTMLInputElement>(null);
 5 | 
 6 |   const focusTextInput = () => {
 7 |     if (inputRef.current) {
 8 |       inputRef.current.focus();
 9 |     }
10 |   }
11 | 
12 |   return (
13 |     <>
14 |       <input type="text" ref={inputRef} />
15 |       <button onClick={focusTextInput}>点击我让input组件获得焦点</button>
16 |     </>
17 |   );
18 | }


--------------------------------------------------------------------------------
/src/course/useRef/components/Input/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, {useRef, useImperativeHandle, forwardRef, Ref, useState, ChangeEvent} from 'react';
 2 | 
 3 | export interface InputProps {
 4 |   value?: string,
 5 |   onChange?: (value: string) => any
 6 | }
 7 | 
 8 | export interface XInput {
 9 |   focus: () => void;
10 |   blur: () => void;
11 |   sayHi: () => void
12 | }
13 | 
14 | function Input({value, onChange}: InputProps, ref: Ref<XInput>) {
15 |   const inputRef = useRef<HTMLInputElement>(null);
16 |   const [_value, setValue] = useState(value || '');
17 | 
18 |   useImperativeHandle(ref, () => ({
19 |     focus: () => {
20 |       inputRef.current && inputRef.current.focus()
21 |     },
22 |     blur: () => {
23 |       inputRef.current && inputRef.current.blur()
24 |     },
25 |     sayHi: () => {
26 |       console.log('hello, world!');
27 |     }
28 |   }));
29 | 
30 |   const _onChange = (e: ChangeEvent<HTMLInputElement>) => {
31 |     const value = e.target.value;
32 |     console.log(value);
33 |     setValue(value);
34 |     onChange && onChange(value);
35 |   }
36 | 
37 |   return (
38 |     <div>
39 |       自定义Input组件
40 |       <input value={_value} onChange={_onChange} ref={inputRef} />
41 |     </div>
42 |   );
43 | }
44 | 
45 | export default forwardRef(Input);


--------------------------------------------------------------------------------
/src/course/useRef/components/InputBase/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, {forwardRef, useState, ChangeEvent} from 'react';
 2 | 
 3 | export interface InputProps {
 4 |   value?: string,
 5 |   onChange?: (value: string) => any
 6 | }
 7 | 
 8 | function Input({value, onChange}: InputProps, ref: any) {
 9 |   const [_value, setValue] = useState(value || '');
10 | 
11 |   const _onChange = (e: ChangeEvent<HTMLInputElement>) => {
12 |     const value = e.target.value;
13 |     setValue(value);
14 |     onChange && onChange(value);
15 |   }
16 | 
17 |   return (
18 |     <div>
19 |       自定义Input组件
20 |       <input value={_value} onChange={_onChange} ref={ref} />
21 |     </div>
22 |   );
23 | }
24 | 
25 | export default forwardRef(Input);


--------------------------------------------------------------------------------
/src/course/useRef/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useRef, useState } from "react";
 2 | import Input from './components/Input';
 3 | import { Button } from "antd-mobile";
 4 | 
 5 | const Demo = () => {
 6 |   const textInput = useRef<any>(null);
 7 |   const [text, setText] = useState('')
 8 | 
 9 |   const focusTextInput = () => {
10 |     if (textInput.current) {
11 |       textInput.current.focus();
12 |       textInput.current.sayHi();
13 |     }
14 |   }
15 | 
16 |   return (
17 |     <>
18 |       <Input ref={textInput} onChange={setText} value={text} />
19 |       <Button onClick={focusTextInput}>点击我，input组件获得焦点</Button>
20 |       <div>{text}</div>
21 |     </>
22 |   );
23 | }
24 | 
25 | export default Demo;


--------------------------------------------------------------------------------
/src/course/useRef/timer.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useRef, useEffect } from 'react';
 2 | 
 3 | export default function Timer() {
 4 |   const timerRef = useRef<NodeJS.Timeout>();
 5 | 
 6 |   useEffect(() => {
 7 |     timerRef.current = setInterval(() => {
 8 |       console.log('do something');
 9 |     }, 1000);
10 | 
11 |     // 组件卸载时，清除定时器
12 |     return () => {
13 |       timerRef.current && clearInterval(timerRef.current);
14 |     }
15 |   }, []);
16 | 
17 |   return (
18 |     <div>
19 |       // ...
20 |     </div>
21 |   )
22 | }


--------------------------------------------------------------------------------
/src/course/useState/Demo.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | 
 3 | function Demo() {
 4 |   const [counter, setCounter] = useState(0);
 5 |   const [pen, setPen] = useState(true);
 6 | 
 7 |   useEffect(() => {
 8 |     if (pen) {
 9 |       setCounter(counter + 1);
10 |       setCounter(counter + 1);
11 |       setCounter(counter + 1);
12 |       setPen(false);
13 |     }
14 |   }, [pen]);
15 | 
16 |   console.log(counter, pen);   // 点击之后仅执行一次，合成事件中，，即使是多个不同的State，也会进行合并
17 | 
18 |   return (
19 |     <div onClick={() => setPen(true)}>click me!</div>
20 |   )
21 | }
22 | 
23 | export default Demo;
24 | 


--------------------------------------------------------------------------------
/src/course/useState/Rectangle/index.scss:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   width: 375px;
 3 |   margin: 20px auto;
 4 | 
 5 |   .reatangle {
 6 |     background-color: orange;
 7 |     margin-top: 50px
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/course/useState/Rectangle/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { Slider } from 'antd-mobile';
 3 | import './index.scss';
 4 | 
 5 | interface Color {
 6 |   r: number,
 7 |   g: number,
 8 |   b: number
 9 | }
10 | 
11 | export default function Rectangle() {
12 |   const [height, setHeight] = useState(10);
13 |   const [width, setWidth] = useState(10);
14 |   const [color, setColor] = useState<Color>({ r: 0, g: 0, b: 0 });
15 |   const [radius, setRadius] = useState<number>(0);
16 | 
17 |   const style = {
18 |     height: `${height}px`,
19 |     width: `${width}px`,
20 |     backgroundColor: `rgb(${color.r}, ${color.g}, ${color.b})`,
21 |     borderRadius: `${radius}px`
22 |   }
23 | 
24 |   return (
25 |     <div className="container">
26 |       <p>height:</p>
27 |       <Slider
28 |         max={300}
29 |         min={10}
30 |         onChange={(n) => setHeight(n || 0)}
31 |       />
32 |       <p>width:</p>
33 |       <Slider
34 |         max={300}
35 |         min={10}
36 |         onChange={(n) => setWidth(n || 0)}
37 |       />
38 | 
39 |       <p>color: R:</p>
40 |       <Slider
41 |         max={255}
42 |         min={0}
43 |         onChange={(n = 0) => setColor({ ...color, r: n })}
44 |       />
45 | 
46 |       <p>color: G:</p>
47 |       <Slider
48 |         max={255}
49 |         min={0}
50 |         onChange={(n = 0) => setColor({ ...color, g: n })}
51 |       />
52 | 
53 |       <p>color: B:</p>
54 |       <Slider
55 |         max={255}
56 |         min={0}
57 |         onChange={(n = 0) => setColor({ ...color, b: n })}
58 |       />
59 |       <p>Radius:</p>
60 |       <Slider
61 |         max={150}
62 |         min={0}
63 |         onChange={(n = 0) => setRadius(n)}
64 |       />
65 |       <div className="reatangle" style={style} />
66 |     </div>
67 |   )
68 | }


--------------------------------------------------------------------------------
/src/course/useState/asyncDemo.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | const listApi = function() {}
 4 | 
 5 | interface ListItem {
 6 |   name: string,
 7 |   id: number,
 8 |   thumb: string
 9 | }
10 | 
11 | interface Param {
12 |   current?: number,
13 |   pageSize?: number,
14 |   name?: string,
15 |   id?: number,
16 |   time?: Date
17 | }
18 | 
19 | // 定义为同步变量
20 | let param: Param = {}
21 | 
22 | export default function AsyncDemo() {
23 |   const [listData, setListData] = useState<ListItem[]>([]);
24 |   
25 |   function fetchListData() {
26 |     // @ts-ignore
27 |     listApi(param).then(res => {
28 |       setListData(res.data);
29 |     })
30 |   }
31 | 
32 |   function searchByName(name: string) {
33 |     param = { ...param, name };
34 |     fetchListData();
35 |   }
36 | 
37 |   return [
38 |     <div>data list</div>,
39 |     <button onClick={() => searchByName('Jone')}>search by name</button>
40 |   ]
41 | }


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


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | 
 5 | // import App from './course/useState/Demo';
 6 | // import App from './course/introduce/demoByClass'; 简单对比demo
 7 | // import App from './course/introduce/demoByHooks'; 简单对比demo
 8 | // import App from './course/introduce'; 对比受控组件
 9 | // import App from './course/useState/Rectangle';  useState demo
10 | // import App from './course/useEffect/demo01';
11 | // import App from './course/useEffect/demo02';
12 | // import App from './course/useEffect/demo03';
13 | // import App from './course/customHooks/app';
14 | // import App from './course/useContext';
15 | // import App from './course/useContext/demo';
16 | // import App from './course/useReducer';
17 | // import App from './course/useReducer/Counter';
18 | // import App from './course/useContextWithReducer';
19 | 
20 | // 比较两个数组是否相等
21 | // import App from './course/customHooks/EqualArrPlus';
22 | 
23 | // 获取知乎日报最新列表
24 | // import App from './course/customHooks/ZhihuFeed2';
25 | 
26 | // 获取鼠标位置
27 | // import App from './course/customHooks/MousePos';
28 | 
29 | // import App from './course/useRef';
30 | 
31 | import App from './course/useCallback';
32 | 
33 | import * as serviceWorker from './serviceWorker';
34 | 
35 | ReactDOM.render(<App />, document.getElementById('root'));
36 | 
37 | // If you want your app to work offline and load faster, you can change
38 | // unregister() to register() below. Note this comes with some pitfalls.
39 | // Learn more about service workers: https://bit.ly/CRA-PWA
40 | serviceWorker.unregister();
41 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="node" />
 2 | /// <reference types="react" />
 3 | /// <reference types="react-dom" />
 4 | 
 5 | declare namespace NodeJS {
 6 |   interface ProcessEnv {
 7 |     readonly NODE_ENV: 'development' | 'production' | 'test';
 8 |     readonly PUBLIC_URL: string;
 9 |   }
10 | }
11 | 
12 | declare module '*.bmp' {
13 |   const src: string;
14 |   export default src;
15 | }
16 | 
17 | declare module '*.gif' {
18 |   const src: string;
19 |   export default src;
20 | }
21 | 
22 | declare module '*.jpg' {
23 |   const src: string;
24 |   export default src;
25 | }
26 | 
27 | declare module '*.jpeg' {
28 |   const src: string;
29 |   export default src;
30 | }
31 | 
32 | declare module '*.png' {
33 |   const src: string;
34 |   export default src;
35 | }
36 | 
37 | declare module '*.webp' {
38 |     const src: string;
39 |     export default src;
40 | }
41 | 
42 | declare module '*.svg' {
43 |   import * as React from 'react';
44 | 
45 |   export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
46 | 
47 |   const src: string;
48 |   export default src;
49 | }
50 | 
51 | declare module '*.module.css' {
52 |   const classes: { [key: string]: string };
53 |   export default classes;
54 | }
55 | 
56 | declare module '*.module.scss' {
57 |   const classes: { [key: string]: string };
58 |   export default classes;
59 | }
60 | 
61 | declare module '*.module.sass' {
62 |   const classes: { [key: string]: string };
63 |   export default classes;
64 | }
65 | 


--------------------------------------------------------------------------------
/src/serviceWorker.ts:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.1/8 is considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | type Config = {
 24 |   onSuccess?: (registration: ServiceWorkerRegistration) => void;
 25 |   onUpdate?: (registration: ServiceWorkerRegistration) => void;
 26 | };
 27 | 
 28 | export function register(config?: Config) {
 29 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 30 |     // The URL constructor is available in all browsers that support SW.
 31 |     const publicUrl = new URL(
 32 |       (process as { env: { [key: string]: string } }).env.PUBLIC_URL,
 33 |       window.location.href
 34 |     );
 35 |     if (publicUrl.origin !== window.location.origin) {
 36 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 37 |       // from what our page is served on. This might happen if a CDN is used to
 38 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 39 |       return;
 40 |     }
 41 | 
 42 |     window.addEventListener('load', () => {
 43 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 44 | 
 45 |       if (isLocalhost) {
 46 |         // This is running on localhost. Let's check if a service worker still exists or not.
 47 |         checkValidServiceWorker(swUrl, config);
 48 | 
 49 |         // Add some additional logging to localhost, pointing developers to the
 50 |         // service worker/PWA documentation.
 51 |         navigator.serviceWorker.ready.then(() => {
 52 |           console.log(
 53 |             'This web app is being served cache-first by a service ' +
 54 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 55 |           );
 56 |         });
 57 |       } else {
 58 |         // Is not localhost. Just register service worker
 59 |         registerValidSW(swUrl, config);
 60 |       }
 61 |     });
 62 |   }
 63 | }
 64 | 
 65 | function registerValidSW(swUrl: string, config?: Config) {
 66 |   navigator.serviceWorker
 67 |     .register(swUrl)
 68 |     .then(registration => {
 69 |       registration.onupdatefound = () => {
 70 |         const installingWorker = registration.installing;
 71 |         if (installingWorker == null) {
 72 |           return;
 73 |         }
 74 |         installingWorker.onstatechange = () => {
 75 |           if (installingWorker.state === 'installed') {
 76 |             if (navigator.serviceWorker.controller) {
 77 |               // At this point, the updated precached content has been fetched,
 78 |               // but the previous service worker will still serve the older
 79 |               // content until all client tabs are closed.
 80 |               console.log(
 81 |                 'New content is available and will be used when all ' +
 82 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 83 |               );
 84 | 
 85 |               // Execute callback
 86 |               if (config && config.onUpdate) {
 87 |                 config.onUpdate(registration);
 88 |               }
 89 |             } else {
 90 |               // At this point, everything has been precached.
 91 |               // It's the perfect time to display a
 92 |               // "Content is cached for offline use." message.
 93 |               console.log('Content is cached for offline use.');
 94 | 
 95 |               // Execute callback
 96 |               if (config && config.onSuccess) {
 97 |                 config.onSuccess(registration);
 98 |               }
 99 |             }
100 |           }
101 |         };
102 |       };
103 |     })
104 |     .catch(error => {
105 |       console.error('Error during service worker registration:', error);
106 |     });
107 | }
108 | 
109 | function checkValidServiceWorker(swUrl: string, config?: Config) {
110 |   // Check if the service worker can be found. If it can't reload the page.
111 |   fetch(swUrl)
112 |     .then(response => {
113 |       // Ensure service worker exists, and that we really are getting a JS file.
114 |       const contentType = response.headers.get('content-type');
115 |       if (
116 |         response.status === 404 ||
117 |         (contentType != null && contentType.indexOf('javascript') === -1)
118 |       ) {
119 |         // No service worker found. Probably a different app. Reload the page.
120 |         navigator.serviceWorker.ready.then(registration => {
121 |           registration.unregister().then(() => {
122 |             window.location.reload();
123 |           });
124 |         });
125 |       } else {
126 |         // Service worker found. Proceed as normal.
127 |         registerValidSW(swUrl, config);
128 |       }
129 |     })
130 |     .catch(() => {
131 |       console.log(
132 |         'No internet connection found. App is running in offline mode.'
133 |       );
134 |     });
135 | }
136 | 
137 | export function unregister() {
138 |   if ('serviceWorker' in navigator) {
139 |     navigator.serviceWorker.ready.then(registration => {
140 |       registration.unregister();
141 |     });
142 |   }
143 | }
144 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2016",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "module": "commonjs",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "noEmit": true,
20 |     "jsx": "preserve"
21 |   },
22 |   "include": [
23 |     "src"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------