microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

moved 2.7-2.9

Browse Source
This commit is contained in:
Ken
2019-02-28 22:18:33 -08:00
parent a00a1b237a
commit 35be13a0b6
13 changed files with 120 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
step2-07/README.md → step2-07/demo/README.md
View File

@@ -1,4 +1,4 @@
# Step 2.7
# Step 2.7: Connect Redux Store to View (Demo)
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
@@ -72,23 +72,3 @@ function mapDispatchToProps(dispatch) {
}
}
```
# 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 2 step 7 to see results.
1. open up `exercise/src/index.tsx` and wrap `<TodoApp>` with `<Provider>` as instructed in the comment
2. open up `exercise/src/components/TodoFooter.tsx` and erase the "nullable" type modifier (i.e. the ?) in the interface definition of `TodoFooterProps`
3. Remove the `export` from `export const TodoFooter = (props: TodoFooterProps) => {`
4. uncomment the bottom bits of code and fill in the implementation for `mapStateToProps()` and `mapDispatchToProps()` - feel free to use `TodoListItem.tsx` as a guide
5. do steps 2, 3, and 4 for the `TodoHeader.tsx` file
# Bonus Exercise
For further reading, go here to look up more information about the `mergeProps` and `options` parameters to `connect()`:
https://react-redux.js.org/api/connect

2
step2-07/demo/index.html
View File

@@ -4,7 +4,7 @@
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="markdownReadme" data-src="./README.md"></div>
<div id="app"></div>
<script src="../../assets/scripts.js"></script>
</body>

23
step2-07/exercise/README.md Normal file
View File

@@ -0,0 +1,23 @@
# Step 2.7: Connect Redux Store to View (Exercise)
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
# 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 2 step 7 to see results.
1. open up `exercise/src/index.tsx` and wrap `<TodoApp>` with `<Provider>` as instructed in the comment
2. open up `exercise/src/components/TodoFooter.tsx` and erase the "nullable" type modifier (i.e. the ?) in the interface definition of `TodoFooterProps`
3. Remove the `export` from `export const TodoFooter = (props: TodoFooterProps) => {`
4. uncomment the bottom bits of code and fill in the implementation for `mapStateToProps()` and `mapDispatchToProps()` - feel free to use `TodoListItem.tsx` as a guide
5. do steps 2, 3, and 4 for the `TodoHeader.tsx` file
# Bonus Exercise
For further reading, go here to look up more information about the `mergeProps` and `options` parameters to `connect()`:
https://react-redux.js.org/api/connect

2
step2-07/exercise/index.html
View File

@@ -4,7 +4,7 @@
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="markdownReadme" class="exercise" data-src="./README.md"></div>
<div id="app"></div>
<script src="../../assets/scripts.js"></script>
</body>