Merge pull request FrontendMasters#32 from AllThingsSmitty/master

Applied formatting to abbreviations

Author: codylindley

basic-react-components/6.2.md

@@ -86,7 +86,7 @@ It looks like a lot of code. However, the bulk of the code simply involves creat
 
 Notice that `Timer` is capitalized. When creating custom React components you need to capitalize the name of the component. Additionally, the value `this` among the configuration options refers to the component instance created. We'll discuss the component API in more detail at the end of this chapter. For now, just meditate on the configuration options available when defining a React component and how a reference to the component is achieved using the `this` keyword. Also note, that in the code example above I added my own custom instance method (i.e., `tick`) during the creation of the `<Timer/>` component.
 
-Once a component is mounted (i.e created) you can use the component API. The api contains four methods.
+Once a component is mounted (i.e., created) you can use the component API. The api contains four methods.
 
 <table>
 	<tr>

basic-react-components/6.9.md

@@ -20,5 +20,5 @@ A common use for `ref`'s are to store a reference on the component instance. In
 * You might see a `ref` attribute with a string instead of a function; this is called a string `ref` and will likely be deprecated in the future. Function `ref`s are preferred.
 * The `ref` callback function is called immediately after the component is mounted.
 * References to a component instance allow one to call custom methods on the component if any are exposed when defining it.
-* Writing refs with inline function expressions means React will see a different function object on every update, `ref` will be called with null immediately before it's called with the component instance. I.e., When the referenced component is unmounted and whenever the `ref` changes, the old `ref` will be called with `null` as an argument.
+* Writing refs with inline function expressions means React will see a different function object on every update, `ref` will be called with null immediately before it's called with the component instance. I.e., when the referenced component is unmounted and whenever the `ref` changes, the old `ref` will be called with `null` as an argument.
 * React makes two suggestions when using refs: "Refs are a great way to send a message to a particular child instance in a way that would be inconvenient to do via streaming Reactive props and state. They should, however, not be your go-to abstraction for flowing data through your application. By default, use the Reactive data flow and save refs for use cases that are inherently non-reactive." and "If you have not programmed several apps with React, your first inclination is usually going to be to try to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. Placing the state there often eliminates any desire to use refs to "make things happen" – instead, the data flow will usually accomplish your goal."

react-basic-setup/3.2.md

@@ -48,7 +48,7 @@ More will be said about JSX in the JSX chapter. For now, just realize that JSX i
 
 Normally, Babel is setup to automatically process your JavaScript files during development using the Babel CLI tool (e.g., via something like [webpack](https://webpack.github.io/)). However, it is possible to use Babel directly in the browser by way of a script include. And since we are just getting started we'll avoid CLI tools or learning a module loader in order to learn React.
 
-The Babel project unfortunately, as of Babel 6, no longer provides the script file needed (i.e., `browser.js`) to transform JSX code to ES5 code in the browser. Thus you will have to use an older version of Babel (i.e., 5.8.23) that provides the needed file (i.e `browser.js`) for transforming JSX/ES* in the browser.
+The Babel project unfortunately, as of Babel 6, no longer provides the script file needed (i.e., `browser.js`) to transform JSX code to ES5 code in the browser. Thus you will have to use an older version of Babel (i.e., 5.8.23) that provides the needed file (i.e., `browser.js`) for transforming JSX/ES* in the browser.
 
 ### Using `browser.js` (Babel 5.8.23) to Transform JSX in the Browser
 

react-jsx/5.4.md

@@ -35,4 +35,4 @@ Nothing that complicated is going on here once you realize that the brackets bas
 
 #### Notes
 
-* If you have to escape brackets (i.e. you want brackets in a string) use `{'{}'}`.
+* If you have to escape brackets (i.e., you want brackets in a string) use `{'{}'}`.

react-nodes/4.2.md

@@ -34,7 +34,7 @@ ReactDOM.render(reactNodeLi, document.getElementById('app'));
 
 The above code, loosely stated, would invoke the following:
 
-1. create a virtual DOM constructed from the React element node passed in (i.e. `reactNodeLi`)
+1. create a virtual DOM constructed from the React element node passed in (i.e., `reactNodeLi`)
 2. use the virtual DOM to re-construct a real DOM branch
 3. inserted real DOM branch (i.e., `<li id="li1">one</li>`) into the DOM as a child node of `<div id="app"></div>`.  
 

react-nodes/4.4.md

@@ -18,12 +18,12 @@ var reactNodeLi = React.createElement('li',
     foo:'bar',
     id:'li1',
     //note use of JS class property representing class attribute below
-    //i.e., className
+    //e.g., className
     className:'blue',
     'data-test':'test',
     'aria-test':'test',
     //note use of JS camel-cased CSS property below
-    //i.e., backgroundColor
+    //e.g., backgroundColor
     style:{backgroundColor:'red'}
 },
 'text'

react-props/7.6.md

@@ -22,7 +22,7 @@ Note however, the commented below will not cause an error:
 ReactDOM.render(<MyComponent propArray={[1,2]} propFunc={function(){return 3;}} />, document.getElementById('app'));
 ```
 
-React offers several built in validators (e.g.` React.PropTypes[VALIDATOR]`) which I outline below (Note that creating custom validators are possible as well.):
+React offers several built in validators (e.g., ` React.PropTypes[VALIDATOR]`) which I outline below (Note that creating custom validators are possible as well.):
 
 ####Basic type validators:
 

react-state/8.1.md

@@ -9,7 +9,7 @@ According to the React documentation state should:
 Things to keep in mind about React component state:
 
 1. If a component has a state, a default state should be providing using `getInitialState()`
-2. State changes are typically how you start the re-rendering of a component and all sub components (i.e., children, grandchildren, great grand chidlren etc...).
+2. State changes are typically how you start the re-rendering of a component and all sub components (i.e., children, grandchildren, great grand chidlren, etc.).
 3. You inform a component of a state change by using `this.setState()` to set a new state.
 4. A state change merges new data with old data that is already contained in the state (i.e., `this.state`)
 4. A state change internally deals with calling re-renders. You should never have to call `this.render()` directly.

what-is-react.md

@@ -1,6 +1,6 @@
 # What is React?
 
-React is a JavaScript tool that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. It provides the means to declaratively define and divide a UI into UI components (a.k.a., React components) using HTML-like nodes called React nodes. React nodes eventually get transformed into a format for UI rendering (e.g., HTML/DOM, canvas, svg, etc...).
+React is a JavaScript tool that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. It provides the means to declaratively define and divide a UI into UI components (a.k.a., React components) using HTML-like nodes called React nodes. React nodes eventually get transformed into a format for UI rendering (e.g., HTML/DOM, canvas, svg, etc.).
 
 I could ramble on trying to express in words what React is, but I think it  best to just show you. What follows is a whirlwind tour of React and React components from thirty thousand feet. Don't try and figure out all the details yet as I describe React in this section. The entire book is meant to unwrap the details showcased in the following overview. Just follow along grabbing a hold of the big concepts for now.