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

adding exercies for steps 2-1 and 2-2

Browse Source
This commit is contained in:
Ken
2019-02-18 17:09:38 -08:00
parent 9ad6f34705
commit baf9dfd5ca
28 changed files with 133 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

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

0
step2-01/index.html → step2-01/demo/index.html
View File

0
step2-01/src/async/index.ts → step2-01/demo/src/async/index.ts
View File

0
step2-01/src/generics/index.ts → step2-01/demo/src/generics/index.ts
View File

0
step2-01/src/index.tsx → step2-01/demo/src/index.tsx
View File

0
step2-01/src/interfaces/index.ts → step2-01/demo/src/interfaces/index.ts
View File

0
step2-01/src/modules/default.ts → step2-01/demo/src/modules/default.ts
View File

0
step2-01/src/modules/index.ts → step2-01/demo/src/modules/index.ts
View File

0
step2-01/src/modules/named.ts → step2-01/demo/src/modules/named.ts
View File

0
step2-01/src/spread/index.ts → step2-01/demo/src/spread/index.ts
View File

0
step2-01/src/types/index.ts → step2-01/demo/src/types/index.ts
View File

23
step2-02/README.md
View File

@@ -1,9 +1,24 @@
# Step 2.2 # 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 - Stack
- Text - Default Button / Primary Button
- Show case some components
# 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
step2-02/index.html → step2-02/demo/index.html
View File

0
step2-02/src/components/TodoApp.tsx → step2-02/demo/src/components/TodoApp.tsx
View File

0
step2-02/src/components/TodoFooter.tsx → step2-02/demo/src/components/TodoFooter.tsx
View File

0
step2-02/src/components/TodoHeader.tsx → step2-02/demo/src/components/TodoHeader.tsx
View File

0
step2-02/src/components/TodoList.tsx → step2-02/demo/src/components/TodoList.tsx
View File

0
step2-02/src/components/TodoListItem.tsx → step2-02/demo/src/components/TodoListItem.tsx
View File

0
step2-02/src/index.tsx → step2-02/demo/src/index.tsx
View File

0
step2-02/src/store/index.ts → step2-02/demo/src/store/index.ts
View File

6
step2-02/exercise/index.html Normal file
View File

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

20
step2-02/exercise/src/components/TodoApp.tsx Normal file
View File

@@ -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>
);
}
}

16
step2-02/exercise/src/components/TodoFooter.tsx Normal file
View File

@@ -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>
);
};

19
step2-02/exercise/src/components/TodoHeader.tsx Normal file
View File

@@ -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>
);
}
}

13
step2-02/exercise/src/components/TodoList.tsx Normal file
View File

@@ -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>
);
};

13
step2-02/exercise/src/components/TodoListItem.tsx Normal file
View File

@@ -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>
);
}
}

10
step2-02/exercise/src/index.tsx Normal file
View File

@@ -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'));

14
step2-02/exercise/src/store/index.ts Normal file
View File

@@ -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;
}