yutsuo
/
udemy-react
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

update

master
Yutsuo 6 years ago
parent
db1d0be5fe
commit
309354df13
8 changed files with 14099 additions and 155 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 276
      02/package-lock.json
  2. 3
      02/package.json
  3. 11
      02/src/App.css
  4. 49
      02/src/App.js
  5. 33
      02/src/App.module.css
  6. 23
      02/src/Person/Person.js
  7. 0
      02/src/Person/Person.module.css
  8. 13859
      package-lock.json

276
02/package-lock.json generated
Unescape View File

@ -940,6 +940,29 @@
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-9.0.1.tgz", "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-9.0.1.tgz",
"integrity": "sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA==" "integrity": "sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA=="
}, },
"@emotion/is-prop-valid": {
"version": "0.8.8",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
"requires": {
"@emotion/memoize": "0.7.4"
}
},
"@emotion/memoize": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
},
"@emotion/stylis": {
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
},
"@emotion/unitless": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
},
"@hapi/address": { "@hapi/address": {
"version": "2.1.4", "version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@ -2079,6 +2102,22 @@
"resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.4.tgz", "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.4.tgz",
"integrity": "sha512-S6d+tEzc5Af1tKIMbsf2QirCcPdQ+mKUCY2H1nJj1DyA1ShwpsoxEOAwbWsG5gcXNV/olpvQd9vrUWRx4bnhpw==" "integrity": "sha512-S6d+tEzc5Af1tKIMbsf2QirCcPdQ+mKUCY2H1nJj1DyA1ShwpsoxEOAwbWsG5gcXNV/olpvQd9vrUWRx4bnhpw=="
}, },
"babel-plugin-styled-components": {
"version": "1.10.7",
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz",
"integrity": "sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==",
"requires": {
"@babel/helper-annotate-as-pure": "^7.0.0",
"@babel/helper-module-imports": "^7.0.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"lodash": "^4.17.11"
}
},
"babel-plugin-syntax-jsx": {
"version": "6.18.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
},
"babel-plugin-syntax-object-rest-spread": { "babel-plugin-syntax-object-rest-spread": {
"version": "6.13.0", "version": "6.13.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@ -2680,6 +2719,11 @@
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==" "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
}, },
"camelize": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
"integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
},
"caniuse-api": { "caniuse-api": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@ -2749,13 +2793,12 @@
}, },
"dependencies": { "dependencies": {
"fsevents": { "fsevents": {
"version": "1.2.9", "version": "1.2.12",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.9.tgz", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.12.tgz",
"integrity": "sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==", "integrity": "sha512-Ggd/Ktt7E7I8pxZRbGIs7vwqAPscSESMrCSkx2FtWeqmheJgCo2R74fTsZFCifr0VTPwqRpPv17+6b8Zp7th0Q==",
"optional": true, "optional": true,
"requires": { "requires": {
"nan": "^2.12.1", "node-pre-gyp": "*"
"node-pre-gyp": "^0.12.0"
}, },
"dependencies": { "dependencies": {
"abbrev": { "abbrev": {
@ -2797,7 +2840,7 @@
} }
}, },
"chownr": { "chownr": {
"version": "1.1.1", "version": "1.1.4",
"bundled": true, "bundled": true,
"optional": true "optional": true
}, },
@ -2822,7 +2865,7 @@
"optional": true "optional": true
}, },
"debug": { "debug": {
"version": "4.1.1", "version": "3.2.6",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
@ -2845,11 +2888,11 @@
"optional": true "optional": true
}, },
"fs-minipass": { "fs-minipass": {
"version": "1.2.5", "version": "1.2.7",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"minipass": "^2.2.1" "minipass": "^2.6.0"
} }
}, },
"fs.realpath": { "fs.realpath": {
@ -2873,7 +2916,7 @@
} }
}, },
"glob": { "glob": {
"version": "7.1.3", "version": "7.1.6",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
@ -2899,7 +2942,7 @@
} }
}, },
"ignore-walk": { "ignore-walk": {
"version": "3.0.1", "version": "3.0.3",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
@ -2916,7 +2959,7 @@
} }
}, },
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.4",
"bundled": true, "bundled": true,
"optional": true "optional": true
}, },
@ -2947,12 +2990,12 @@
} }
}, },
"minimist": { "minimist": {
"version": "0.0.8", "version": "1.2.5",
"bundled": true, "bundled": true,
"optional": true "optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.9.0",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
@ -2961,38 +3004,38 @@
} }
}, },
"minizlib": { "minizlib": {
"version": "1.2.1", "version": "1.3.3",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"minipass": "^2.2.1" "minipass": "^2.9.0"
} }
}, },
"mkdirp": { "mkdirp": {
"version": "0.5.1", "version": "0.5.3",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "^1.2.5"
} }
}, },
"ms": { "ms": {
"version": "2.1.1", "version": "2.1.2",
"bundled": true, "bundled": true,
"optional": true "optional": true
}, },
"needle": { "needle": {
"version": "2.3.0", "version": "2.3.3",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"debug": "^4.1.0", "debug": "^3.2.6",
"iconv-lite": "^0.4.4", "iconv-lite": "^0.4.4",
"sax": "^1.2.4" "sax": "^1.2.4"
} }
}, },
"node-pre-gyp": { "node-pre-gyp": {
"version": "0.12.0", "version": "0.14.0",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
@ -3005,11 +3048,11 @@
"rc": "^1.2.7", "rc": "^1.2.7",
"rimraf": "^2.6.1", "rimraf": "^2.6.1",
"semver": "^5.3.0", "semver": "^5.3.0",
"tar": "^4" "tar": "^4.4.2"
} }
}, },
"nopt": { "nopt": {
"version": "4.0.1", "version": "4.0.3",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
@ -3018,17 +3061,26 @@
} }
}, },
"npm-bundled": { "npm-bundled": {
"version": "1.0.6", "version": "1.1.1",
"bundled": true,
"optional": true,
"requires": {
"npm-normalize-package-bin": "^1.0.1"
}
},
"npm-normalize-package-bin": {
"version": "1.0.1",
"bundled": true, "bundled": true,
"optional": true "optional": true
}, },
"npm-packlist": { "npm-packlist": {
"version": "1.4.1", "version": "1.4.8",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"ignore-walk": "^3.0.1", "ignore-walk": "^3.0.1",
"npm-bundled": "^1.0.1" "npm-bundled": "^1.0.1",
"npm-normalize-package-bin": "^1.0.1"
} }
}, },
"npmlog": { "npmlog": {
@ -3085,7 +3137,7 @@
"optional": true "optional": true
}, },
"process-nextick-args": { "process-nextick-args": {
"version": "2.0.0", "version": "2.0.1",
"bundled": true, "bundled": true,
"optional": true "optional": true
}, },
@ -3098,17 +3150,10 @@
"ini": "~1.3.0", "ini": "~1.3.0",
"minimist": "^1.2.0", "minimist": "^1.2.0",
"strip-json-comments": "~2.0.1" "strip-json-comments": "~2.0.1"
},
"dependencies": {
"minimist": {
"version": "1.2.0",
"bundled": true,
"optional": true
}
} }
}, },
"readable-stream": { "readable-stream": {
"version": "2.3.6", "version": "2.3.7",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
@ -3122,7 +3167,7 @@
} }
}, },
"rimraf": { "rimraf": {
"version": "2.6.3", "version": "2.7.1",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
@ -3145,7 +3190,7 @@
"optional": true "optional": true
}, },
"semver": { "semver": {
"version": "5.7.0", "version": "5.7.1",
"bundled": true, "bundled": true,
"optional": true "optional": true
}, },
@ -3191,17 +3236,17 @@
"optional": true "optional": true
}, },
"tar": { "tar": {
"version": "4.4.8", "version": "4.4.13",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"chownr": "^1.1.1", "chownr": "^1.1.1",
"fs-minipass": "^1.2.5", "fs-minipass": "^1.2.5",
"minipass": "^2.3.4", "minipass": "^2.8.6",
"minizlib": "^1.1.1", "minizlib": "^1.2.1",
"mkdirp": "^0.5.0", "mkdirp": "^0.5.0",
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.2" "yallist": "^3.0.3"
} }
}, },
"util-deprecate": { "util-deprecate": {
@ -3223,7 +3268,7 @@
"optional": true "optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.1.1",
"bundled": true, "bundled": true,
"optional": true "optional": true
} }
@ -3749,6 +3794,11 @@
"postcss": "^7.0.5" "postcss": "^7.0.5"
} }
}, },
"css-color-keywords": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
"integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
},
"css-color-names": { "css-color-names": {
"version": "0.0.4", "version": "0.0.4",
"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@ -3838,6 +3888,23 @@
"resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
"integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
}, },
"css-to-react-native": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
"integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
"requires": {
"camelize": "^1.0.0",
"css-color-keywords": "^1.0.0",
"postcss-value-parser": "^4.0.2"
},
"dependencies": {
"postcss-value-parser": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz",
"integrity": "sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg=="
}
}
},
"css-tree": { "css-tree": {
"version": "1.0.0-alpha.37", "version": "1.0.0-alpha.37",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@ -6029,6 +6096,14 @@
"minimalistic-crypto-utils": "^1.0.1" "minimalistic-crypto-utils": "^1.0.1"
} }
}, },
"hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"requires": {
"react-is": "^16.7.0"
}
},
"hosted-git-info": { "hosted-git-info": {
"version": "2.8.5", "version": "2.8.5",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz",
@ -6931,13 +7006,12 @@
}, },
"dependencies": { "dependencies": {
"fsevents": { "fsevents": {
"version": "1.2.9", "version": "1.2.12",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.9.tgz", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.12.tgz",
"integrity": "sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==", "integrity": "sha512-Ggd/Ktt7E7I8pxZRbGIs7vwqAPscSESMrCSkx2FtWeqmheJgCo2R74fTsZFCifr0VTPwqRpPv17+6b8Zp7th0Q==",
"optional": true, "optional": true,
"requires": { "requires": {
"nan": "^2.12.1", "node-pre-gyp": "*"
"node-pre-gyp": "^0.12.0"
}, },
"dependencies": { "dependencies": {
"abbrev": { "abbrev": {
@ -6979,7 +7053,7 @@
} }
}, },
"chownr": { "chownr": {
"version": "1.1.1", "version": "1.1.4",
"bundled": true, "bundled": true,
"optional": true "optional": true
}, },
@ -7004,7 +7078,7 @@
"optional": true "optional": true
}, },
"debug": { "debug": {
"version": "4.1.1", "version": "3.2.6",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
@ -7027,11 +7101,11 @@
"optional": true "optional": true
}, },
"fs-minipass": { "fs-minipass": {
"version": "1.2.5", "version": "1.2.7",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"minipass": "^2.2.1" "minipass": "^2.6.0"
} }
}, },
"fs.realpath": { "fs.realpath": {
@ -7055,7 +7129,7 @@
} }
}, },
"glob": { "glob": {
"version": "7.1.3", "version": "7.1.6",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
@ -7081,7 +7155,7 @@
} }
}, },
"ignore-walk": { "ignore-walk": {
"version": "3.0.1", "version": "3.0.3",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
@ -7098,7 +7172,7 @@
} }
}, },
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.4",
"bundled": true, "bundled": true,
"optional": true "optional": true
}, },
@ -7129,12 +7203,12 @@
} }
}, },
"minimist": { "minimist": {
"version": "0.0.8", "version": "1.2.5",
"bundled": true, "bundled": true,
"optional": true "optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.9.0",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
@ -7143,38 +7217,38 @@
} }
}, },
"minizlib": { "minizlib": {
"version": "1.2.1", "version": "1.3.3",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"minipass": "^2.2.1" "minipass": "^2.9.0"
} }
}, },
"mkdirp": { "mkdirp": {
"version": "0.5.1", "version": "0.5.3",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "^1.2.5"
} }
}, },
"ms": { "ms": {
"version": "2.1.1", "version": "2.1.2",
"bundled": true, "bundled": true,
"optional": true "optional": true
}, },
"needle": { "needle": {
"version": "2.3.0", "version": "2.3.3",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"debug": "^4.1.0", "debug": "^3.2.6",
"iconv-lite": "^0.4.4", "iconv-lite": "^0.4.4",
"sax": "^1.2.4" "sax": "^1.2.4"
} }
}, },
"node-pre-gyp": { "node-pre-gyp": {
"version": "0.12.0", "version": "0.14.0",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
@ -7187,11 +7261,11 @@
"rc": "^1.2.7", "rc": "^1.2.7",
"rimraf": "^2.6.1", "rimraf": "^2.6.1",
"semver": "^5.3.0", "semver": "^5.3.0",
"tar": "^4" "tar": "^4.4.2"
} }
}, },
"nopt": { "nopt": {
"version": "4.0.1", "version": "4.0.3",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
@ -7200,17 +7274,26 @@
} }
}, },
"npm-bundled": { "npm-bundled": {
"version": "1.0.6", "version": "1.1.1",
"bundled": true,
"optional": true,
"requires": {
"npm-normalize-package-bin": "^1.0.1"
}
},
"npm-normalize-package-bin": {
"version": "1.0.1",
"bundled": true, "bundled": true,
"optional": true "optional": true
}, },
"npm-packlist": { "npm-packlist": {
"version": "1.4.1", "version": "1.4.8",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"ignore-walk": "^3.0.1", "ignore-walk": "^3.0.1",
"npm-bundled": "^1.0.1" "npm-bundled": "^1.0.1",
"npm-normalize-package-bin": "^1.0.1"
} }
}, },
"npmlog": { "npmlog": {
@ -7267,7 +7350,7 @@
"optional": true "optional": true
}, },
"process-nextick-args": { "process-nextick-args": {
"version": "2.0.0", "version": "2.0.1",
"bundled": true, "bundled": true,
"optional": true "optional": true
}, },
@ -7280,17 +7363,10 @@
"ini": "~1.3.0", "ini": "~1.3.0",
"minimist": "^1.2.0", "minimist": "^1.2.0",
"strip-json-comments": "~2.0.1" "strip-json-comments": "~2.0.1"
},
"dependencies": {
"minimist": {
"version": "1.2.0",
"bundled": true,
"optional": true
}
} }
}, },
"readable-stream": { "readable-stream": {
"version": "2.3.6", "version": "2.3.7",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
@ -7304,7 +7380,7 @@
} }
}, },
"rimraf": { "rimraf": {
"version": "2.6.3", "version": "2.7.1",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
@ -7327,7 +7403,7 @@
"optional": true "optional": true
}, },
"semver": { "semver": {
"version": "5.7.0", "version": "5.7.1",
"bundled": true, "bundled": true,
"optional": true "optional": true
}, },
@ -7373,17 +7449,17 @@
"optional": true "optional": true
}, },
"tar": { "tar": {
"version": "4.4.8", "version": "4.4.13",
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"chownr": "^1.1.1", "chownr": "^1.1.1",
"fs-minipass": "^1.2.5", "fs-minipass": "^1.2.5",
"minipass": "^2.3.4", "minipass": "^2.8.6",
"minizlib": "^1.1.1", "minizlib": "^1.2.1",
"mkdirp": "^0.5.0", "mkdirp": "^0.5.0",
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.2" "yallist": "^3.0.3"
} }
}, },
"util-deprecate": { "util-deprecate": {
@ -7405,7 +7481,7 @@
"optional": true "optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.1.1",
"bundled": true, "bundled": true,
"optional": true "optional": true
} }
@ -8426,12 +8502,6 @@
"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
"integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==" "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
}, },
"nan": {
"version": "2.14.0",
"resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
"integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==",
"optional": true
},
"nanomatch": { "nanomatch": {
"version": "1.2.13", "version": "1.2.13",
"resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@ -11377,6 +11447,11 @@
} }
} }
}, },
"shallowequal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
},
"shebang-command": { "shebang-command": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@ -12008,6 +12083,23 @@
} }
} }
}, },
"styled-components": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.1.0.tgz",
"integrity": "sha512-0Qs2wEkFBXHFlysz6CV831VG6HedcrFUwChjnWylNivsx14MtmqQsohi21rMHZxzuTba063dEyoe/SR6VGJI7Q==",
"requires": {
"@babel/helper-module-imports": "^7.0.0",
"@babel/traverse": "^7.4.5",
"@emotion/is-prop-valid": "^0.8.8",
"@emotion/stylis": "^0.8.4",
"@emotion/unitless": "^0.7.4",
"babel-plugin-styled-components": ">= 1",
"css-to-react-native": "^3.0.0",
"hoist-non-react-statics": "^3.0.0",
"shallowequal": "^1.1.0",
"supports-color": "^5.5.0"
}
},
"stylehacks": { "stylehacks": {
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",

3
02/package.json
Unescape View File

@ -5,7 +5,8 @@
"dependencies": { "dependencies": {
"react": "^16.12.0", "react": "^16.12.0",
"react-dom": "^16.12.0", "react-dom": "^16.12.0",
"react-scripts": "3.2.0" "react-scripts": "3.2.0",
"styled-components": "5.1.0"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

11
02/src/App.css
Unescape View File

@ -1,11 +0,0 @@
.App {
text-align: center;
}
.red {
color:red;
}
.bold {
font-weight: bold;
}

49
02/src/App.js
Unescape View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import "./App.css";
import Person from "./Person/Person"; import Person from "./Person/Person";
import classes from "./App.module.css";
/*// ## Functional code generated by creat-react-app ## /*// ## Functional code generated by creat-react-app ##
function App() { function App() {
@ -70,6 +70,7 @@ const App = props => {
// }*/ // }*/
// ## OOP code ## // ## OOP code ##
class App extends React.Component { class App extends React.Component {
// The state should be IMMUTABLE, do not directly change it // The state should be IMMUTABLE, do not directly change it
// If you need to change it, use the setState() method. // If you need to change it, use the setState() method.
@ -77,13 +78,13 @@ class App extends React.Component {
character: [ character: [
{ id: 1, name: "char1", ilvl: "100" }, { id: 1, name: "char1", ilvl: "100" },
{ id: 2, name: "char2", ilvl: "110" }, { id: 2, name: "char2", ilvl: "110" },
{ id: 3, name: "char3", ilvl: "120" } { id: 3, name: "char3", ilvl: "120" },
], ],
somethingElse: "something something", somethingElse: "something something",
showOrHide: false showOrHide: false,
}; };
deleteCharacterHandler = index => { deleteCharacterHandler = (index) => {
const characterCopy = [...this.state.character]; //<- it's a copy so you don't change the state, but a copy of it const characterCopy = [...this.state.character]; //<- it's a copy so you don't change the state, but a copy of it
// const characters = this.state.character.slice(); //<- this works, too, but use spread [...] instead // const characters = this.state.character.slice(); //<- this works, too, but use spread [...] instead
@ -94,7 +95,7 @@ class App extends React.Component {
nameChangedHandler = (event, id) => { nameChangedHandler = (event, id) => {
// find the index during input event // find the index during input event
const charIndex = this.state.character.findIndex(c => { const charIndex = this.state.character.findIndex((c) => {
return c.id === id; return c.id === id;
}); });
@ -103,6 +104,8 @@ class App extends React.Component {
// get the input event to change name // get the input event to change name
char.name = event.target.value; char.name = event.target.value;
// char.name = event.input.value;
// make a copy of the whole characters array prepare the changes there // make a copy of the whole characters array prepare the changes there
const characters = [...this.state.character]; const characters = [...this.state.character];
@ -120,18 +123,8 @@ class App extends React.Component {
}; };
render() { render() {
//inline CSS directives
const style = {
backgroundColor: "green",
color: "white",
font: "inherit",
border: "1px solid blue",
padding: "8px",
margin: "10px",
cursor: "pointer"
};
let persons = null; let persons = null;
let btnClass = " ";
if (this.state.showOrHide) { if (this.state.showOrHide) {
persons = ( persons = (
@ -143,44 +136,42 @@ class App extends React.Component {
name={char.name} name={char.name}
ilvl={char.ilvl} ilvl={char.ilvl}
key={char.id} key={char.id}
changed={event => this.nameChangedHandler(event, char.id)} changed={(event) => this.nameChangedHandler(event, char.id)}
/> />
); );
})} })}
</div> </div>
); );
btnClass = classes.Red;
style.backgroundColor = "red";
} }
let classes = []; let assignedClasses = [];
if (this.state.character.length <= 2) { if (this.state.character.length <= 2) {
classes.push('red'); assignedClasses.push(classes.red);
} }
if (this.state.character.length <= 1) { if (this.state.character.length <= 1) {
classes.push('bold'); assignedClasses.push(classes.bold);
} }
return ( return (
<div className="App"> <div className={classes.App}>
<h1>Hi, I'm a React App, I'm cute.</h1> <h1>Hi, I'm a React App, I'm cute.</h1>
<p>Created using OOP code</p> <p>Created using OOP code</p>
<p className={classes.join(' ')}>Created using OOP code</p> <p className={assignedClasses.join(" ")}>Created using OOP code</p>
<p style={{color: 'blue'}}>And this is a little test in styling</p> <p style={{ color: "blue" }}>And this is a little test in styling</p>
<button <button
style={style} // <- putting in the CSS directives set above className={btnClass}
onClick={() => console.log('"CLICK"')} onClick={() => console.log('"CLICK"')}
> >
Click Me Click Me
</button> </button>
<button style={style} onClick={this.showOrHide}> <button className={btnClass} onClick={this.showOrHide}>
{this.state.showOrHide ? "HIDE IT" : "SHOW IT"} {this.state.showOrHide ? "HIDE IT" : "SHOW IT"}
</button> </button>
{persons} {persons}
</div> </div>
); );
} }ø
} }
export default App; export default App;

33
02/src/App.module.css
Unescape View File

@ -0,0 +1,33 @@
.App {
text-align: center;
}
.red {
color: red;
}
.bold {
font-weight: bold;
}
.App button {
color: white;
font: inherit;
border: 1px solid blue;
padding: 8px;
margin: 10px;
cursor: pointer;
}
.App button:hover {
background-color: lightgreen;
color: black;
}
.App button.Red {
background-color: red;
}
.App button.Red:hover {
background-color: salmon;
}

23
02/src/Person/Person.js
Unescape View File

@ -1,25 +1,9 @@
import React from "react"; import React from "react";
// import './Person.css'; import classes from "./Person.module.css";
import styled from "styled-components";
const StyledDiv = styled.div`
width: 500px;
margin: 16px auto;
border: 1px solid #eee;
color: green;
box-shadow: 0 2px 3px #ccc;
padding: 16px;
text-align: center;
@media (min-width: 500px) {
width: 450px;
}
`;
const person = props => { const person = props => {
return ( return (
// <div className="Person"> <div className={classes.Person}>
<StyledDiv>
<p> <p>
I'm {props.name} and my ilvl is {props.ilvl} and ready to raid! I'm {props.name} and my ilvl is {props.ilvl} and ready to raid!
</p> </p>
@ -27,8 +11,7 @@ const person = props => {
<input type="text" onChange={props.changed} defaultValue={props.name} /> <input type="text" onChange={props.changed} defaultValue={props.name} />
<button onClick={props.click}>delete</button> <button onClick={props.click}>delete</button>
{console.log("props:", props)} {console.log("props:", props)}
</StyledDiv> </div>
// </div>
); );
}; };

0
02/src/Person/Person.css → 02/src/Person/Person.module.css
Unescape View File

13859
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save