Day 2: title formatting coherence, minor edits

step2-01/demo/README.md

@@ -1,4 +1,4 @@
-# Step 2.1: Introduction to TypeScript (Demo)
+# Step 2.1 - Introduction to TypeScript (Demo)
 
 [Lessons](../../) | [Exercise](../exercise/)
 
@@ -28,11 +28,11 @@ The most important ones to know about are:
 
 > For more information about the _many_ modularity patterns and standards developed over time, see [this article](https://medium.freecodecamp.org/javascript-modules-a-beginner-s-guide-783f7d7a5fcc). You may still encounter some of the older patterns in legacy code.
 
-## TypeScript Types
+## TypeScript types
 
 Refer to [`demo/src/types`](./src/types/index.ts) for examples of some of the types available in TS that benefit a React developer.
 
-## Spread Operator
+## Spread operator
 
 The spread operator `...` provides a quick way to clone and concatenate objects and arrays. This syntax is seen a lot inside React props and Redux reducers.
 
@@ -139,7 +139,7 @@ aPromise
 
 > For more information, see [this overview of promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) or [this deep dive](https://developers.google.com/web/fundamentals/primers/promises).
 
-## Async / Await
+## Async / await
 
 **Async / Await** is a language-level feature for writing asynchronous functions as if they are ordinary, synchronous code. JS support for this is built on top of `Promise`s and is inspired heavily by [C#'s async / await syntax](https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/concepts/async/). An async function is written like this:
 

step2-01/exercise/README.md

@@ -1,4 +1,4 @@
-# Step 2.1: Introduction to TypeScript (Exercise)
+# Step 2.1 - Introduction to TypeScript (Exercise)
 
 [Lessons](../../) | [Demo](../demo/)
 
@@ -20,7 +20,7 @@ Exercises will be completed under this step's `exercise/src` folder unless other
 
 5. Inside `index.ts` in the same folder, import both `fib` and `FibConst`, and use the built-in `console.log()` function to log the result of `fib(FibConst)`.
 
-## Types and Interfaces
+## Types and interfaces
 
 Inside `exercise/src/index.ts`:
 
@@ -38,7 +38,7 @@ Inside `exercise/src/stack.ts`, create a generic class for a `Stack<T>` complete
 
 In `exercise/src/index.ts`, create a `Stack<number>` and use `console.log()` to demonstrate its functionality.
 
-## Spread and Destructuring
+## Spread and destructuring
 
 1. Note the following code in index.ts:
 
@@ -61,7 +61,7 @@ const obj2 = {
 
 3. Use the destructuring syntax to retrieve the values for `{first, second, catcher}` from `megaObj`.
 
-## Async / Await
+## Async / await
 
 Note the following code in index.ts:
 

step2-02/demo/README.md

@@ -1,4 +1,4 @@
-# Step 2.2: UI Fabric Component Library (Demo)
+# Step 2.2 - UI Fabric component library (Demo)
 
 [Lessons](../../) | [Exercise](../exercise/)
 
@@ -11,7 +11,7 @@ We'll talk about:
 - [How to use it](#how-to-use-it)
 - [Laying out apps with Stack](#layout-with-stack)
 
-## What Makes It Good
+## 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
@@ -23,7 +23,7 @@ We'll talk about:
 - Engineering is done in the open on GitHub
 - Engineering system is shared and re-usable by other teams
 
-## How to Find It
+## How to find it
 
 GitHub repo:
 https://github.com/officedev/office-ui-fabric-react
@@ -31,9 +31,9 @@ https://github.com/officedev/office-ui-fabric-react
 Documentation:
 https://developer.microsoft.com/en-us/fabric/#/components
 
-## How to Use It
+## How to use it
 
-### Importing a Component
+### Importing a component
 
 ```jsx
 import { DefaultButton } from 'office-ui-fabric-react';
@@ -47,7 +47,7 @@ const MyComponent = () => {
 };
 ```
 
-### Customizing Behavior of Individual Components
+### Customizing behavior of individual components
 
 Take a look at the [Button documentation](https://developer.microsoft.com/en-us/fabric#/components/button).
 
@@ -65,7 +65,7 @@ const MyComponent = () => {
 };
 ```
 
-### Customizing Component Rendering
+### Customizing component rendering
 
 Some Fabric components take in a render functions to allow customizing certain parts of the component. An example with TextField:
 
@@ -84,7 +84,7 @@ const MyComponent = () => {
 
 ## Layout with Stack
 
-Before we start, let's look at flexbox--a new CSS layout method which is powerful, but really, really complex to use:
+Before we start, let's look at flexbox--a modern CSS layout method which is powerful, but really, really complex to use:
 
 - A guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 - A tool: http://the-echoplex.net/flexyboxes/

step2-02/exercise/README.md

@@ -1,4 +1,4 @@
-# Step 2.2: UI Fabric Component Library (Exercise)
+# Step 2.2 - UI Fabric component library (Exercise)
 
 [Lessons](../../) | [Demo](../demo/)
 

step2-03/demo/README.md

@@ -1,4 +1,4 @@
-# Step 2.3: Theming and styling with UI Fabric (Demo)
+# Step 2.3 - Theming and styling with UI Fabric (Demo)
 
 [Lessons](../../) | [Exercise](../exercise/)
 

step2-03/exercise/README.md

@@ -1,12 +1,10 @@
-# Step 2.3: Theming and styling with UI Fabric (Exercise)
+# Step 2.3 - Theming and styling with UI Fabric (Exercise)
 
 [Lessons](../../) | [Demo](../demo/)
 
 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
+## 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:
 
@@ -20,7 +18,7 @@ with:
 import { TeamsCustomizations } from '@uifabric/theme-samples';
 ```
 
-### Applying customized themes
+## 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.
 
@@ -30,7 +28,7 @@ import { TeamsCustomizations } from '@uifabric/theme-samples';
 
 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
+## Customizing one Fabric control instance
 
 1. Open `exercise/src/components/TodoFooter.tsx`
 
@@ -40,9 +38,9 @@ import { TeamsCustomizations } from '@uifabric/theme-samples';
 
 4. Try to customize this with a styles function
 
-## Advanced/non-Fabric component styling
+## CSS-in-JS with `mergeStyles`
 
-### CSS-in-JS with `mergeStyles`
+As mentioned in the demo, this is an advanced approach which also works outside of Fabric. You wouldn't typically use this approach within a Fabric-based app.
 
 1. Try generating a class name using `mergeStyles` and use it as a `className` prop inside `TodoApp`
 

step2-04/demo/README.md

@@ -8,8 +8,8 @@ We will solve these problems with the [React Context API](https://reactjs.org/do
 
 1. The problem of complex applications
 2. React Context API
-3. Consuming context from a Class Component
-4. Consuming context from a Functional Component
+3. Consuming context from a class component
+4. Consuming context from a functional component
 
 ## The problem of complex applications
 
@@ -81,7 +81,7 @@ class TodoApp extends React.Component {
 }
 ```
 
-### Consume context from a Class Component
+### Consume context from a class component
 
 Inside a class-based child component, such as `<TodoHeader>`, the context created in the parent can be accessed via `this.context`. Note that for this to work, you must also set the component class's `contextType` property to the context type created above.
 
@@ -97,7 +97,7 @@ class TodoHeader extends React.Component {
 TodoHeader.contextType = TodoContext;
 ```
 
-### Consume context from a Functional Component
+### Consume context from a functional component
 
 If you're using the functional component syntax, you can access the context with the `useContext()` hook:
 

step2-04/exercise/README.md

@@ -4,19 +4,19 @@
 
 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 4 to see results.
 
-## TodoContext.Provider Component
+## TodoContext.Provider component
 
 1. Open `exercise/src/components/TodoApp.tsx`
 
 2. Uncomment the missing functions inside the value prop
 
-## TodoFooter, Context inside Functional Component
+## TodoFooter: context inside functional component
 
 1. Open `exercise/src/components/TodoFooter.tsx`
 
 2. Use `useContext` to access the `TodoContext` and replace the two constants with values from the context
 
-## TodoHeader, Context inside Class Component
+## TodoHeader: context inside class component
 
 1. Open `exercise/src/components/TodoHeader.tsx`
 

step2-05/exercise/README.md

@@ -1,4 +1,4 @@
-# Step 2.5: Redux: Reducers (Exercise)
+# Step 2.5 - Redux: The Store (Exercise)
 
 [Lessons](../../) | [Demo](../demo/)
 
@@ -6,12 +6,12 @@ If you don't already have the app running, start it by running `npm start` from
 
 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 type `TodoItem`.
 
-2. Open `exercise/src/reducers/index.ts` and fill in the missing case statements for the switch on `action.type`.
+2. Open `exercise/src/reducers/index.ts` and fill in the missing reducer implementations.
 
-3. Open `exercise/src/index.tsx` and write separate dispatch calls.
+3. Open `exercise/src/index.tsx` and write some `dispatch` calls.
 
-4. Take a look what is written in the console (F12 on PC, cmd-option-I on Mac).
+4. Take a look what is written in the console (F12 on PC, `cmd-option-I` on Mac).
 
-5. Install the Redux DevTools [Chrome](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) or [Firefox](https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/) extensions
+5. Install the Redux DevTools [Chrome](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) or [Firefox](https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/) extension
 
 6. Observe the state changes and try doing "time travel"

step2-06/demo/README.md

@@ -1,4 +1,4 @@
-# Step 2.6: Redux: React Binding (Demo)
+# Step 2.6 - Redux: React binding (Demo)
 
 [Lessons](../../) | [Exercise](../exercise/)
 

step2-06/exercise/README.md

@@ -1,14 +1,14 @@
-# Step 2.6: Redux: React Binding (Exercise)
+# Step 2.6 - Redux: React binding (Exercise)
 
 [Lessons](../../) | [Demo](../demo/)
 
-If you haven't arStart the app by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 6 to see results.
+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 6 to see results.
 
 At the beginning of this exercise, the "Add" and "Clear Completed" buttons do not work. We'll be fixing that in this step!
 
 1. Open `exercise/src/index.tsx` and wrap `<TodoApp>` with `<Provider>` as instructed in the comment
 
-2. Open `exercise/src/components/TodoFooter.tsx` and erase the "nullable" type modifier (i.e. the ?) in the interface definition of `TodoFooterProps`
+2. Open `exercise/src/components/TodoFooter.tsx` and erase the "nullable" type modifier (the `?`) in the interface definition of `TodoFooterProps`
 
 3. Uncomment the bottom bits of code and fill in `connect()` arguments - feel free to use `TodoListItem.tsx` as a guide