frontend-bootcamp/step2-02/exercise

Step 2.2: UI Fabric Component Library (Exercise)

Lessons | Exercise | Demo

Exercise 1: Getting familiar with the Fabric documentation site:

Open the documentation for DefaultButton. 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)