microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-07-13 15:28:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

readme cleanup

Browse Source
This commit is contained in:
Micah Godbolt
2019-03-03 21:35:32 -08:00
parent a8f5965756
commit 6b69b0164c
33 changed files with 80 additions and 426 deletions
Download Patch File Download Diff File Expand all files Collapse all files
step1-07/exercise/README.md
+9 -11
View File
@@ -1,29 +1,27 @@
## Exercise
#Step 1-07: Exercise
If you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 1 step 7 to see results.
## TodoFooter
### TodoFooter
1. Open TodoFooter and write a TodoFooterProps interface. It should include two values, a function and an object. Use this interface in the function props like this: `(props: TodoFooterProps)`
1. Open TodoFooter and write a TodoFooterProps interface. It should include two values, a `clear` and `todos`. Use this interface in the function props like this: `(props: TodoFooterProps)`
2. Write an `_onClick` function that calls `props.clear`.
> Since TodoFooter is not a class, the `_onClick` function needs to be stored in a const placed before the `return`.
3. Assign `_onClick` to the button's `onClick` prop. You won't need to use `this` since the component isn't a class.
4. Test out this functionality. Check a few todos complete and click the `Clear Completed` button.
### TodoHeader
## TodoHeader
1. Open TodoHeader and write TodoHeaderProps which will include three values. Replace the first `any` in the class declaration with this interface.
1. Open TodoHeader and write TodoHeaderProps which will include `addTodo`, `setFilter` and `filter`. Replace the first `any` in the class declaration with this interface.
2. This component also has state. Write TodoHeaderState (there's just one value), and add this where the second `any` was.
3. Add `_onFilter` to each of the filter buttons
> Note that we can't add new parameters to onClick, but we can pull information from the event target!
4. Write an `_onAdd` method that calls `addTodo` on the current `labelInput`, then sets the `labelInput` in state to an empty string
4. Call `_onAdd` from the submit button
5. Call `_onAdd` from the submit button
6. Check out this new functionality! We can now add and filter todos!
5. Check out this new functionality! We can now add and filter todos!