diff --git a/step2-01/README.md b/step2-01/README.md index 9a31c1c..0db18b4 100644 --- a/step2-01/README.md +++ b/step2-01/README.md @@ -142,21 +142,21 @@ Please complete all exercises inside the `exercise/src` folder unless otherwise 3. Inside the file from (step 2), write a function called `fib(n)` that takes in a number and returns a the n-th Fibonacci number - be sure the specify the type of n -> HINT: fib(n) = fib(n - 1) + fib(n - 2); fib(n <= 1) = n; +> HINT: function fib(n: number) { return n <= 1 ? n : fib(n - 1) + fib(n - 2); } 4. Export `fib(n)` as a **named export** 5. Export another const variable as a **default export** -6. Import both the modules created in steps (4) and (5) and use the provided `log()` function to log it onto the page. +6. Inside `index.ts` Import both the modules created in steps (4) and (5) and use the built-in `console.log()` function to log the result of `fib(FibConst)`. ## Types, Interfaces, and Classes -Create inside `index.ts`: +Inside `index.ts`: -1. a type alias for string union type describing the states of Red-Green-Yellow traffic light: `type TrafficLight = ???` +1. Add a type alias for string union type describing the states of Red-Green-Yellow traffic light: `type TrafficLight = ???` -2. describe a type of car with an interface: `interface Car { ... }` +2. Describe a type of car with an interface: `interface Car { ... }` complete with `wheels`, `color`, `make`, `model` ## Generic @@ -164,7 +164,7 @@ Inside `stack.ts`, create a generic class for a `Stack` complete with a typed > Hint: the JavaScript array already has `push()` and `pop()` implemented for you. That can be your backing store. -Be sure to use the provided `log()` to show the functionality of `Stack` +Be sure to use the built-in `console.log()` to show the functionality of `Stack` ## Spread and Destructure diff --git a/step2-01/exercise/src/fibonacci.ts b/step2-01/exercise/src/fibonacci.ts new file mode 100644 index 0000000..b99bcb6 --- /dev/null +++ b/step2-01/exercise/src/fibonacci.ts @@ -0,0 +1,5 @@ +// TODO: create a named export of a function called fib(n) +// export function fib(n: number) ... + +// TODO: create a default export of a constant of a number +// export default ... diff --git a/step2-01/exercise/src/index.ts b/step2-01/exercise/src/index.ts index df8f49e..cb6f05e 100644 --- a/step2-01/exercise/src/index.ts +++ b/step2-01/exercise/src/index.ts @@ -1,3 +1,6 @@ +// TODO: import the fib(n) function and the constant from './fibonacci.ts' +// import {fib}, FibConst from ... + // Some setup code for exercises const obj1 = { first: 'who', diff --git a/step2-02/README.md b/step2-02/README.md index beb715b..d5bdab9 100644 --- a/step2-02/README.md +++ b/step2-02/README.md @@ -4,16 +4,101 @@ 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: +# What Makes It Good + +- Fabric has been developed BOTH by developers and design engineers working together as a team +- Most notable Microsoft web products use it +- It is documented both from examples and generated from API (TypeScript) itself +- Components are highly customizable and themeable +- Comprehensive library +- Works with (aria) and augments (focus management) web accessibility standards +- Fully funded and well managed - shield rotation and lots of automation work +- Engineering is done in the open in github.com +- Engineering system is shared and re-usable by other teams + +# How to Find It + +github repo: 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 +# How to Use It -- Stack -- Default Button / Primary Button +## Importing a Component + +```tsx +import { DefaultButton } from 'office-ui-fabric-react'; + +const MyComponent = () => { + return ( +
+ Hello World +
+ ); +}; +``` + +## Customizing Behavior of Individual Component + +Take a look at the documentation: https://developer.microsoft.com/en-us/fabric#/components/button + +Let's say we want an Icon to be rendered with the Button Text, we'd use the `iconProps` + +```tsx +import { DefaultButton } from 'office-ui-fabric-react'; + +const MyComponent = () => { + return ( +
+ Send Mail +
+ ); +}; +``` + +## Render Props + +Some Fabric components take in a render function like the TextField: + +```tsx +import { TextField } from 'office-ui-fabric-react'; + +const MyComponent = () => { + return ( +
+ } /> + 'hello world'} /> +
+ ); +}; +``` + +# Layout with Stack + +Before we start, let's look at flexbox. It is really, really complex to use: + +- a guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ +- a tool: http://the-echoplex.net/flexyboxes/ +- did you know there were 3 or so flex box standards? i.e. Old links will have non-working code + +Fabric's answer is: Stack + +> A Stack is a container-type component that abstracts the implementation of a flexbox in order to define the layout of its children components. + +The concepts are: + +- direction +- grow +- wrap +- shrunk +- justify-content +- alignment + +Stack abstracts these CSS and provides a type discoverable. + +Checkout a cookbook of sorts in our documentation: https://developer.microsoft.com/en-us/fabric#/components/stack # Exercise @@ -29,4 +114,8 @@ https://developer.microsoft.com/en-us/fabric/#/components # Bonus Exercise -GO WILD! There are so many components from the Fabric library! Try to put some components in the exercise component files. +GO WILD! There are so many components from the Fabric library! Try to put some components in the exercise component files. Try out these concepts that we have mentioned above: + +- 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 something like that)