SKIP_PREFLIGHT_CHECK & HTTPS

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

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
+

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

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
+
+[email protected] /Users/xgqfrms-mbp/Documents/GitHub/23-design-patterns-app/src/design_patterns_app
+└─┬ [email protected]
+  └── [email protected] 
+
+
+```
+
+## SKIP_PREFLIGHT_CHECK
+
+```sh
+# If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
+
+```
+
+

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

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

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

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"

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 (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}