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

moved up to 5

Browse Source
This commit is contained in:
Ken
2019-02-28 22:13:40 -08:00
parent b19973652a
commit a00a1b237a
12 changed files with 108 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
step2-03/README.md → step2-03/demo/README.md
View File

@@ -1,4 +1,4 @@
# Step 2.3: Theming and styling with UI Fabric # Step 2.3: Theming and styling with UI Fabric (Demo)
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) [Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
@@ -146,64 +146,3 @@ const className = mergeStyles(blueBackgroundClassName, {
const myDiv = <div className={className}>I am a green div that turns red on hover!</div>; const myDiv = <div className={className}>I am a green div that turns red on hover!</div>;
``` ```
# Exercises
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 3 to see results.
## Fabric theming and styling
### Applying Fabric themes
Try applying some predefined themes from UI Fabric packages inside the TodoApp under `exercise/src/components/TodoApp.tsx`. Do this by replacing:
```ts
import { FluentCustomizations } from '@uifabric/fluent-theme';
```
with:
```ts
import { TeamsCustomizations } from '@uifabric/theme-samples';
```
### Applying customized themes
1. Create your own theme using the [theme generator](https://developer.microsoft.com/en-us/fabric#/styles/themegenerator) and copy the generated code.
2. In `exercise/src/components/TodoApp.tsx`, delete the `Customizer` component.
3. Paste in the generated theme code before the `TodoApp` component definition.
4. Play around with the values and use VS Code's intellisense to discover more properties of the `ITheme` type.
### Customizing one Fabric control instance
1. Open `exercise/src/components/TodoFooter.tsx`
2. Find the `<DefaultButton>` and insert a `styles` prop
3. Try to customize this with a styles object (let the Intellisense of VS Code guide you on what you can use to customize)
4. Try to customize this with a styles function
## Advanced/non-Fabric component styling
### CSS-in-JS with `mergeStyles`
1. Try generating a class name using `mergeStyles` and use it as a `className` prop inside `TodoApp`
```tsx
import { mergeStyles } from 'office-ui-fabric-react';
const className = mergeStyles({
backgroundColor: 'red',
selectors: {
':hover': {
backgroundColor: 'blue'
}
}
});
```
2. Try to give a few components extra padding

2
step2-03/demo/index.html
View File

@@ -4,7 +4,7 @@
<link rel="stylesheet" href="../../assets/step.css" /> <link rel="stylesheet" href="../../assets/step.css" />
</head> </head>
<body class="ms-Fabric"> <body class="ms-Fabric">
<div id="markdownReadme"></div> <div id="markdownReadme" data-src="./README.md"></div>
<div id="app"></div> <div id="app"></div>
<script src="../../assets/scripts.js"></script> <script src="../../assets/scripts.js"></script>
</body> </body>

64
step2-03/exercise/README.md Normal file
View File

@@ -0,0 +1,64 @@
# Step 2.3: Theming and styling with UI Fabric (Exercise)
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
# Exercises
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 3 to see results.
## Fabric theming and styling
### Applying Fabric themes
Try applying some predefined themes from UI Fabric packages inside the TodoApp under `exercise/src/components/TodoApp.tsx`. Do this by replacing:
```ts
import { FluentCustomizations } from '@uifabric/fluent-theme';
```
with:
```ts
import { TeamsCustomizations } from '@uifabric/theme-samples';
```
### Applying customized themes
1. Create your own theme using the [theme generator](https://developer.microsoft.com/en-us/fabric#/styles/themegenerator) and copy the generated code.
2. In `exercise/src/components/TodoApp.tsx`, delete the `Customizer` component.
3. Paste in the generated theme code before the `TodoApp` component definition.
4. Play around with the values and use VS Code's intellisense to discover more properties of the `ITheme` type.
### Customizing one Fabric control instance
1. Open `exercise/src/components/TodoFooter.tsx`
2. Find the `<DefaultButton>` and insert a `styles` prop
3. Try to customize this with a styles object (let the Intellisense of VS Code guide you on what you can use to customize)
4. Try to customize this with a styles function
## Advanced/non-Fabric component styling
### CSS-in-JS with `mergeStyles`
1. Try generating a class name using `mergeStyles` and use it as a `className` prop inside `TodoApp`
```tsx
import { mergeStyles } from 'office-ui-fabric-react';
const className = mergeStyles({
backgroundColor: 'red',
selectors: {
':hover': {
backgroundColor: 'blue'
}
}
});
```
2. Try to give a few components extra padding

2
step2-03/exercise/index.html
View File

@@ -4,7 +4,7 @@
<link rel="stylesheet" href="../../assets/step.css" /> <link rel="stylesheet" href="../../assets/step.css" />
</head> </head>
<body class="ms-Fabric"> <body class="ms-Fabric">
<div id="markdownReadme"></div> <div id="markdownReadme" class="exercise" data-src="./README.md"></div>
<div id="app"></div> <div id="app"></div>
<script src="../../assets/scripts.js"></script> <script src="../../assets/scripts.js"></script>
</body> </body>

18
step2-04/README.md → step2-04/demo/README.md
View File

@@ -1,4 +1,4 @@
# Step 2.4: Testing TypeScript code with Jest # Step 2.4: Testing TypeScript code with Jest (Demo)
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) [Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
@@ -126,19 +126,3 @@ Take a look at code inside `demo/src`:
3. `index.spec.ts` is the test file 3. `index.spec.ts` is the test file
Note how tests are re-run when either test files or source files under `src` are saved. Note how tests are re-run when either test files or source files under `src` are saved.
# Exercise
Start the test runner by running `npm test` in the root of the `frontend-bootcamp` folder.
## Basic testing
1. Look at `exercise/src/stack.ts` for a sample implementation of a stack
2. Follow the instructions inside `stack.spec.ts` file to complete the two tests
## Enzyme Testing
1. Open up `exercise/src/TestMe.spec.tsx`
2. Fill in the test using Enzyme concepts introduced in the demo

2
step2-04/demo/index.html
View File

@@ -4,7 +4,7 @@
<link rel="stylesheet" href="../../assets/step.css" /> <link rel="stylesheet" href="../../assets/step.css" />
</head> </head>
<body class="ms-Fabric"> <body class="ms-Fabric">
<div id="markdownReadme"></div> <div id="markdownReadme" data-src="./README.md"></div>
<div id="app"> <div id="app">
For this step, we look at unit testing. Run For this step, we look at unit testing. Run
<pre>npm test</pre> <pre>npm test</pre>

19
step2-04/exercise/README.md Normal file
View File

@@ -0,0 +1,19 @@
# Step 2.4: Testing TypeScript code with Jest (Exercise)
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
# Exercise
Start the test runner by running `npm test` in the root of the `frontend-bootcamp` folder.
## Basic testing
1. Look at `exercise/src/stack.ts` for a sample implementation of a stack
2. Follow the instructions inside `stack.spec.ts` file to complete the two tests
## Enzyme Testing
1. Open up `exercise/src/TestMe.spec.tsx`
2. Fill in the test using Enzyme concepts introduced in the demo

2
step2-04/exercise/index.html
View File

@@ -4,7 +4,7 @@
<link rel="stylesheet" href="../../assets/step.css" /> <link rel="stylesheet" href="../../assets/step.css" />
</head> </head>
<body class="ms-Fabric"> <body class="ms-Fabric">
<div id="markdownReadme"></div> <div id="markdownReadme" class="exercise" data-src="./README.md"></div>
<div id="app"> <div id="app">
For this step, we look at unit testing. Run For this step, we look at unit testing. Run
<pre>npm test</pre> <pre>npm test</pre>

16
step2-05/README.md → step2-05/demo/README.md
View File

@@ -1,4 +1,4 @@
# Step 2.5: Redux: Reducers # Step 2.5: Redux: Reducers (Demo)
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) [Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
@@ -26,7 +26,7 @@ A view is a React components that consumes the store as its data. There is a spe
### Action ### Action
Actions are messages that represent some event, such as a user's action or a network request. With the aid of *reducers*, they affect the overall state. Actions are messages that represent some event, such as a user's action or a network request. With the aid of _reducers_, they affect the overall state.
### Store ### Store
@@ -99,15 +99,3 @@ function reducer(state: Store['todos'], payload: any): Store['todos'] {
``` ```
In the demo and exercises for this step, I separated the pure and reducer functions into different files to make it cleaner. The tests inside `pureFunctions.spec.ts` should describe the behavior of the individual functions. They are easy to follow and easy to write. In the demo and exercises for this step, I separated the pure and reducer functions into different files to make it cleaner. The tests inside `pureFunctions.spec.ts` should describe the behavior of the individual functions. They are easy to follow and easy to write.
# Exercise
If you still have the app running from a previous step, stop it with `ctrl+c`. Start the tests instead by running `npm test` from the root of the `frontend-bootcamp` folder.
1. First, take a look at the store interface in `exercise/src/store/index.ts`. Note that the `Store` interface has two keys: `todos` and `filter`. We'll concentrate on `todos`, which is an object where the keys are string IDs and the values are of a `TodoItem` type.
2. Open `exercise/src/reducers/pureFunctions.ts` and fill in the missing function bodies.
3. Open `exercise/src/reducers/index.ts` and fill in the missing case statements for the switch on `action.type`.
4. Open `exercise/src/reducers/pureFunctions.spec.ts` and implement tests for the functions you wrote for `remove`, `complete`, and `clear`.

2
step2-05/demo/index.html
View File

@@ -4,7 +4,7 @@
<link rel="stylesheet" href="../../assets/step.css" /> <link rel="stylesheet" href="../../assets/step.css" />
</head> </head>
<body class="ms-Fabric"> <body class="ms-Fabric">
<div id="markdownReadme"></div> <div id="markdownReadme" data-src="./README.md"></div>
<div id="app"> <div id="app">
For this step, we look at unit testing. Run For this step, we look at unit testing. Run
<pre>npm test</pre> <pre>npm test</pre>

15
step2-05/exercise/README.md Normal file
View File

@@ -0,0 +1,15 @@
# Step 2.5: Redux: Reducers (Exercise)
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
# Exercise
If you still have the app running from a previous step, stop it with `ctrl+c`. Start the tests instead by running `npm test` from the root of the `frontend-bootcamp` folder.
1. First, take a look at the store interface in `exercise/src/store/index.ts`. Note that the `Store` interface has two keys: `todos` and `filter`. We'll concentrate on `todos`, which is an object where the keys are string IDs and the values are of a `TodoItem` type.
2. Open `exercise/src/reducers/pureFunctions.ts` and fill in the missing function bodies.
3. Open `exercise/src/reducers/index.ts` and fill in the missing case statements for the switch on `action.type`.
4. Open `exercise/src/reducers/pureFunctions.spec.ts` and implement tests for the functions you wrote for `remove`, `complete`, and `clear`.

2
step2-05/exercise/index.html
View File

@@ -4,7 +4,7 @@
<link rel="stylesheet" href="../../assets/step.css" /> <link rel="stylesheet" href="../../assets/step.css" />
</head> </head>
<body class="ms-Fabric"> <body class="ms-Fabric">
<div id="markdownReadme"></div> <div id="markdownReadme" class="exercise" data-src="./README.md"></div>
<div id="app"> <div id="app">
For this step, we look at unit testing. Run For this step, we look at unit testing. Run
<pre>npm test</pre> <pre>npm test</pre>