adding exercies for steps 2-1 and 2-2
This commit is contained in:
Родитель
9ad6f34705
Коммит
baf9dfd5ca
|
@ -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;
|
||||
}
|
Загрузка…
Ссылка в новой задаче