adding exercies for steps 2-1 and 2-2

This commit is contained in:
Ken 2019-02-18 17:09:38 -08:00
Родитель 9ad6f34705
Коммит baf9dfd5ca
28 изменённых файлов: 133 добавлений и 7 удалений

Просмотреть файл

@ -69,13 +69,13 @@
Setup, HTML, CSS, Javascript and Intro to React
</li>
<li class="Tile">
<a target="_blank" href="/step2-01/" class="Tile-link">
<a target="_blank" href="/step2-01/demo/" class="Tile-link">
Step 1<br />
Typescript Basics
</a>
</li>
<li class="Tile">
<a target="_blank" href="/step2-02/" class="Tile-link">
<a target="_blank" href="/step2-02/demo/" class="Tile-link">
Step 2<br />
UI Fabric
</a>
@ -89,7 +89,7 @@
<li class="Tile">
<a target="_blank" href="/step2-04/" class="Tile-link">
Step 4<br />
UI Fabric: Theming and Styling
Testing with jest
</a>
</li>
<li class="Tile">

Просмотреть файл

Просмотреть файл

Просмотреть файл

Просмотреть файл

Просмотреть файл

Просмотреть файл

Просмотреть файл

Просмотреть файл

Просмотреть файл

Просмотреть файл

Просмотреть файл

@ -1,9 +1,24 @@
# Step 2.2
Integrates Fabric
UI Fabric is a Component Library that is developed to reflect the latest Microsoft design language. It is used in many Microsoft web applications and is developed in the open:
Learn about Basic Components
https://github.com/officedev/office-ui-fabric-react
Documentation can be found here:
https://developer.microsoft.com/en-us/fabric/#/components
## Learn about Components and How to Look up Documentation
- Stack
- Text
- Show case some components
- Default Button / Primary Button
# Exercise
- Open up the TSX files inside `components/`
- Replace the DOM tags with Fabric components in those TSX files with these components:
- Stack
- DefaultButton
- Checkbox
- TextField
- Pivot (for the filter)

Просмотреть файл

Просмотреть файл

Просмотреть файл

Просмотреть файл

@ -0,0 +1,6 @@
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
</body>
</html>

Просмотреть файл

@ -0,0 +1,20 @@
import React from 'react';
import { Stack } from 'office-ui-fabric-react';
import { TodoFooter } from './TodoFooter';
import { TodoHeader } from './TodoHeader';
import { TodoList } from './TodoList';
import { Store } from '../store';
export class TodoApp extends React.Component<any, Store> {
render() {
return (
<Stack horizontalAlign="center">
<Stack style={{ width: 400 }} gap={25}>
<TodoHeader />
<TodoList />
<TodoFooter />
</Stack>
</Stack>
);
}
}

Просмотреть файл

@ -0,0 +1,16 @@
import React from 'react';
export const TodoFooter = (props: any) => {
const itemCount = 3;
return (
<footer>
<span>
{itemCount} item{itemCount > 1 ? 's' : ''} left
</span>
<button onClick={() => props.clear()} className="button">
Clear Completed
</button>
</footer>
);
};

Просмотреть файл

@ -0,0 +1,19 @@
import React from 'react';
import { FilterTypes } from '../store';
export class TodoHeader extends React.Component<{}, {}> {
render() {
return (
<div>
<h1>todos</h1>
<input className="textfield" placeholder="add todo" />
<button className="button add">Add</button>
<div className="filter">
<button>all</button>
<button>active</button>
<button>completed</button>
</div>
</div>
);
}
}

Просмотреть файл

@ -0,0 +1,13 @@
import React from 'react';
import { Stack } from 'office-ui-fabric-react';
import { TodoListItem } from './TodoListItem';
export const TodoList = (props: any) => {
return (
<ul className="todos">
<TodoListItem />
<TodoListItem />
<TodoListItem />
</ul>
);
};

Просмотреть файл

@ -0,0 +1,13 @@
import React from 'react';
export class TodoListItem extends React.Component<any, any> {
render() {
return (
<li className="todo">
<label>
<input type="checkbox" defaultChecked={false} /> test item
</label>
</li>
);
}
}

Просмотреть файл

@ -0,0 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { TodoApp } from './components/TodoApp';
import { initializeIcons } from '@uifabric/icons';
// Initializes the UI Fabric icons that we can use
// Choose one from this list: https://developer.microsoft.com/en-us/fabric#/styles/icons
initializeIcons();
ReactDOM.render(<TodoApp />, document.getElementById('app'));

Просмотреть файл

@ -0,0 +1,14 @@
export type FilterTypes = 'all' | 'active' | 'completed';
export interface TodoItem {
label: string;
completed: boolean;
}
export interface Store {
todos: {
[id: string]: TodoItem;
};
filter: FilterTypes;
}