diff --git a/000-xyz/https.md b/000-xyz/https.md new file mode 100644 index 0000000..e49b9eb --- /dev/null +++ b/000-xyz/https.md @@ -0,0 +1,19 @@ +# HTTPS + +https://github.com/xgqfrms/react-in-depth + +https://www.cnblogs.com/xgqfrms/p/13845919.html + +```js + "scripts": { + "old-start": "react-scripts start", + "start": "export HTTPS=true && SSL_CRT_FILE=cert.pem && SSL_KEY_FILE=key.pem react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, +``` + +http://localhost:3000 + +https://localhost:3000 diff --git a/000-xyz/react-hooks/readme.md b/000-xyz/react-hooks/readme.md index 3a08170..4162403 100644 --- a/000-xyz/react-hooks/readme.md +++ b/000-xyz/react-hooks/readme.md @@ -35,3 +35,8 @@ https://reactjs.org/docs/hooks-faq.html ## PureComponents https://www.cnblogs.com/xgqfrms/p/13899830.html + +`shouldComponentUpdate(nextProps, nextState)` + +https://reactjs.org/docs/react-component.html#shouldcomponentupdate + diff --git a/000-xyz/react.md b/000-xyz/react.md index f4d459d..03afc99 100644 --- a/000-xyz/react.md +++ b/000-xyz/react.md @@ -21,10 +21,12 @@ $ npm init react-app design_patterns_app ```sh # Yarn -$ cd design_patterns_app && yarn start +$ cd design_patterns_app +$ yarn start # npm -$ cd design_patterns_app && npm start +$ cd design_patterns_app +$ npm start ``` diff --git a/000-xyz/webpack.md b/000-xyz/webpack.md new file mode 100644 index 0000000..a12a156 --- /dev/null +++ b/000-xyz/webpack.md @@ -0,0 +1,73 @@ +# webpack + +```sh +$ yarn start + +yarn run v1.22.4 +$ react-scripts start + +There might be a problem with the project dependency tree. +It is likely not a bug in Create React App, but something you need to fix locally. + +The react-scripts package provided by Create React App requires a dependency: + + "webpack": "4.44.2" + +Don't try to install it manually: your package manager does it automatically. +However, a different version of webpack was detected higher up in the tree: + + /Users/xgqfrms-mbp/Documents/GitHub/23-design-patterns-app/node_modules/webpack (version: 4.43.0) + +Manually installing incompatible versions is known to cause hard-to-debug issues. + +If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. +That will permanently disable this message but you might encounter other issues. + +To fix the dependency tree, try following the steps below in the exact order: + + 1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder. + 2. Delete node_modules in your project folder. + 3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder. + 4. Run npm install or yarn, depending on the package manager you use. + +In most cases, this should be enough to fix the problem. +If this has not helped, there are a few other things you can try: + + 5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead. + This may help because npm has known issues with package hoisting which may get resolved in future versions. + + 6. Check if /Users/xgqfrms-mbp/Documents/GitHub/23-design-patterns-app/node_modules/webpack is outside your project directory. + For example, you might have accidentally installed something in your home folder. + + 7. Try running npm ls webpack in your project folder. + This will tell you which other package (apart from the expected react-scripts) installed webpack. + +If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. +That would permanently disable this preflight check in case you want to proceed anyway. + +P.S. We know this message is long but please read the steps above :-) We hope you find them helpful! + +error Command failed with exit code 1. +info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. + +``` + + +```sh +$ npm ls webpack + +design_patterns_app@0.1.0 /Users/xgqfrms-mbp/Documents/GitHub/23-design-patterns-app/src/design_patterns_app +└─┬ react-scripts@4.0.0 + └── webpack@4.44.2 + + +``` + +## SKIP_PREFLIGHT_CHECK + +```sh +# If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. + +``` + + diff --git a/build/readme.md b/build/readme.md deleted file mode 100644 index 136a358..0000000 --- a/build/readme.md +++ /dev/null @@ -1,20 +0,0 @@ -# webpack merge - -```js -const merge = require('webpack-merge'); - -const baseConfig = require('./webpack.base.config'); - -const devConfig = require('./webpack.dev.config'); -const proConfig = require('./webpack.prod.config'); - -const log = console.log; - -module.exports = (env, args) => { - log(`env =\n`, env) - log(`args =\n`, args) - const config = args.mode === 'development' ? devConfig : proConfig; - return merge(baseConfig, config); -}; - -``` diff --git a/build/webpack.base.config.js b/build/webpack.base.config.js deleted file mode 100644 index 6617cdf..0000000 --- a/build/webpack.base.config.js +++ /dev/null @@ -1,53 +0,0 @@ -// plugins -const HtmlWebpackPlugin = require('html-webpack-plugin'); -// const ExtractTextPlugin = require("extract-text-webpack-plugin"); - -// built-in plugins -const webpack = require('webpack'); - -const path = require('path'); - -module.exports = { - // entry: './src/index.ts', - entry: { - 'app': './src/index.ts', - // 'app': './src/index.tsx', - }, - output: { - // filename: 'webpack-plugin-demo.bundle.js', - // filename: '[name].[hash:8].js', - filename: '[name].[chunkhash:8].js', - path: path.resolve(__dirname, '../dist') - }, - resolve: { - extensions: ['.tsx', '.ts', '.jsx', '.js'], - }, - module: { - rules: [ - { - test: /\.(ts|tsx)$/i, - use: [{ - loader: 'ts-loader', - }], - exclude: /node_modules/, - }, - ], - }, - // devtool: 'inline-source-map', - // mode: 'development', - // mode: 'production', - // mode: 'none', - plugins: [ - new webpack.ProgressPlugin(), - new HtmlWebpackPlugin({ - title: 'Webpack 4.x & TypeScript 3.x', - template: './public/index.html', - // template: path.resolve(__dirname, '../public/index.html'), - }), - ], - optimization: { - splitChunks: { - chunks: 'all', - }, - }, -}; diff --git a/build/webpack.config.js b/build/webpack.config.js deleted file mode 100644 index 3729eb5..0000000 --- a/build/webpack.config.js +++ /dev/null @@ -1,18 +0,0 @@ -const merge = require('webpack-merge'); - -const baseConfig = require('./webpack.base.config'); -const devConfig = require('./webpack.dev.config'); -const proConfig = require('./webpack.prod.config'); - -const log = console.log; - -// log(`process.env =\n`, process.env) -// log(`process.argv =\n`, process.argv) - -module.exports = (env, args) => { - // log(`process.env.NODE_ENV =`, process.env.NODE_ENV) - // log(`env =`, env) - // log(`args =\n`, args) - const config = args.mode === 'development' ? devConfig : proConfig; - return merge(baseConfig, config); -}; diff --git a/build/webpack.dev.config.js b/build/webpack.dev.config.js deleted file mode 100644 index 10f32f9..0000000 --- a/build/webpack.dev.config.js +++ /dev/null @@ -1,15 +0,0 @@ -// const OpenBrowserPlugin = require('open-browser-webpack-plugin'); - -module.exports = { - devtool: 'cheap-module-eval-source-map', - // devtool: 'source-map', - // devtool: 'inline-source-map', - mode: 'development', - // plugins: [ - // // new OpenBrowserPlugin(), - // new OpenBrowserPlugin({ - // url: 'http://localhost:8080', - // // url: 'http://localhost:3000', - // }), - // ], -}; diff --git a/build/webpack.prod.config.js b/build/webpack.prod.config.js deleted file mode 100644 index c37193d..0000000 --- a/build/webpack.prod.config.js +++ /dev/null @@ -1,8 +0,0 @@ -const { CleanWebpackPlugin } = require('clean-webpack-plugin'); - -module.exports = { - mode: 'production', - plugins: [ - new CleanWebpackPlugin(), - ], -}; diff --git a/src/design_patterns_app/cert.pem b/src/design_patterns_app/cert.pem new file mode 100644 index 0000000..72dda1e --- /dev/null +++ b/src/design_patterns_app/cert.pem @@ -0,0 +1,21 @@ +-----BEGIN CERTIFICATE----- +MIIDfjCCAmYCCQCgj1sYqc5/UDANBgkqhkiG9w0BAQsFADCBgDELMAkGA1UEBhMC +Y24xCzAJBgNVBAgMAnNoMQswCQYDVQQHDAJzaDENMAsGA1UECgwEeHJheTEQMA4G +A1UECwwHeGdxZnJtczEUMBIGA1UEAwwLeGdxZnJtcy54eXoxIDAeBgkqhkiG9w0B +CQEWEWFkbWluQHhncWZybXMueHl6MB4XDTIwMTAyMDA0NTIxNFoXDTIxMTAyMDA0 +NTIxNFowgYAxCzAJBgNVBAYTAmNuMQswCQYDVQQIDAJzaDELMAkGA1UEBwwCc2gx +DTALBgNVBAoMBHhyYXkxEDAOBgNVBAsMB3hncWZybXMxFDASBgNVBAMMC3hncWZy +bXMueHl6MSAwHgYJKoZIhvcNAQkBFhFhZG1pbkB4Z3Fmcm1zLnh5ejCCASIwDQYJ +KoZIhvcNAQEBBQADggEPADCCAQoCggEBAM2dBTvCDx34+Kpr7glTISTpAZaKEa1y +al0IKad+e2YeLSsAANqxlBWL42oi3Qo2E3yyiYOiw8KVZaCj4zaSKwbGMKHRhzYR +Ydz4wSSjdk3jAa426YzZjbJCwTUyz0lx7JdwBVfaZATC8Ns5VPOtW4nTawhFHA1h +/1xtXGBlqSWpZH5BS0Knk0UAM9TGgBskdMf4PerGgEw99wt8MVbhWjpCgPH6rABW +DQrbX0chnVr2bYhKbsrM+tZPjS6w/9yEcLNojkG6aY4JSItxzAzlPmRp+WDK8N4O +w4hm0ASD4KQATBq4F+hC8cANcJzIMvPfPqrBmAzpjZ4gJF4vXEWLSH0CAwEAATAN +BgkqhkiG9w0BAQsFAAOCAQEAUERBLxBtjQPRiY598Tlk8me98y9nFUKhYl8ZNvYR +BPRGjIeDX1rvzxvBIZ3wz5CcNqexyZF7hoDL1lGUrejTqrEyO9JRbkyN1eJApKSF +htCWlWfcWJrFVJV6r7QoaSxN/07DANL8F3QktR5UXOSzhTg8Z2GQf64tpmJpomlE +CLFTVD5+/rOyksHmOTyTRqyK3wvPT+MgKTSisiRQb/l4GaIWUJb3DPBDEyvvOT5f +Wwmck5zjGECS1Mn8fhbFRgN1hyNvvVbg4iXKA+WCFsDvl5oot+xSWngNMDKi/znM +JDq0VbAVHtrVKhzvuAsXNGMbTZyylEQ4uW/MWdpx7y5l9g== +-----END CERTIFICATE----- diff --git a/src/design_patterns_app/key.pem b/src/design_patterns_app/key.pem new file mode 100644 index 0000000..0369c95 --- /dev/null +++ b/src/design_patterns_app/key.pem @@ -0,0 +1,27 @@ +-----BEGIN RSA PRIVATE KEY----- +MIIEpAIBAAKCAQEAzZ0FO8IPHfj4qmvuCVMhJOkBlooRrXJqXQgpp357Zh4tKwAA +2rGUFYvjaiLdCjYTfLKJg6LDwpVloKPjNpIrBsYwodGHNhFh3PjBJKN2TeMBrjbp +jNmNskLBNTLPSXHsl3AFV9pkBMLw2zlU861bidNrCEUcDWH/XG1cYGWpJalkfkFL +QqeTRQAz1MaAGyR0x/g96saATD33C3wxVuFaOkKA8fqsAFYNCttfRyGdWvZtiEpu +ysz61k+NLrD/3IRws2iOQbppjglIi3HMDOU+ZGn5YMrw3g7DiGbQBIPgpABMGrgX +6ELxwA1wnMgy898+qsGYDOmNniAkXi9cRYtIfQIDAQABAoIBACWpMSA091fiFooA +ouUKWPPNygCs4XgHkPvhVt/bBvc5Z8SMh5uHEzyvFsSGBj6skP0yJoX59ilZ+/dk +jWWdeEwRWS8Kld2NaYNz/MydNDon7lLetACciJuyJnl8CQPG3jMOzau90LweiMde +xPStOCsSknQ9VFoPLRrc3SK6/DRtcgaqF27gRm5NKjMnPH+jyRj/+5WJly5pQTIA +xd2i5E3fjdEapJXcYf+x6iTMVCteGMqEjAZbOFzoy8yXfYDtgFJ24iHuXowI1F0S +g+bpXf48flcjHCWmkWflmVjAFDxQxUcbz6CLMtD+qmEV8b+Kj4C5qe0iFTAM1x/9 +Z9rG4IECgYEA/ZqehyD7HMWVsHezBMgD4UK0arMGbtxzzgScCxbr20uKQmtLoDWT +2FnsGJ6BuIrNH+vm+tNNaj5AAv6wqyERNNhqCg8W3IW1cIzPbmsSLThGucvSOlia +X28SrpT8Zsz1ySpn338brgyWyOEkeZCSqLn3q9gQwU0NJWULBSOPinUCgYEAz45U +Ef6Ixw5PdfbD0HukGcYS2PxwNRgWQrgut9BdL2l5+nBS907gEMawc8/7k3BQy8OD +0IvGOX6zT2IBT1le55MvNne5onpkucGUcLXCPiL1ADVQVhxNFeg22DGnGmAaxU76 +hBGR/pmVol0zO1xiBILOTU8e3obF5eA4u0bctOkCgYBOTU5DNLiz8oG8YckBYexo +wdrI0wvacPDEnIG9ns8l/5Xp2g0Yo1JJy8Hs/AvbeefJwmGn8lQFyMCk7BSKUgRp +B6T+BBiv8AzMen2VfzO2iJi1xyva3f6UFsxy4QdpikEdYp190VYvkC2CSpmjezL9 +K6ZABc9uj6bOc/tKE+e+/QKBgQCe9ILAMS5xPC1wy2aVsUsxDff7RAFvOB48RLBK +yAHFwMLRINr5WefSEUiruVoTRY4rL3Yw7gsGl1kd75HPQkOjmJ4s2a5Kl++yL2XO +l/TF/6Gg4jO/bvc+UtRF6Gjwky+Ncnn7UTV9RgRKD5Sf3pWWnNMAdBrRE2hWL81i +59c5mQKBgQCPmM8BZCgIa3DFw5masiEONSX6CmOOcgsZ4oUtZKl+rfMld441X3Yb +aGYW6/x0glz1QM798X4GNsbaRtP5XPLY4KSg4fmrpiWZ7Ty6fm+41S7ugeOkTbeD +pJkgSMfpL68qr4g9+9NXSw4wVBsoKUC/seBxvtBktrNi07jKWRLfew== +-----END RSA PRIVATE KEY----- diff --git a/src/design_patterns_app/keytmp.pem b/src/design_patterns_app/keytmp.pem new file mode 100644 index 0000000..c604d46 --- /dev/null +++ b/src/design_patterns_app/keytmp.pem @@ -0,0 +1,30 @@ +-----BEGIN ENCRYPTED PRIVATE KEY----- +MIIFHzBJBgkqhkiG9w0BBQ0wPDAbBgkqhkiG9w0BBQwwDgQICgUihLlfOxYCAggA +MB0GCWCGSAFlAwQBKgQQif/a03jRZQbMHNKNOnmM1ASCBNAa0gf7OBUBBBlkizgV +elDv4dc4p2hZSs6p/eIJ6bIB2jsCBv928ojmH3phmp7+keZQnSaQKcZFV3cnN7wQ +ipjANgv5SXV0UmzlRPZ0n3yN+3kSr+VCvn0DqigHF7jHecbnVa39dlFaCer4wp3i +v/RTKCdqvKPTGuv6j6P1pK6gvoFM0pPYEziOo2djUYSMNuCeXar/eeTAKS2WEfV8 +PE3QaKdBjxyXYDwdTjGyV8fuAyYxYH/4LCj6gAp50ZwlwlrQ4PR/0we/N+Ui5YQf +xMgoFCCmD9Kbr1jeBkU1sfNuumDEurNw1L9/j26AojbpN6njE3Fkizst7Kkzk7YJ +Ey+vjVMTBAVIoOM457yLJPenFE7eeFu5GehezGF09TRaHYFnCdFMa4QI75gvUh0M +GA/uHxsS7tlXffhXYexNdb3CAXwzxDQRTllcISHH6sE4q+cHJnT+QOlTcSUrtPL/ +imBNvbiLBzYdOBwxTAn922kJQiRjgR1QiAhyzBaYwHi9ThNZjJsisTBf4FWA7vgZ +1au0ClEJEmQFBaC9msDcO7rqzk3Bgg7K01kEryH0Ssn/vAm8k7lAJb3fRZrUJGoj +/K0dp+JZHDvc9AgjHaYAyQsW39w8k3x/Pj8rwqcJyTiW9V4/8pf6B2DVGXo7xlRb +Gk8hNZbvkOUOqPXhCttRQRFg0a1FYYJPlnCnUqej9L8lyXbZlmTFsOk8jDdzyPRv +vPkmB5oFag78n7yDNjJ2VQgUKdT45H3mBoyBFG6+20osxXKRO793c6o/OvkjhsSK +KyvR2D9GlqdFBhNR9TYbd8i8dfnLBnTfGTigsPcA2k0n5FGcJzWhPLF0sNyMD7Ic +T2qxjqAVNR/CGZknSAPb0U1xJ/LxNiwfkM63jfZPBGXwunDDRteN9x8Jh3fMLLuM +EGpH0QAUNsgUTVGb5Hsb7ycIAUcujihHgfFAYsuj8tECY0RzkD2mhTz5T1tJNBmt +ohOmy0ndW7+nM41Krt+VA7Jy+0omQPq0RRJDVlFX4Dp5Hd2C68OtOpo6av0p1whl ++D9RHiomb5fjRW8sguknzGBf6JkOs8oB2rrYcYYBUikDoH6pNt7jNv0eRmcKK7Ux +DLGTUCXVGwjy6fRKAAV//RbuKYS9GL3s0+xKZvdgDMLcqGPWc+r0oI6vL4P8WjyL +BcMesQYnpaa9ku19paCd8PyjyA1eizWHfGRqakRzBcwXpqpKzuKJ/eaJBx7b8OT1 +BRqUYU445lBQ+Ot9stzQ2spANTKQaOuDamrcjL5+7iKUvIcc1KxlZLqn2+LBZpSc +nlBvbF6lx3MxmHZNzFW1bPtUl0wqhUw/E8Qv/cHVkKsj4ycbj9suH6WvjdHWCXYQ +sISa9jxXaYfxZW58Khz3kwq0O6pFjq5ORllkCsgtf2Hm1KnkMy8ywOvW9UoJXgrA +yzhLOck+v9c0wK6UeqshQ8JVU8lZ4FO32E2D9fauz93Si3FZO9pAebUzIT5OwQKd +GiLa4cSFl+74QXW60Fx8fd+lJOF2xm3i1jboTflZYRXNBkvuIjFyJvv2coRTmeSW +dt7IlxZTbREjuwQsNczM3iqE9clnvRaA93xAMuLBHLjiqwG0Xp1m3cKjzpzVzPWL +WNAlDufkrAEEkpCEsKDiqBhtBw== +-----END ENCRYPTED PRIVATE KEY----- diff --git a/src/design_patterns_app/package.json b/src/design_patterns_app/package.json index d2e9cd2..75cf62f 100644 --- a/src/design_patterns_app/package.json +++ b/src/design_patterns_app/package.json @@ -12,7 +12,8 @@ "web-vitals": "^0.2.4" }, "scripts": { - "start": "react-scripts start", + "old-start": "react-scripts start", + "start": "export HTTPS=true && SSL_CRT_FILE=cert.pem && SSL_KEY_FILE=key.pem react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" diff --git a/test/counter.jsx b/test/counter.jsx new file mode 100644 index 0000000..31a8bbe --- /dev/null +++ b/test/counter.jsx @@ -0,0 +1,15 @@ +import React, { useState } from 'react'; + +function Example() { + // Declare a new state variable, which we'll call "count" + const [count, setCount] = useState(0); + + return ( +
+

You clicked {count} times

+ +
+ ); +}