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

splitting 2.1 and 2.2 readme's

Browse Source
This commit is contained in:
Ken
2019-02-28 21:45:48 -08:00
parent 0a7cac4eb3
commit b19973652a
10 changed files with 120 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
step2-02/README.md → step2-02/demo/README.md
View File

@@ -1,4 +1,4 @@
# Step 2.2: UI Fabric Component Library
# Step 2.2: UI Fabric Component Library (Demo)
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
@@ -106,27 +106,3 @@ Flexbox uses CSS styles to control:
Stack abstracts these CSS styles and provides typings to make them more discoverable.
Check out a cookbook of sorts in our [documentation](https://developer.microsoft.com/en-us/fabric#/components/stack).
# Exercise 1: Getting familiar with the Fabric documentation site:
Open the [documentation for DefaultButton](https://developer.microsoft.com/en-us/fabric/#/components/button). Use the sidebar to explore other available components.
# Exercise 2: "Fabric"ize the TodoFooter.tsx
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 2 to see results.
1. Open TSX file inside `exercise/src/components/TodoFooter.tsx`
2. Follow the top TODO comment to import Stack, Text and DefaultButton components from Fabric
3. Follow the TODO comment to:
- replace `<footer>` with a `<Stack>`
- replace `<span>` with a `<Text>`
- replace `<button>` with a `<DefaultButton>`
## Bonus Exercise
GO WILD! There are so many components in the Fabric library! Try to put some components in the exercise component files. Try out these concepts mentioned earlier:
- Importing components from `office-ui-fabric-react`
- Customizing component with props found on the documentation site
- Customize component with render props (these will be called onRender\_\_\_ or similar)

2
step2-02/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>

27
step2-02/exercise/README.md Normal file
View File

@@ -0,0 +1,27 @@
# Step 2.2: UI Fabric Component Library (Exercise)
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
# Exercise 1: Getting familiar with the Fabric documentation site:
Open the [documentation for DefaultButton](https://developer.microsoft.com/en-us/fabric/#/components/button). Use the sidebar to explore other available components.
# Exercise 2: "Fabric"ize the TodoFooter.tsx
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 2 to see results.
1. Open TSX file inside `exercise/src/components/TodoFooter.tsx`
2. Follow the top TODO comment to import Stack, Text and DefaultButton components from Fabric
3. Follow the TODO comment to:
- replace `<footer>` with a `<Stack>`
- replace `<span>` with a `<Text>`
- replace `<button>` with a `<DefaultButton>`
## Bonus Exercise
GO WILD! There are so many components in the Fabric library! Try to put some components in the exercise component files. Try out these concepts mentioned earlier:
- Importing components from `office-ui-fabric-react`
- Customizing component with props found on the documentation site
- Customize component with render props (these will be called onRender\_\_\_ or similar)

2
step2-02/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>