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

misc fixes

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-26 11:21:28 -08:00
parent 60041f1ba3
commit d8702ec24e
39 changed files with 99 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
step1-06/demo/README.md
View File

@@ -71,10 +71,10 @@ I've already pulled out our props into `filter` and `todos` variables, and writt
}
```
- A JavaScript map takes in an array and transforms it into a new array
- We use the `id` from the `filterTodos` array as the [list key](https://reactjs.org/docs/lists-and-keys.html) to help React track each item as state changes.
- The key is not actually passed into the component, so we pass the key in as `id` as well. This will help us out later.
- Lastly we use the `id` to grab the todo from our `todos` object, then use the [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to pass through the todo's `label` and `completed` values.
- **map**: A JavaScript map takes in an array (filteredTodos) and transforms it into a new array (our rendered TodoListItems)
- **key**: We use the `id` from the `filterTodos` array as the [list key](https://reactjs.org/docs/lists-and-keys.html) to help React track each item as state changes.
- **id**: The key is not actually passed into the component, so we pass the key in as `id` as well. This will help us out later.
- **todos[id]**: Lastly we use the `id` to grab the todo from our `todos` object, then use the [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to pass through the todo's `label` and `completed` values.
> This spread operator is the same as saying `label={todos[id].label} completed={todos[id].completed}`. Pretty obvious why spread is so handy!
### State Driven and Stateful Header
@@ -87,9 +87,9 @@ In CSS based styling, visual states are applied by adding and removing classes.
```jsx
<nav className="filter">
<button className={filter == 'all' ? 'completed' : ''}>all</button>
<button className={filter == 'active' ? 'completed' : ''}>active</button>
<button className={filter == 'completed' ? 'completed' : ''}>completed</button>
<button className={filter == 'all' ? 'selected' : ''}>all</button>
<button className={filter == 'active' ? 'selected' : ''}>active</button>
<button className={filter == 'completed' ? 'selected' : ''}>completed</button>
</nav>
```

2
step1-06/demo/src/components/TodoFooter.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
export const TodoFooter = (props: any) => {
const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
// const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
return (
<footer>
<span>4 items left</span>

6
step1-06/demo/src/components/TodoList.tsx
View File

@@ -5,9 +5,9 @@ export class TodoList extends React.Component<any, any> {
render() {
const { filter, todos } = this.props;
const filteredTodos = Object.keys(todos).filter(id => {
return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
});
// const filteredTodos = Object.keys(todos).filter(id => {
// return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
// });
return (
<ul className="todos">
<TodoListItem />

6
step1-06/exercise/src/components/TodoHeader.tsx
View File

@@ -17,9 +17,9 @@ export class TodoHeader extends React.Component<any, any> {
<button className="submit">Add</button>
</div>
<nav className="filter">
<button className={filter == 'all' ? 'completed' : ''}>all</button>
<button className={filter == 'active' ? 'completed' : ''}>active</button>
<button className={filter == 'completed' ? 'completed' : ''}>completed</button>
<button className={filter == 'all' ? 'selected' : ''}>all</button>
<button className={filter == 'active' ? 'selected' : ''}>active</button>
<button className={filter == 'completed' ? 'selected' : ''}>completed</button>
</nav>
</header>
);

8
step1-06/final/src/components/TodoHeader.tsx
View File

@@ -5,7 +5,7 @@ export class TodoHeader extends React.Component<any, any> {
super(props);
this.state = { labelInput: '' };
}
render() {
const { filter } = this.props;
@@ -17,9 +17,9 @@ export class TodoHeader extends React.Component<any, any> {
<button className="submit">Add</button>
</div>
<nav className="filter">
<button className={filter == 'all' ? 'completed' : ''}>all</button>
<button className={filter == 'active' ? 'completed' : ''}>active</button>
<button className={filter == 'completed' ? 'completed' : ''}>completed</button>
<button className={filter == 'all' ? 'selected' : ''}>all</button>
<button className={filter == 'active' ? 'selected' : ''}>active</button>
<button className={filter == 'completed' ? 'selected' : ''}>completed</button>
</nav>
</header>
);