add one liners

Closes #76

Author: kentcdodds

src/exercise/01.md

@@ -6,6 +6,10 @@ Elaborate on your learnings here in `src/exercise/01.md`
 
 ## Background
 
+**One liner:** The Context Module Functions Pattern allows you to encapsulate a
+complex set of state changes into a utility function which can be tree-shaken
+and lazily loaded.
+
 Let's take a look at an example of a simple context and a reducer combo:
 
 ```javascript
@@ -91,12 +95,14 @@ context. Let's do that. You'll notice that we have to put it in
 `React.useCallback` so we can list our "helper" functions in dependency lists):
 
 ```javascript
-const increment = React.useCallback(() => dispatch({type: 'increment'}), [
-  dispatch,
-])
-const decrement = React.useCallback(() => dispatch({type: 'decrement'}), [
-  dispatch,
-])
+const increment = React.useCallback(
+  () => dispatch({type: 'increment'}),
+  [dispatch],
+)
+const decrement = React.useCallback(
+  () => dispatch({type: 'decrement'}),
+  [dispatch],
+)
 const value = {state, increment, decrement}
 return <CounterContext.Provider value={value} {...props} />
 

src/exercise/02.md

@@ -6,6 +6,10 @@ Elaborate on your learnings here in `src/exercise/02.md`
 
 ## Background
 
+**One liner:** The Compound Components Pattern enables you to provide a set of
+components that implicitely share state for a simple yet powerful declarative
+API for reusable components.
+
 Compound components are components that work together to form a complete UI. The
 classic example of this is `<select>` and `<option>` in HTML:
 

src/exercise/03.md

@@ -6,6 +6,10 @@ Elaborate on your learnings here in `src/exercise/03.md`
 
 ## Background
 
+**One liner:** The Flexible Compound Components Pattern is only differs from the
+previous exercise in that it uses React context. You should use this version of
+the pattern more often.
+
 Right now our component can only clone and pass props to immediate children. So
 we need some way for our compound components to implicitly accept the on state
 and toggle method regardless of where they're rendered within the Toggle

src/exercise/04.md

@@ -6,6 +6,9 @@ Elaborate on your learnings here in `src/exercise/04.md`
 
 ## Background
 
+**One liner:** The Prop Collections and Getters Pattern allows your hook to
+support common use cases for UI elements people build with your hook.
+
 In typical UI components, you need to take accessibility into account. For a
 button functioning as a toggle, it should have the `aria-pressed` attribute set
 to `true` or `false` if it's toggled on or off. In addition to remembering that,

src/exercise/05.md

@@ -6,6 +6,10 @@ Elaborate on your learnings here in `src/exercise/05.md`
 
 ## Background
 
+**One liner:** The State Reducer Pattern inverts control over the state
+management of your hook and/or component to the developer using it so they can
+control the state changes that happen when dispatching events.
+
 During the life of a reusable component which is used in many different
 contexts, feature requests are made over and over again to handle different
 cases and cater to different scenarios.

src/exercise/06.md

@@ -6,6 +6,12 @@ Elaborate on your learnings here in `src/exercise/06.md`
 
 ## Background
 
+**One liner:** The Control Props pattern allows users to completely control
+state values within your component. This differs from the state reducer pattern
+in the fact that you can not only change the state changes based on actions
+dispatched but you _also_ can trigger state changes from outside the component
+or hook as well.
+
 Sometimes, people want to be able to manage the internal state of our component
 from the outside. The state reducer allows them to manage what state changes are
 made when a state change happens, but sometimes people may want to make state