Formatting updates

This is a first round of suggested edits.

What’s in this PR:

First, there are no actual changes to content, only to the presentation
of the content, adopting patterns to improve consistency and
readability.

1) Adopted pattern to use title-casing (AP style)
2) Adopted pattern to use punctuation with abbreviations, ex: e.g.,
i.e., a.k.a., etc. (AP style)
3) Adopted pattern to use “>” before any source code links, which will
indent and block quote that link

Author: AllThingsSmitty

README.md

@@ -2,15 +2,15 @@
 
 Written by [Cody Lindley](http://codylindley.com/) sponsored by — [Frontend Masters](https://frontendmasters.com/)
 
-Learn React in the terse cookbook style found with previous Enlightenment titles (i.e. [jQuery Enlightenment](http://jqueryenlightenment.com/), [JavaScript Enlightenment](http://javascriptenlightenment.com/), [DOM Enlightenment](http://domenlightenment.com/))
+Learn React in the terse cookbook style found with previous Enlightenment titles (i.e., [jQuery Enlightenment](http://jqueryenlightenment.com/), [JavaScript Enlightenment](http://javascriptenlightenment.com/), [DOM Enlightenment](http://domenlightenment.com/))
 
 ***
 
-**download a .pdf, .epub, or .mobi file from**:
+**Download a .pdf, .epub, or .mobi file from**:
 
 * [https://www.gitbook.com/book/frontendmasters/react-enlightenment/details](https://www.gitbook.com/book/frontendmasters/react-enlightenment/details)
 
-**contribute content, suggestions, and fixes on github**:
+**Contribute content, suggestions, and fixes on GitHub**:
 
 * [https://github.com/FrontendMasters/react-enlightenment](https://github.com/FrontendMasters/react-enlightenment)
 

SUMMARY-proposal.md

@@ -1,38 +1,38 @@
 # Summary
 
-* [What is React](what-is-react.md)
-* [React semantics/terminology](react-semantics.md)
-* [React & Babel basic setup](react-basic-setup.md)
+* [What Is React](what-is-react.md)
+* [React Semantics/terminology](react-semantics.md)
+* [React & Babel Basic Setup](react-basic-setup.md)
     * [Using react.js & react-dom.js](react-basic-setup/1.1.md)
     * [Using JSX via Babel](react-basic-setup/1.2.md)
-    * [Using ES6 & ES* with React](react-basic-setup/1.3.md)
-    * [Writing React with JSFiddle](react-basic-setup/1.4.md)
+    * [Using ES6 & ES* With React](react-basic-setup/1.3.md)
+    * [Writing React With JSFiddle](react-basic-setup/1.4.md)
 * [React Nodes](react-nodes.md)
-    * [What is a React node?](react-nodes/2.1.md)
-    * [Creating React nodes](react-nodes/2.2.md)
-    * [Defining React node attributes (aka props)](react-nodes/2.3.md)
-    * [Using React node element factories](react-nodes/2.4.md)
+    * [What Is a React Node?](react-nodes/2.1.md)
+    * [Creating React Nodes](react-nodes/2.2.md)
+    * [Defining React Node Attributes (a.k.a, Props)](react-nodes/2.3.md)
+    * [Using React Node Element Factories](react-nodes/2.4.md)
 * [JSX](react-jsx.md)
-    * [What is a JSX?](react-jsx/3.1.md)
-    * [Using JSX to create React nodes](react-jsx/3.2.md)
+    * [What Is a JSX?](react-jsx/3.1.md)
+    * [Using JSX to Create React Nodes](react-jsx/3.2.md)
 * [React Components]()
 * [React DOM Rendering]()
 * [React Props]()
 * [React State]()
 * [React ???]()
-    * [Creating React elements]()
+    * [Creating React Elements]()
     * [Creating JSX]()
     * [Writing JavaScript in JSX]()
-    * [Creating React components]()
-    * [Referencing component in JSX]()
-    * [Rendering using Virtual DOM]()
-    * [Creating child components]()
-    * [Passing values to components using props]()
-    * [Storing dynamic data in a component using state]()
-* [React & Babel advanced setup](react-advanced-setup.md)
+    * [Creating React Components]()
+    * [Referencing Component in JSX]()
+    * [Rendering Using Virtual DOM]()
+    * [Creating Child Components]()
+    * [Passing Values to Components Using Props]()
+    * [Storing Dynamic Data in a Component Using State]()
+* [React & Babel Advanced Setup](react-advanced-setup.md)
     * [Babel/JSX via CLI](react-advanced-setup/2.1.md)
     * [Babel/JSX via SystemJS](react-advanced-setup/2.2.md)
-    * [Babel/JSX via webpack](react-advanced-setup/2.3.md)
+    * [Babel/JSX via Webpack](react-advanced-setup/2.3.md)
     * [React Developer Tools ](react-advanced-setup/2.4.md
 
 
@@ -49,7 +49,7 @@
 
 * React namespace
 * React.createClass (define react component using JSX)
-* React.createElement (create react elements / i.e. DOM)
+* React.createElement (create react elements / i.e., DOM)
 * ReactDOM.render (place react elements into actual DOM via virtual DOM)
 * Using {} in JSX
 * Props (how data is passed down the tree via attributes and child nodes)
@@ -58,7 +58,7 @@
 
 * Custom elements
 * Composable Components / tree of components / component hierarchy
-* Controller components i.e. top-level branch components
+* Controller components i.e., top-level branch components
 * JSX (an XML’ish like HTML written in JS)
 * Virtual DOM
 * React is safe. We are not generating HTML strings so XSS protection is the default.

SUMMARY.md

@@ -1,45 +1,45 @@
 # Summary
 
-* [What is React](what-is-react.md)
-* [React semantics/terminology](react-semantics.md)
-* [React & Babel basic setup](react-basic-setup.md)
+* [What Is React](what-is-react.md)
+* [React Semantics/Terminology](react-semantics.md)
+* [React & Babel Basic Setup](react-basic-setup.md)
     * [Using react.js & react-dom.js](react-basic-setup/3.1.md)
     * [Using JSX via Babel](react-basic-setup/3.2.md)
     * [Using ES6 & ES* with React](react-basic-setup/3.3.md)
-    * [Writing React with JSFiddle](react-basic-setup/3.4.md)
-* [React nodes](react-nodes.md)
-    * [What is a React node?](react-nodes/4.1.md)
-    * [Creating React nodes](react-nodes/4.4.md)
+    * [Writing React With JSFiddle](react-basic-setup/3.4.md)
+* [React Nodes](react-nodes.md)
+    * [What Is a React Node?](react-nodes/4.1.md)
+    * [Creating React Nodes](react-nodes/4.4.md)
     * [Rendering to DOM](react-nodes/4.3.md)
-    * [Defining attributes/props](react-nodes/4.4.md)
-    * [Inlining CSS on element nodes](react-nodes/4.5.md)
-    * [Using element factories](react-nodes/4.6.md)
-* [JavaScript syntax extension (aka JSX)](react-jsx.md)
-    * [What is a JSX?](react-jsx/5.1.md)
-    * [Creating React nodes with JSX](react-jsx/5.2.md)
+    * [Defining Attributes/Props](react-nodes/4.4.md)
+    * [Inlining CSS on Element Nodes](react-nodes/4.5.md)
+    * [Using Element Factories](react-nodes/4.6.md)
+* [JavaScript Syntax Extension (a.k.a., JSX)](react-jsx.md)
+    * [What Is a JSX?](react-jsx/5.1.md)
+    * [Creating React Nodes With JSX](react-jsx/5.2.md)
     * [Rendering JSX to DOM](react-jsx/5.5.md)
-    * [Using JS expressions in JSX](react-jsx/5.4.md)
-    * [Using JS comments in JSX](react-jsx/5.5.md)
-    * [Using inline CSS in JSX](react-jsx/5.6.md)
-    * [Defining JSX attributes/props](react-jsx/5.7.md)
-* [Basic React components](basic-react-components.md)
-    * [What is a React component?](basic-react-components/6.1.md)
-    * [Creating components](basic-react-components/6.2.md)
-	* [Return one starting node/component](basic-react-components/6.3.md)
-	* [Creating stateless function components](basic-react-components/6.4.md)
-	* [Referring to a component instance](basic-react-components/6.5.md)
+    * [Using JS Expressions in JSX](react-jsx/5.4.md)
+    * [Using JS Comments in JSX](react-jsx/5.5.md)
+    * [Using Inline CSS in JSX](react-jsx/5.6.md)
+    * [Defining JSX Attributes/Props](react-jsx/5.7.md)
+* [Basic React Components](basic-react-components.md)
+    * [What Is a React Component?](basic-react-components/6.1.md)
+    * [Creating Components](basic-react-components/6.2.md)
+	* [Return One Starting Node/Component](basic-react-components/6.3.md)
+	* [Creating Stateless Function Components](basic-react-components/6.4.md)
+	* [Referring to a Component Instance](basic-react-components/6.5.md)
 * [React Props](react-props.md)
-    * [What are props?](react-props/7.1.md)
-	* [Setting props](react-props/7.2.md)
-	* [Getting props](react-props/7.3.md)
-	* [Setting default props](react-props/7.4.md)
-	* [Validating props](react-props/7.5.md)
-	* [Props more than strings](react-props/7.6.md)
-	* [Transferring props](react-props/7.7.md)
+    * [What Are Props?](react-props/7.1.md)
+	* [Setting Props](react-props/7.2.md)
+	* [Getting Props](react-props/7.3.md)
+	* [Setting Default Props](react-props/7.4.md)
+	* [Validating Props](react-props/7.5.md)
+	* [Props More Than Strings](react-props/7.6.md)
+	* [Transferring Props](react-props/7.7.md)
 * [React State](react-state/react-state.md)
-    * [What is state?](react-state/8.1.md)
-	* [Setting state](react-state/8.2.md)
-	* [Getting state](react-state/8.3.md)
-	* [Setting initial state](react-state/8.4.md)
-    * [state v.s. props](react-state/8.5.md)
+    * [What Is State?](react-state/8.1.md)
+	* [Setting State](react-state/8.2.md)
+	* [Getting State](react-state/8.3.md)
+	* [Setting Initial State](react-state/8.4.md)
+    * [State vs. Props](react-state/8.5.md)
 * [Advanced React components](advanced-react-components.md)

basic-react-components/6.1.md

@@ -1,9 +1,9 @@
-# What is a React component?
+# What Is a React Component?
 
 The next section will provide a mental model around the nature of a React component and cover details around creating React components.
 
-Typically a single view of a user interface (e.g. the tree) is divided up into logical chunks (e.g. branches). The tree becomes the starting component (e.g. a layout component) and then each chunk in the UI will become a sub-component that can be divided further into sub components (i.e. sub-branches). This not only keeps the UI organized but it also allows data and state changes to logically flow from the tree, to branches, then sub branches.
+Typically a single view of a user interface (e.g., the tree) is divided up into logical chunks (e.g., branches). The tree becomes the starting component (e.g., a layout component) and then each chunk in the UI will become a sub-component that can be divided further into sub components (i.e., sub-branches). This not only keeps the UI organized but it also allows data and state changes to logically flow from the tree, to branches, then sub branches.
 
-If this description of React components is cryptic then I would suggest that you examine any application interface and mentally start dividing the UI into logical chunks. Those chunks potentially are components. React components are the programatic abstraction (i.e. events, state changes, DOM changes) making it possible to literally create these chunks and sub-chunks. For example, a lot of application UI's will have a layout component as the top component in a UI view. This component will contain several sub-components, like maybe, a search component or a menu component. The search component can then be divided further into sub-components. Maybe the search input is a separate component from the button that invokes the search. As you can see, a UI can quickly become a tree of components. Today, software UI's are typically created by crafting a tree of very simple [single responsibility](https://en.wikipedia.org/wiki/Single_responsibility_principle) components. React provides the means to create these components via the `React.createClass()` function (or, `React.Component` if using ES6 classes). The `React.createClass()` function takes in a configuration object and returns a React component instance.
+If this description of React components is cryptic then I would suggest that you examine any application interface and mentally start dividing the UI into logical chunks. Those chunks potentially are components. React components are the programatic abstraction (i.e., events, state changes, DOM changes) making it possible to literally create these chunks and sub-chunks. For example, a lot of application UI's will have a layout component as the top component in a UI view. This component will contain several sub-components, like maybe, a search component or a menu component. The search component can then be divided further into sub-components. Maybe the search input is a separate component from the button that invokes the search. As you can see, a UI can quickly become a tree of components. Today, software UI's are typically created by crafting a tree of very simple [single responsibility](https://en.wikipedia.org/wiki/Single_responsibility_principle) components. React provides the means to create these components via the `React.createClass()` function (or, `React.Component` if using ES6 classes). The `React.createClass()` function takes in a configuration object and returns a React component instance.
 
-A React component is basically any part of a UI that can contain React nodes (via `React.createElement()` or JSX). I spent a lot of time up front talking about React nodes so that the ingredients of a React component would be firmly understood. Sounds simple until one realizes that React components can contained other React sub-components which can result in a complex tree of components. This is not unlike the idea that React nodes can contain other React nodes in a Virtual DOM. It might hurt your brain, but if you think hard about it all a component does it wraps itself around a logical set of branches from a tree of nodes. In this sense, you define an entire UI from components using React but the result is a tree of React nodes that can easily be translated to something like an HTML document (i.e. tree of DOM nodes).
+A React component is basically any part of a UI that can contain React nodes (via `React.createElement()` or JSX). I spent a lot of time up front talking about React nodes so that the ingredients of a React component would be firmly understood. Sounds simple until one realizes that React components can contained other React sub-components which can result in a complex tree of components. This is not unlike the idea that React nodes can contain other React nodes in a Virtual DOM. It might hurt your brain, but if you think hard about it all a component does it wraps itself around a logical set of branches from a tree of nodes. In this sense, you define an entire UI from components using React but the result is a tree of React nodes that can easily be translated to something like an HTML document (i.e., tree of DOM nodes).

basic-react-components/6.2.md

@@ -1,6 +1,6 @@
 # Creating React components
 
-A React component that will potentially contain `state` can be created by calling the `React.createClass()` function. This function takes one argument object used to specify the details of the component. The available component configuration options are listed below (aka component specifications).
+A React component that will potentially contain `state` can be created by calling the `React.createClass()` function. This function takes one argument object used to specify the details of the component. The available component configuration options are listed below (a.k.a., component specifications).
 
 <table>
   <tr>
@@ -80,7 +80,7 @@ The following code is an example of creating a `Timer` React component from Reac
 
 Make sure you read the comments in the code.
 
-[source code](https://jsfiddle.net/12u58fjb/#tabs=js,result,html,resources)
+> [source code](https://jsfiddle.net/12u58fjb/#tabs=js,result,html,resources)
 
 It might look like a lot of code but all that is going on is passing the createClass function a configuration object containing 5 properties (`getInitialState`, `tick`, `componentDidMount`, `componentWillUnmount`, `render`).
 

basic-react-components/6.3.md

@@ -1,16 +1,16 @@
-# Components return one node/component
+# Components Return One Node/Component
 
 The `render` configuration value defined when creating a component should return only one React node (or, component). This one node/component can contained any number of children. In the code below the `<reactNode>` is the starting node. In side of this node any number of sibling and child nodes can be returned.
 
-[source code](https://jsfiddle.net/fv26rjdL/#tabs=js,result,html,resources)
+> [source code](https://jsfiddle.net/fv26rjdL/#tabs=js,result,html,resources)
 
 Note that if you want to return React nodes on more than one line (taking advantage of whitespace) you will have to surround the returned value in `()`.
 
-[source code](https://jsfiddle.net/e2awasnk/#tabs=js,result,html,resources)
+> [source code](https://jsfiddle.net/e2awasnk/#tabs=js,result,html,resources)
 
 An error will occur if more than one starting React node is attempted to be return. If you think about it, the error occurs because returning two `React.createElement()` functions isn't possible with JavaScript.
 
-[source code](https://jsfiddle.net/xe5kkpub/#tabs=js,result,html,resources)
+> [source code](https://jsfiddle.net/xe5kkpub/#tabs=js,result,html,resources)
 
 Thus, the above code will result in the following error:
 
@@ -29,11 +29,11 @@ Commonly, developers will add a wrapping element `<div>` element to avoid this e
 
 This issue also concerns components. Just like React nodes, if you are returning a component, only one starting component can be returned but that component can have unlimited children.
 
-[source code](https://jsfiddle.net/o0fqta42/#tabs=js,result,html,resources)
+> [source code](https://jsfiddle.net/o0fqta42/#tabs=js,result,html,resources)
 
 If you return two sibling components, the same error will occur.
 
-[source code](https://jsfiddle.net/3968zzv3/#tabs=js,result,html,resources)
+> [source code](https://jsfiddle.net/3968zzv3/#tabs=js,result,html,resources)
 
 ```
 VM7370 babel.js:62789 Uncaught SyntaxError: embedded: Adjacent JSX elements must be wrapped in an enclosing tag (10:2)

basic-react-components/6.4.md

@@ -1,13 +1,13 @@
-# Creating stateless function components
+# Creating Stateless Function Components
 
 When a component is purely a result of `props` alone the component can be written as a pure function avoiding the need to create a React component instance.
 
-[source code](https://jsfiddle.net/5nzpxyuu/#tabs=js,result,html,resources)
+> [source code](https://jsfiddle.net/5nzpxyuu/#tabs=js,result,html,resources)
 
 This is typically referred to as a stateless function component.
 
-Stateless function components can't be passed component options (i.e. `render`, `componentWillUnmount`, etc..). However `.propTypes` and `.defaultProps` can be set as properties on the function.
+Stateless function components can't be passed component options (i.e., `render`, `componentWillUnmount`, etc.). However `.propTypes` and `.defaultProps` can be set as properties on the function.
 
 The code example below demonstrates a stateless function component making use of `.propTypes` and `.defaultProps`.
 
-[source code](https://jsfiddle.net/tpvjyp34/#tabs=js,result,html,resources)
+> [source code](https://jsfiddle.net/tpvjyp34/#tabs=js,result,html,resources)

basic-react-components/6.5.md

@@ -1,14 +1,14 @@
-# Referring to a component instance
+# Referring to a Component Instance
 
-When a component is `render`'ed', a React component instance is created from the passed configuration options. One can gain access to this instance and it's properties (e.g. `this.props`) and methods (e.g. `this.setState`) in two ways.
+When a component is `render`'ed', a React component instance is created from the passed configuration options. One can gain access to this instance and it's properties (e.g., `this.props`) and methods (e.g., `this.setState`) in two ways.
 
 The first way is by using the `this` keyword from within a configuration function option. In the code example below all of the `console.log(this)` statements will refer to the component instance.
 
-[source code](https://jsfiddle.net/codylindley/xkz0ph2d/4/#tabs=js,result,html,resources)
+> [source code](https://jsfiddle.net/codylindley/xkz0ph2d/4/#tabs=js,result,html,resources)
 
 The other way to gain a reference to a component instance involves making use of the return value from calling `ReactDOM.render()`. In other words, the `ReactDOM.render()` function will return a reference to the top most rendered component.
 
-[source code](https://jsfiddle.net/codylindley/vavk9b5t/2/#tabs=js,result,html,resources)
+> [source code](https://jsfiddle.net/codylindley/vavk9b5t/2/#tabs=js,result,html,resources)
 
 #### Notes
 

myIntro.md

@@ -1,6 +1,6 @@
 # React Enlightenment [DRAFT]
 
-Learn React in the terse cookbook style found with previous Enlightenment titles (i.e. [jQuery Enlightenment](http://jqueryenlightenment.com/), [JavaScript Enlightenment](http://javascriptenlightenment.com/), [DOM Enlightenment](http://domenlightenment.com/))
+Learn React in the terse cookbook style found with previous Enlightenment titles (i.e., [jQuery Enlightenment](http://jqueryenlightenment.com/), [JavaScript Enlightenment](http://javascriptenlightenment.com/), [DOM Enlightenment](http://domenlightenment.com/))
 
 ***
 

react-advanced-setup/2.1.md

@@ -1,3 +1,3 @@
-## title
+# Title [Use Title-Casing]
 
-### sub 
+## Sub [Use Title-Casing]