up to step 4
This commit is contained in:
Micah Godbolt
Родитель
4f7b9e4747
Коммит
2ced997529
|
|
@ -1027,6 +1027,17 @@
|
|||
"babel-preset-jest": "^23.2.0"
|
||||
}
|
||||
},
|
||||
"babel-loader": {
|
||||
"version": "8.0.5",
|
||||
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.5.tgz",
|
||||
"integrity": "sha512-NTnHnVRd2JnRqPC0vW+iOQWU5pchDbYXsG2E6DMXEpMfUcQKclF9gmf3G3ZMhzG7IG9ji4coL0cm+FxeWxDpnw==",
|
||||
"requires": {
|
||||
"find-cache-dir": "^2.0.0",
|
||||
"loader-utils": "^1.0.2",
|
||||
"mkdirp": "^0.5.1",
|
||||
"util.promisify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"babel-messages": {
|
||||
"version": "6.23.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz",
|
||||
|
|
@ -1292,8 +1303,7 @@
|
|||
"big.js": {
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
|
||||
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
|
||||
},
|
||||
"binary-extensions": {
|
||||
"version": "1.12.0",
|
||||
|
|
@ -1842,8 +1852,7 @@
|
|||
"commondir": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
|
||||
"integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
|
||||
"dev": true
|
||||
"integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
|
||||
},
|
||||
"component-emitter": {
|
||||
"version": "1.2.1",
|
||||
|
|
@ -2538,7 +2547,6 @@
|
|||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
|
||||
"integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"object-keys": "^1.0.12"
|
||||
}
|
||||
|
|
@ -2832,8 +2840,7 @@
|
|||
"emojis-list": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
|
||||
"integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
|
||||
"dev": true
|
||||
"integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
|
||||
},
|
||||
"encodeurl": {
|
||||
"version": "1.0.2",
|
||||
|
|
@ -2888,7 +2895,6 @@
|
|||
"version": "1.13.0",
|
||||
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.13.0.tgz",
|
||||
"integrity": "sha512-vDZfg/ykNxQVwup/8E1BZhVzFfBxs9NqMzGcvIJrqg5k2/5Za2bWo40dK2J1pgLngZ7c+Shh8lwYtLGyrwPutg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"es-to-primitive": "^1.2.0",
|
||||
"function-bind": "^1.1.1",
|
||||
|
|
@ -2902,7 +2908,6 @@
|
|||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.0.tgz",
|
||||
"integrity": "sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-callable": "^1.1.4",
|
||||
"is-date-object": "^1.0.1",
|
||||
|
|
@ -3412,7 +3417,6 @@
|
|||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.0.0.tgz",
|
||||
"integrity": "sha512-LDUY6V1Xs5eFskUVYtIwatojt6+9xC9Chnlk/jYOOvn3FAFfSaWddxahDGyNHh0b2dMXa6YW2m0tk8TdVaXHlA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"commondir": "^1.0.1",
|
||||
"make-dir": "^1.0.0",
|
||||
|
|
@ -3423,7 +3427,6 @@
|
|||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
|
||||
"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"locate-path": "^3.0.0"
|
||||
}
|
||||
|
|
@ -4131,8 +4134,7 @@
|
|||
"function-bind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
|
||||
"dev": true
|
||||
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
|
||||
},
|
||||
"get-caller-file": {
|
||||
"version": "1.0.3",
|
||||
|
|
@ -4384,7 +4386,6 @@
|
|||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"function-bind": "^1.1.1"
|
||||
}
|
||||
|
|
@ -4407,8 +4408,7 @@
|
|||
"has-symbols": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.0.tgz",
|
||||
"integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=",
|
||||
"dev": true
|
||||
"integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q="
|
||||
},
|
||||
"has-value": {
|
||||
"version": "1.0.0",
|
||||
|
|
@ -4887,8 +4887,7 @@
|
|||
"is-callable": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz",
|
||||
"integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA=="
|
||||
},
|
||||
"is-ci": {
|
||||
"version": "1.2.1",
|
||||
|
|
@ -4922,8 +4921,7 @@
|
|||
"is-date-object": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
|
||||
"integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
|
||||
"dev": true
|
||||
"integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY="
|
||||
},
|
||||
"is-descriptor": {
|
||||
"version": "0.1.6",
|
||||
|
|
@ -5097,7 +5095,6 @@
|
|||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
|
||||
"integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has": "^1.0.1"
|
||||
}
|
||||
|
|
@ -5118,7 +5115,6 @@
|
|||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.2.tgz",
|
||||
"integrity": "sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-symbols": "^1.0.0"
|
||||
}
|
||||
|
|
@ -6585,7 +6581,6 @@
|
|||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
|
||||
"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"minimist": "^1.2.0"
|
||||
}
|
||||
|
|
@ -6703,7 +6698,6 @@
|
|||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
|
||||
"integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^2.0.0",
|
||||
|
|
@ -6714,7 +6708,6 @@
|
|||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
|
||||
"integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"p-locate": "^3.0.0",
|
||||
"path-exists": "^3.0.0"
|
||||
|
|
@ -6777,7 +6770,6 @@
|
|||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
|
||||
"integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"pify": "^3.0.0"
|
||||
}
|
||||
|
|
@ -6974,8 +6966,7 @@
|
|||
"minimist": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
|
||||
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
|
||||
"dev": true
|
||||
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
|
||||
},
|
||||
"mississippi": {
|
||||
"version": "3.0.0",
|
||||
|
|
@ -7020,7 +7011,6 @@
|
|||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
|
||||
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
},
|
||||
|
|
@ -7028,8 +7018,7 @@
|
|||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
|
||||
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
|
||||
"dev": true
|
||||
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -7396,8 +7385,7 @@
|
|||
"object-keys": {
|
||||
"version": "1.0.12",
|
||||
"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.12.tgz",
|
||||
"integrity": "sha512-FTMyFUm2wBcGHnH2eXmz7tC6IwlqQZ6mVZ+6dm6vZ4IQIHjs6FdNsQBuKGPuUUUY6NfJw2PshC08Tn6LzLDOag==",
|
||||
"dev": true
|
||||
"integrity": "sha512-FTMyFUm2wBcGHnH2eXmz7tC6IwlqQZ6mVZ+6dm6vZ4IQIHjs6FdNsQBuKGPuUUUY6NfJw2PshC08Tn6LzLDOag=="
|
||||
},
|
||||
"object-visit": {
|
||||
"version": "1.0.1",
|
||||
|
|
@ -7412,7 +7400,6 @@
|
|||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz",
|
||||
"integrity": "sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"define-properties": "^1.1.2",
|
||||
"es-abstract": "^1.5.1"
|
||||
|
|
@ -7617,7 +7604,6 @@
|
|||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.1.0.tgz",
|
||||
"integrity": "sha512-NhURkNcrVB+8hNfLuysU8enY5xn2KXphsHBaC2YmRNTZRc7RWusw6apSpdEj3jo4CMb6W9nrF6tTnsJsJeyu6g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"p-try": "^2.0.0"
|
||||
}
|
||||
|
|
@ -7626,7 +7612,6 @@
|
|||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
|
||||
"integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"p-limit": "^2.0.0"
|
||||
}
|
||||
|
|
@ -7640,8 +7625,7 @@
|
|||
"p-try": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.0.0.tgz",
|
||||
"integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ=="
|
||||
},
|
||||
"package-json": {
|
||||
"version": "4.0.1",
|
||||
|
|
@ -7771,8 +7755,7 @@
|
|||
"path-exists": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
|
||||
"integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
|
||||
"dev": true
|
||||
"integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
|
||||
},
|
||||
"path-is-absolute": {
|
||||
"version": "1.0.1",
|
||||
|
|
@ -7855,8 +7838,7 @@
|
|||
"pify": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
|
||||
"integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
|
||||
"dev": true
|
||||
"integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
|
||||
},
|
||||
"pinkie": {
|
||||
"version": "2.0.4",
|
||||
|
|
@ -7877,7 +7859,6 @@
|
|||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
|
||||
"integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"find-up": "^3.0.0"
|
||||
}
|
||||
|
|
@ -10230,7 +10211,6 @@
|
|||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
|
||||
"integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"define-properties": "^1.1.2",
|
||||
"object.getownpropertydescriptors": "^2.0.3"
|
||||
|
|
|
|||
|
|
@ -53,8 +53,8 @@
|
|||
"react": "^16.7.0",
|
||||
"react-dom": "^16.7.0",
|
||||
"react-redux": "^6.0.0",
|
||||
"redux-thunk": "^2.3.0",
|
||||
"redux": "^4.0.1",
|
||||
"redux-starter-kit": "^0.4.3",
|
||||
"redux": "^4.0.1"
|
||||
"redux-thunk": "^2.3.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
## Javascript Demo
|
||||
# Javascript Demo
|
||||
|
||||
Now that we a UI that looks like a todo app, we need to add functionality to make it **function** like a todo app. In this example we are going to use raw Javascript explicitly modify our application as we interact with it. This will be in stark contrast to the implicit approach we will take when we do this with React in the next exercise.
|
||||
|
||||
> Keep an eye on how often user actions directly modify the HTML on the page. You'll see this number drop to zero when we start using React.
|
||||
|
||||
### Demo
|
||||
## Demo
|
||||
|
||||
This demo starts off with a few elements already in place. Let's walk through what's already here.
|
||||
|
||||
- **getTodoText()** - This is a quick helper function that returns the value inside of our textfield. Notice how some functions return values and how you can set that return to a variable. Other functions return nothing, but rather have side effects.
|
||||
- **clearInput()** - This is a generic, reusable function that takes in a `selector` paramater, finds the first matching element, and sets the element's value to an empty string. This direct modification is called a side effect.
|
||||
- **getTodoText()** - This is a quick helper function that returns the value inside of our textfield. Notice how some functions return values and how you can set that return to a variable.
|
||||
- **addTodo()** - This is the primary logic of our todo app. Here's how the lines break down.
|
||||
1. `todo` is set to equal the first todo item
|
||||
2. `newTodo` is a clone of todo. Passing true means it is a deep clone, so we get the todo's children as well. Cloning does not duplicate the DOM node. We'll need to insert it in step 4
|
||||
|
|
@ -21,13 +22,40 @@ This demo starts off with a few elements already in place. Let's walk through wh
|
|||
3. Get all of the todos with [querySelectAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll), and then loop through them.
|
||||
4. Set the `hidden` property of each todo based on the filter/state combination
|
||||
|
||||
Walk through 'addTodo'
|
||||
attach addTodo to button
|
||||
write clearInput
|
||||
write updateRemaining
|
||||
### Triggering functions from click events
|
||||
|
||||
Now that we have a working `addTodo` function, we need a way to trigger it when the user is ready. This can be done in two ways.
|
||||
|
||||
1. We can find the element with querySelector, then set its `onclick` to our function
|
||||
|
||||
```js
|
||||
document.querySelector('.addTodo .submit').onclick = addTodo;
|
||||
```
|
||||
|
||||
2. We can add the function directly to our button in our HTML
|
||||
|
||||
```html
|
||||
<button onclick="addTodo()" class="submit">Add</button>
|
||||
```
|
||||
|
||||
Today we'll use #2, as this is the way it will work in React as well.
|
||||
|
||||
## Exercise
|
||||
|
||||
add filter to filter buttons
|
||||
write clearCompleted
|
||||
add to footer button
|
||||
### Write updateRemaining function
|
||||
|
||||
1. Get a reference to the span with the `remaining` class, and store it in a variable
|
||||
2. Use [querySelectAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to get all of the todos.
|
||||
3. Set the `innerText` of the remaining span to the length of those todos.
|
||||
4. Add updateRemaining() to addTodo
|
||||
|
||||
### Write a clearCompleted function
|
||||
|
||||
1. Get a reference to all of the todos with [querySelectAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
|
||||
2. Use a `for (let todo of todos)` loop to iterate over each todo
|
||||
3. Inside the for loop write an `if` statement to test if the `input` inside of the todo has a checked value of true
|
||||
> Hint: you can use querySelector on any HTML node to find child elements within
|
||||
4. Call `todo.remove()` for any todo whos input check is true
|
||||
5. After the loop is done, run `updateRemaining()`
|
||||
6. Attach this function to the footer button
|
||||
7. Test it out!
|
||||
|
|
|
|||
|
|
@ -38,6 +38,10 @@
|
|||
</body>
|
||||
|
||||
<script type="text/javascript">
|
||||
function clearInput(selector) {
|
||||
document.querySelector(selector).value = '';
|
||||
}
|
||||
|
||||
function getTodoText() {
|
||||
return document.querySelector('.textfield').value;
|
||||
}
|
||||
|
|
@ -48,7 +52,7 @@
|
|||
newTodo.querySelector('.title').innerText = getTodoText();
|
||||
todo.parentElement.insertBefore(newTodo, todo);
|
||||
|
||||
// clearInput();
|
||||
clearInput('.textfield');
|
||||
// updateRemaining();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -38,12 +38,12 @@
|
|||
</body>
|
||||
|
||||
<script type="text/javascript">
|
||||
function getTodoText() {
|
||||
return document.querySelector('.textfield').value;
|
||||
function clearInput(selector) {
|
||||
document.querySelector(selector).value = '';
|
||||
}
|
||||
|
||||
function clearInput() {
|
||||
document.querySelector('.textfield').value = '';
|
||||
function getTodoText() {
|
||||
return document.querySelector('.textfield').value;
|
||||
}
|
||||
|
||||
function updateRemaining() {
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
newTodo.querySelector('.title').innerText = getTodoText();
|
||||
todo.parentElement.insertBefore(newTodo, todo);
|
||||
|
||||
clearInput();
|
||||
clearInput('.textfield');
|
||||
updateRemaining();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -38,17 +38,17 @@
|
|||
</body>
|
||||
|
||||
<script type="text/javascript">
|
||||
function clearInput(selector) {
|
||||
document.querySelector(selector).value = '';
|
||||
}
|
||||
|
||||
function getTodoText() {
|
||||
return document.querySelector('.textfield').value;
|
||||
}
|
||||
|
||||
function clearInput() {
|
||||
document.querySelector('.textfield').value = '';
|
||||
}
|
||||
|
||||
function updateRemaining() {
|
||||
const remaining = document.querySelector('.remaining');
|
||||
const todos = document.querySelectorAll('.todo').length;
|
||||
const todos = document.querySelectorAll('.todo');
|
||||
remaining.innerText = todos;
|
||||
}
|
||||
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
newTodo.querySelector('.title').innerText = getTodoText();
|
||||
todo.parentElement.insertBefore(newTodo, todo);
|
||||
|
||||
clearInput();
|
||||
clearInput('.textfield');
|
||||
updateRemaining();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,125 @@
|
|||
## React quick demo
|
||||
# Introduction To React
|
||||
|
||||
already done:
|
||||
Button.css
|
||||
In our last example we saw how we could take a static HTML page and turn it into an interactive page with some buttons and their `onclick` handlers.
|
||||
|
||||
scaffold app.tsx (my app)
|
||||
write index.tsx
|
||||
write index.html
|
||||
demo 'hello world'
|
||||
In this example we'll see how React turns that paradigm completely around. With React, the entire DOM is generated and maintained by JavaScript, directly inside the browser. This makes it easier to assemble your application out of reusable pieces, maintain state within a component, and pass data between them.
|
||||
|
||||
## Demo
|
||||
|
||||
In this demo we'll be creating a simple counter that will display a count and increment on click.
|
||||
|
||||
### The App
|
||||
|
||||
This is the starting point of our React application. It is a component just like the other ones we will be building, but this component will only ever be used once, to render the application. Here's how our app starts out. Let's walk through each line:
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
|
||||
export class App extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h2>My App</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- **import React from 'react';** - This is how we [import modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) in Javascript. This line creates a variable in this file called `React` that is equal to the default `export` of the `react` npm module.
|
||||
- **export class App** - Just like react exports code, our App component is nothing more than an exported "App" class. This allows us to import the class into other files
|
||||
- **extends React.Component** - A JavaScript class is similar to other programming languages (it's a collection of methods and properties). Classes can also be extended, so when we create a React component class, we always extend the base React.Component class. Note that this `Component` class is coming from the `React` variable imported up top.
|
||||
- **render()** - One of the methods defined by React.Component is the `render()` method. This is a function that defines the HTML the component is going to render.
|
||||
- **return** - Remember that functions can return values in addition to side effects, and this component is no different.
|
||||
- **Inside of the return?** It's HTML! Actually, it's JSX, but with very few exceptions you can treat it like HTML. A few key differences:
|
||||
1. Since 'class' is a reserved word in JavaScript, you will need to use className on your HTML tags `<div className="foo">`
|
||||
2. We can use custom HTML tags created by these render functions `<div><MyControl>hi</MyControl></div>`
|
||||
3. Controls can be self closing `<div><MyControl text='hi' /></div>`
|
||||
4. You can use JavaScript inside of JSX! If you declare `const name = 'Micah';` inside the render function, you can use that variable inside of your JSX `<div>{name}</div>` or `<div><MyControl text={name} /></div>`. Works with functions, loops, conditionals as well.
|
||||
|
||||
### index.jsx
|
||||
|
||||
This is the file that places your App onto the page.
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { App } from './App';
|
||||
ReactDOM.render(<App />, document.getElementById('app'));
|
||||
```
|
||||
|
||||
- **import ReactDOM from "react-dom";** - We've seen React imported before, but now we're also grabbing ReactDom from a package called "react-dom".
|
||||
> Note that this casing is intentional. NPM packages are kabab-case, exported items are usually camelCase or PascalCase. PascalCase is usually used for 'proper noun' exports. ProjectName, ComponentName etc.
|
||||
- **import { App } from "./App";** - If we had exported our app like this: `export default class extends React.Component`, this line would look like the lines above - `import App from "./App";`. But React convention is to use named exports, which can easily be extracted like this `{ App }`.
|
||||
> This notation is called [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring), and it's awesome!
|
||||
- **ReactDOM.render...** This line calls the render function inside of ReactDOM and attaches our `<App />` component to the element with `id=app`. Take a peak in the index.html file. Shouldn't be too hard to find it.
|
||||
|
||||
### Counter Component
|
||||
|
||||
In this example we'll start with an already scaffolded out control. The goal of our counter is to keep track of how many times the counter button is clicked. In the past JavaScript demo we might grab a reference to `document.querySelector('.counter')` and then manually increment the number we find there. While using the DOM as you data store works, it's REALLY hard to scale past the most basic demo.
|
||||
|
||||
React solves this by allowing each control to specify its own data store, called 'state'. We can reference values in state when we render our UI, and we can also update state over the lifetime of our application.
|
||||
|
||||
#### Adding State
|
||||
|
||||
JavaScipt uses a `constructor` method to instantiate each copy of a class. So for class based controls, this is where we specify state.
|
||||
|
||||
```js
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
counter: 0
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
- The constructor takes in the component props (values passed into the control).
|
||||
- the [super()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super) function is called to gain access to some functionality in React.Component
|
||||
- Now we can define any state variables we want to use in the control, and give them a default value. This counter value can now be accessed via `this.state.counter`. We can also update state by calling `this.setState({counter: 1})`
|
||||
|
||||
#### Using [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring) for props and state
|
||||
|
||||
Both props are state are JavaScript objects. They have a bunch of key value pairs in them which you can access via `this.props.foo` or `this.state.bar`. Sometimes they have **MANY** values inside of them which you need access to. You could do this:
|
||||
|
||||
```js
|
||||
let cat = this.props.cat;
|
||||
let dog = this.props.dog;
|
||||
let bird = this.props.bird;
|
||||
let pig = this.props.pig;
|
||||
let cow = this.props.cow;
|
||||
```
|
||||
|
||||
> Note that we access props and state on `this`, which is how you reference all of the class properties and methods
|
||||
|
||||
But this is verbose and repetative. Instead you can use destructuring to turn this into a one liner.
|
||||
|
||||
```js
|
||||
let { cat, dog, bird, pig, cow } = this.props;
|
||||
```
|
||||
|
||||
So even though this isn't 100% necessary today, it does future proof our code if we add more props or state later. So let's add this inside of the render method, but above the return:
|
||||
|
||||
```js
|
||||
const { counter } = this.state;
|
||||
const { text } = this.props;
|
||||
```
|
||||
|
||||
#### Adding JSX
|
||||
|
||||
```jsx
|
||||
return (
|
||||
<div>
|
||||
{text}: {counter}
|
||||
<Button
|
||||
onClick={() => {
|
||||
this.setState({ counter: counter + 1 });
|
||||
}}
|
||||
>
|
||||
Click
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
Write Counter Component with button
|
||||
Demo Button, import into Counter
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,11 +1,9 @@
|
|||
import React from 'react';
|
||||
|
||||
export class Counter extends React.Component<any, any> {
|
||||
|
||||
export class Counter extends React.Component {
|
||||
render() {
|
||||
|
||||
return (
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { App } from './App';
|
||||
ReactDOM.render(<App />, document.getElementById('app'));
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import { Button } from './Button';
|
||||
|
||||
export class Counter extends React.Component<{ text: string }, { counter: number }> {
|
||||
export class Counter extends React.Component<any, any> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { App } from "./App";
|
||||
ReactDOM.render(<App />, document.getElementById("app"));
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { App } from './App';
|
||||
ReactDOM.render(<App />, document.getElementById('app'));
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче