fixing up readmes for 1st two steps per feedback

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<T>` 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<T>`
+Be sure to use the built-in `console.log()` to show the functionality of `Stack<T>`
 
 ## Spread and Destructure
 

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 ...

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',

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
+## Importing a Component
-- Default Button / Primary Button
+
+```tsx
+import { DefaultButton } from 'office-ui-fabric-react';
+
+const MyComponent = () => {
+  return (
+    <div>
+      <DefaultButton>Hello World</DefaultButton>
+    </div>
+  );
+};
+```
+
+## 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 (
+    <div>
+      <DefaultButton iconProps={{ iconName: 'Mail' }}>Send Mail</DefaultButton>
+    </div>
+  );
+};
+```
+
+## Render Props
+
+Some Fabric components take in a render function like the TextField:
+
+```tsx
+import { TextField } from 'office-ui-fabric-react';
+
+const MyComponent = () => {
+  return (
+    <div>
+      <TextField onRenderPrefix={() => <Icon iconName="Search" />} />
+      <TextField onRenderPrefix={() => 'hello world'} />
+    </div>
+  );
+};
+```
+
+# 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)