fixing up readmes for 1st two steps per feedback

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 (
+    <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)