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
Split 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",
"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": {
"version": "2.1.4",
"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",
"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": {
"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",
@ -2680,6 +2719,11 @@
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
"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": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@ -2749,13 +2793,12 @@
},
"dependencies": {
"fsevents": {
"version": "1.2.9",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.9.tgz",
"integrity": "sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==",
"version": "1.2.12",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.12.tgz",
"integrity": "sha512-Ggd/Ktt7E7I8pxZRbGIs7vwqAPscSESMrCSkx2FtWeqmheJgCo2R74fTsZFCifr0VTPwqRpPv17+6b8Zp7th0Q==",
"optional": true,
"requires": {
"nan": "^2.12.1",
"node-pre-gyp": "^0.12.0"
"node-pre-gyp": "*"
},
"dependencies": {
"abbrev": {
@ -2797,7 +2840,7 @@
}
},
"chownr": {
"version": "1.1.1",
"version": "1.1.4",
"bundled": true,
"optional": true
},
@ -2822,7 +2865,7 @@
"optional": true
},
"debug": {
"version": "4.1.1",
"version": "3.2.6",
"bundled": true,
"optional": true,
"requires": {
@ -2845,11 +2888,11 @@
"optional": true
},
"fs-minipass": {
"version": "1.2.5",
"version": "1.2.7",
"bundled": true,
"optional": true,
"requires": {
"minipass": "^2.2.1"
"minipass": "^2.6.0"
}
},
"fs.realpath": {
@ -2873,7 +2916,7 @@
}
},
"glob": {
"version": "7.1.3",
"version": "7.1.6",
"bundled": true,
"optional": true,
"requires": {
@ -2899,7 +2942,7 @@
}
},
"ignore-walk": {
"version": "3.0.1",
"version": "3.0.3",
"bundled": true,
"optional": true,
"requires": {
@ -2916,7 +2959,7 @@
}
},
"inherits": {
"version": "2.0.3",
"version": "2.0.4",
"bundled": true,
"optional": true
},
@ -2947,12 +2990,12 @@
}
},
"minimist": {
"version": "0.0.8",
"version": "1.2.5",
"bundled": true,
"optional": true
},
"minipass": {
"version": "2.3.5",
"version": "2.9.0",
"bundled": true,
"optional": true,
"requires": {
@ -2961,38 +3004,38 @@
}
},
"minizlib": {
"version": "1.2.1",
"version": "1.3.3",
"bundled": true,
"optional": true,
"requires": {
"minipass": "^2.2.1"
"minipass": "^2.9.0"
}
},
"mkdirp": {
"version": "0.5.1",
"version": "0.5.3",
"bundled": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
"minimist": "^1.2.5"
}
},
"ms": {
"version": "2.1.1",
"version": "2.1.2",
"bundled": true,
"optional": true
},
"needle": {
"version": "2.3.0",
"version": "2.3.3",
"bundled": true,
"optional": true,
"requires": {
"debug": "^4.1.0",
"debug": "^3.2.6",
"iconv-lite": "^0.4.4",
"sax": "^1.2.4"
}
},
"node-pre-gyp": {
"version": "0.12.0",
"version": "0.14.0",
"bundled": true,
"optional": true,
"requires": {
@ -3005,11 +3048,11 @@
"rc": "^1.2.7",
"rimraf": "^2.6.1",
"semver": "^5.3.0",
"tar": "^4"
"tar": "^4.4.2"
}
},
"nopt": {
"version": "4.0.1",
"version": "4.0.3",
"bundled": true,
"optional": true,
"requires": {
@ -3018,17 +3061,26 @@
}
},
"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,
"optional": true
},
"npm-packlist": {
"version": "1.4.1",
"version": "1.4.8",
"bundled": true,
"optional": true,
"requires": {
"ignore-walk": "^3.0.1",
"npm-bundled": "^1.0.1"
"npm-bundled": "^1.0.1",
"npm-normalize-package-bin": "^1.0.1"
}
},
"npmlog": {
@ -3085,7 +3137,7 @@
"optional": true
},
"process-nextick-args": {
"version": "2.0.0",
"version": "2.0.1",
"bundled": true,
"optional": true
},
@ -3098,17 +3150,10 @@
"ini": "~1.3.0",
"minimist": "^1.2.0",
"strip-json-comments": "~2.0.1"
},
"dependencies": {
"minimist": {
"version": "1.2.0",
"bundled": true,
"optional": true
}
}
},
"readable-stream": {
"version": "2.3.6",
"version": "2.3.7",
"bundled": true,
"optional": true,
"requires": {
@ -3122,7 +3167,7 @@
}
},
"rimraf": {
"version": "2.6.3",
"version": "2.7.1",
"bundled": true,
"optional": true,
"requires": {
@ -3145,7 +3190,7 @@
"optional": true
},
"semver": {
"version": "5.7.0",
"version": "5.7.1",
"bundled": true,
"optional": true
},
@ -3191,17 +3236,17 @@
"optional": true
},
"tar": {
"version": "4.4.8",
"version": "4.4.13",
"bundled": true,
"optional": true,
"requires": {
"chownr": "^1.1.1",
"fs-minipass": "^1.2.5",
"minipass": "^2.3.4",
"minizlib": "^1.1.1",
"minipass": "^2.8.6",
"minizlib": "^1.2.1",
"mkdirp": "^0.5.0",
"safe-buffer": "^5.1.2",
"yallist": "^3.0.2"
"yallist": "^3.0.3"
}
},
"util-deprecate": {
@ -3223,7 +3268,7 @@
"optional": true
},
"yallist": {
"version": "3.0.3",
"version": "3.1.1",
"bundled": true,
"optional": true
}
@ -3749,6 +3794,11 @@
"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": {
"version": "0.0.4",
"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",
"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": {
"version": "1.0.0-alpha.37",
"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"
}
},
"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": {
"version": "2.8.5",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz",
@ -6931,13 +7006,12 @@
},
"dependencies": {
"fsevents": {
"version": "1.2.9",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.9.tgz",
"integrity": "sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==",
"version": "1.2.12",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.12.tgz",
"integrity": "sha512-Ggd/Ktt7E7I8pxZRbGIs7vwqAPscSESMrCSkx2FtWeqmheJgCo2R74fTsZFCifr0VTPwqRpPv17+6b8Zp7th0Q==",
"optional": true,
"requires": {
"nan": "^2.12.1",
"node-pre-gyp": "^0.12.0"
"node-pre-gyp": "*"
},
"dependencies": {
"abbrev": {
@ -6979,7 +7053,7 @@
}
},
"chownr": {
"version": "1.1.1",
"version": "1.1.4",
"bundled": true,
"optional": true
},
@ -7004,7 +7078,7 @@
"optional": true
},
"debug": {
"version": "4.1.1",
"version": "3.2.6",
"bundled": true,
"optional": true,
"requires": {
@ -7027,11 +7101,11 @@
"optional": true
},
"fs-minipass": {
"version": "1.2.5",
"version": "1.2.7",
"bundled": true,
"optional": true,
"requires": {
"minipass": "^2.2.1"
"minipass": "^2.6.0"
}
},
"fs.realpath": {
@ -7055,7 +7129,7 @@
}
},
"glob": {
"version": "7.1.3",
"version": "7.1.6",
"bundled": true,
"optional": true,
"requires": {
@ -7081,7 +7155,7 @@
}
},
"ignore-walk": {
"version": "3.0.1",
"version": "3.0.3",
"bundled": true,
"optional": true,
"requires": {
@ -7098,7 +7172,7 @@
}
},
"inherits": {
"version": "2.0.3",
"version": "2.0.4",
"bundled": true,
"optional": true
},
@ -7129,12 +7203,12 @@
}
},
"minimist": {
"version": "0.0.8",
"version": "1.2.5",
"bundled": true,
"optional": true
},
"minipass": {
"version": "2.3.5",
"version": "2.9.0",
"bundled": true,
"optional": true,
"requires": {
@ -7143,38 +7217,38 @@
}
},
"minizlib": {
"version": "1.2.1",
"version": "1.3.3",
"bundled": true,
"optional": true,
"requires": {
"minipass": "^2.2.1"
"minipass": "^2.9.0"
}
},
"mkdirp": {
"version": "0.5.1",
"version": "0.5.3",
"bundled": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
"minimist": "^1.2.5"
}
},
"ms": {
"version": "2.1.1",
"version": "2.1.2",
"bundled": true,
"optional": true
},
"needle": {
"version": "2.3.0",
"version": "2.3.3",
"bundled": true,
"optional": true,
"requires": {
"debug": "^4.1.0",
"debug": "^3.2.6",
"iconv-lite": "^0.4.4",
"sax": "^1.2.4"
}
},
"node-pre-gyp": {
"version": "0.12.0",
"version": "0.14.0",
"bundled": true,
"optional": true,
"requires": {
@ -7187,11 +7261,11 @@
"rc": "^1.2.7",
"rimraf": "^2.6.1",
"semver": "^5.3.0",
"tar": "^4"
"tar": "^4.4.2"
}
},
"nopt": {
"version": "4.0.1",
"version": "4.0.3",
"bundled": true,
"optional": true,
"requires": {
@ -7200,17 +7274,26 @@
}
},
"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,
"optional": true
},
"npm-packlist": {
"version": "1.4.1",
"version": "1.4.8",
"bundled": true,
"optional": true,
"requires": {
"ignore-walk": "^3.0.1",
"npm-bundled": "^1.0.1"
"npm-bundled": "^1.0.1",
"npm-normalize-package-bin": "^1.0.1"
}
},
"npmlog": {
@ -7267,7 +7350,7 @@
"optional": true
},
"process-nextick-args": {
"version": "2.0.0",
"version": "2.0.1",
"bundled": true,
"optional": true
},
@ -7280,17 +7363,10 @@
"ini": "~1.3.0",
"minimist": "^1.2.0",
"strip-json-comments": "~2.0.1"
},
"dependencies": {
"minimist": {
"version": "1.2.0",
"bundled": true,
"optional": true
}
}
},
"readable-stream": {
"version": "2.3.6",
"version": "2.3.7",
"bundled": true,
"optional": true,
"requires": {
@ -7304,7 +7380,7 @@
}
},
"rimraf": {
"version": "2.6.3",
"version": "2.7.1",
"bundled": true,
"optional": true,
"requires": {
@ -7327,7 +7403,7 @@
"optional": true
},
"semver": {
"version": "5.7.0",
"version": "5.7.1",
"bundled": true,
"optional": true
},
@ -7373,17 +7449,17 @@
"optional": true
},
"tar": {
"version": "4.4.8",
"version": "4.4.13",
"bundled": true,
"optional": true,
"requires": {
"chownr": "^1.1.1",
"fs-minipass": "^1.2.5",
"minipass": "^2.3.4",
"minizlib": "^1.1.1",
"minipass": "^2.8.6",
"minizlib": "^1.2.1",
"mkdirp": "^0.5.0",
"safe-buffer": "^5.1.2",
"yallist": "^3.0.2"
"yallist": "^3.0.3"
}
},
"util-deprecate": {
@ -7405,7 +7481,7 @@
"optional": true
},
"yallist": {
"version": "3.0.3",
"version": "3.1.1",
"bundled": true,
"optional": true
}
@ -8426,12 +8502,6 @@
"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
"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": {
"version": "1.2.13",
"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": {
"version": "1.2.0",
"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": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",

3
02/package.json
Unescape View File

@ -5,7 +5,8 @@
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.2.0"
"react-scripts": "3.2.0",
"styled-components": "5.1.0"
},
"scripts": {
"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 "./App.css";
import Person from "./Person/Person";
import classes from "./App.module.css";
/*// ## Functional code generated by creat-react-app ##
function App() {
@ -70,6 +70,7 @@ const App = props => {
// }*/
// ## OOP code ##
class App extends React.Component {
// The state should be IMMUTABLE, do not directly change it
// If you need to change it, use the setState() method.
@ -77,13 +78,13 @@ class App extends React.Component {
character: [
{ id: 1, name: "char1", ilvl: "100" },
{ id: 2, name: "char2", ilvl: "110" },
{ id: 3, name: "char3", ilvl: "120" }
{ id: 3, name: "char3", ilvl: "120" },
],
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 characters = this.state.character.slice(); //<- this works, too, but use spread [...] instead
@ -94,7 +95,7 @@ class App extends React.Component {
nameChangedHandler = (event, id) => {
// find the index during input event
const charIndex = this.state.character.findIndex(c => {
const charIndex = this.state.character.findIndex((c) => {
return c.id === id;
});
@ -103,6 +104,8 @@ class App extends React.Component {
// get the input event to change name
char.name = event.target.value;
// char.name = event.input.value;
// make a copy of the whole characters array prepare the changes there
const characters = [...this.state.character];
@ -120,18 +123,8 @@ class App extends React.Component {
};
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 btnClass = " ";
if (this.state.showOrHide) {
persons = (
@ -143,44 +136,42 @@ class App extends React.Component {
name={char.name}
ilvl={char.ilvl}
key={char.id}
changed={event => this.nameChangedHandler(event, char.id)}
changed={(event) => this.nameChangedHandler(event, char.id)}
/>
);
})}
</div>
);
style.backgroundColor = "red";
btnClass = classes.Red;
}
let classes = [];
let assignedClasses = [];
if (this.state.character.length <= 2) {
classes.push('red');
assignedClasses.push(classes.red);
}
if (this.state.character.length <= 1) {
classes.push('bold');
assignedClasses.push(classes.bold);
}
return (
<div className="App">
<div className={classes.App}>
<h1>Hi, I'm a React App, I'm cute.</h1>
<p>Created using OOP code</p>
<p className={classes.join(' ')}>Created using OOP code</p>
<p style={{color: 'blue'}}>And this is a little test in styling</p>
<p className={assignedClasses.join(" ")}>Created using OOP code</p>
<p style={{ color: "blue" }}>And this is a little test in styling</p>
<button
style={style} // <- putting in the CSS directives set above
className={btnClass}
onClick={() => console.log('"CLICK"')}
>
Click Me
</button>
<button style={style} onClick={this.showOrHide}>
<button className={btnClass} onClick={this.showOrHide}>
{this.state.showOrHide ? "HIDE IT" : "SHOW IT"}
</button>
{persons}
</div>
);
}
}ø
}
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 './Person.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;
}
`;
import classes from "./Person.module.css";
const person = props => {
return (
// <div className="Person">
<StyledDiv>
<div className={classes.Person}>
<p>
I'm {props.name} and my ilvl is {props.ilvl} and ready to raid!
</p>
@ -27,8 +11,7 @@ const person = props => {
<input type="text" onChange={props.changed} defaultValue={props.name} />
<button onClick={props.click}>delete</button>
{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