From 7cb74f6ed941e84b3b8202d109cebe0c17f36258 Mon Sep 17 00:00:00 2001 From: Elizabeth Craig Date: Fri, 1 Mar 2019 11:55:42 -0800 Subject: [PATCH 1/3] highlight.js doesn't like tsx --- step1-07/demo/README.md | 20 ++++++++++---------- step2-03/demo/README.md | 4 ++-- step2-03/exercise/README.md | 2 +- step2-04/demo/README.md | 2 +- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/step1-07/demo/README.md b/step1-07/demo/README.md index 4f68fc0..8571492 100644 --- a/step1-07/demo/README.md +++ b/step1-07/demo/README.md @@ -30,7 +30,7 @@ Let's start off in the TodoList, as that has the most data flow up and down. The Looking at our `TodoApp` we know that `TodoList` has three props: `filter`, `todos`, and `complete`. We'll start by creating an interface called `TodoListProps` that represents this component's props. -```tsx +```ts interface TodoListProps { filter: any; todos: any; @@ -42,7 +42,7 @@ interface TodoListProps { With that interface written, we'll add it to our component class. -```tsx +```ts export class TodoList extends React.Component ``` @@ -58,7 +58,7 @@ So far we've only established what our prop names are, not the type of values in We know that `filter` shouldn't be an object, array or function, so we can specify it should always be a string like this: -```tsx +```ts interface TodoListProps { filter: string; todos: any; @@ -68,7 +68,7 @@ interface TodoListProps { But since we know that the filter can be only one of three values, we can make that explicit with a [union type](https://www.typescriptlang.org/docs/handbook/advanced-types.html#union-types): -```tsx +```ts interface TodoListProps { filter: 'all' | 'active' | 'completed'; todos: any; @@ -82,7 +82,7 @@ Now try going back to `TodoApp` and changing the `filter` attribute in `TodoList The `complete` prop isn't data, but a function. Fortunately, TypeScript can handle function types just as well as data. -```tsx +```ts interface TodoListProps { filter: 'all' | 'active' | 'completed'; todos: any; @@ -98,7 +98,7 @@ For functions we are only concerned with the parameters passed in and the return The `todos` prop is interesting in that `todos` is an object with a bunch of unknown keys. So here's what that interface would look like. -```tsx +```ts interface TodoListProps { filter: 'all' | 'active' | 'completed'; todos: { @@ -119,7 +119,7 @@ Now that our interface is complete, try changing the word "all" in `filter === a Most of our components will need to specify types for `todos` and `filter`, so it's a good thing that TypeScript allows us to share types between files. I've already written up and exported those shared types in the file `TodoApp.types.ts`, so we just need to import them and use them in our interface. -```tsx +```ts import { FilterTypes, Todos } from '../TodoApp.types'; interface TodoListProps { @@ -135,7 +135,7 @@ Our `TodoApp` doesn't take any props, but it does have state. We can use TypeScr I've already imported `Todos` and `FilterTypes` into the `TodoApp`, so we just need to add them to our class. If we want, we can even skip a separate interface definition and just declare the type inline. (This is not recommended for types of any complexity or types that are used in multiple places.) -```tsx +```ts export class TodoApp extends React.Component<{}, { todos: Todos; filter: FilterTypes }> ``` @@ -145,7 +145,7 @@ export class TodoApp extends React.Component<{}, { todos: Todos; filter: FilterT Jumping down to the TodoListItem, as we start to write the `TodoListItemProps` we realize that two of the props, `label` and `completed`, have already been defined in the `TodoItem` interface in `TodoApp.types`. So we can make `TodoListItemProps` reuse the `TodoItem` interface by extending it. -```tsx +```ts interface TodoListItemProps extends TodoItem { id: string; complete: (id: string) => void; @@ -164,7 +164,7 @@ And then use the input's `onChange` event to fire our `complete` callback. We ca > A [callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function) is a function passed into a component as a prop. -```tsx +```jsx complete(id)} /> ``` diff --git a/step2-03/demo/README.md b/step2-03/demo/README.md index 87c217f..2e23768 100644 --- a/step2-03/demo/README.md +++ b/step2-03/demo/README.md @@ -21,7 +21,7 @@ There are some predefined themes within Fabric already, like Fluent (which will The following code (simplified from `demo/src/components/TodoApp.tsx`) shows an example of applying the Fluent theme to our todo app using `Customizer`. -```tsx +```jsx import { Customizer } from 'office-ui-fabric-react'; import { FluentCustomizations } from '@uifabric/fluent-theme'; @@ -128,7 +128,7 @@ Benefits of `mergeStyles` include: The following is a basic example using mergeStyles. ([This CodePen](https://codepen.io/dzearing/pen/jGdgrE?editors=1011) illustrates in more detail what `mergeStyles` does and includes some advanced examples.) -```tsx +```jsx // can also import from office-ui-fabric-react in Fabric-based apps import { mergeStyles } from '@uifabric/merge-styles'; diff --git a/step2-03/exercise/README.md b/step2-03/exercise/README.md index 495e950..72c37bd 100644 --- a/step2-03/exercise/README.md +++ b/step2-03/exercise/README.md @@ -46,7 +46,7 @@ import { TeamsCustomizations } from '@uifabric/theme-samples'; 1. Try generating a class name using `mergeStyles` and use it as a `className` prop inside `TodoApp` -```tsx +```jsx import { mergeStyles } from 'office-ui-fabric-react'; const className = mergeStyles({ diff --git a/step2-04/demo/README.md b/step2-04/demo/README.md index 88388b3..60467a9 100644 --- a/step2-04/demo/README.md +++ b/step2-04/demo/README.md @@ -42,7 +42,7 @@ In a real app using ReactDOM, the top-level component will be rendered on the pa The following code demonstrates how Enzyme can be used to help test React components. -```tsx +```jsx import React from 'react'; import { mount } from 'enzyme'; import { TestMe } from './TestMe'; From 8fa816788066f0b060289370011f0dca290edd12 Mon Sep 17 00:00:00 2001 From: Elizabeth Craig Date: Fri, 1 Mar 2019 11:55:55 -0800 Subject: [PATCH 2/3] make code blocks bold for readability when presenting --- assets/step.css | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/step.css b/assets/step.css index af570dc..cd23ac3 100644 --- a/assets/step.css +++ b/assets/step.css @@ -50,6 +50,7 @@ body { #markdownReadme code.hljs { background-color: inherit; + font-weight: bold; } /** From 34a25c7afdb4b30f0ccd723d00e8cb235e594724 Mon Sep 17 00:00:00 2001 From: Elizabeth Craig Date: Fri, 1 Mar 2019 11:56:11 -0800 Subject: [PATCH 3/3] fix bug in step2-01 demos --- step2-01/exercise/src/index.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/step2-01/exercise/src/index.ts b/step2-01/exercise/src/index.ts index 0a6a369..c625c54 100644 --- a/step2-01/exercise/src/index.ts +++ b/step2-01/exercise/src/index.ts @@ -50,6 +50,12 @@ function makePromise() { return Promise.resolve(5); } -// TODO: call makePromise() using await syntax and log the results - // TODO: create a new async function + +async function run() { + // TODO: call makePromise() using await syntax and log the results + + // TODO: call your new async function +} + +run();