218 react minor edits

src/react/2-intro-to-jsx.md

@@ -35,7 +35,7 @@ Don't worry if some of this syntax is new to you, we will be going into more det
 
 This is not an accident. It's mandatory. Consider how the component is being used directly inside the `App` component, right next to normal HTML. If a component name is all lowercase, React assumes that it is a normal HTML tag (like `span`, or `div`). So the first letter must be capital so that it can be differentiated from a normal HTML element.
 
-By and large, the React community has centered around the convention of using (PascalCase)[https://techterms.com/definition/pascalcase] to name `components`. As far as React is concerned though, your component simply needs to begin with a capital letter to be treated as a custom component.
+By and large, the React community has centered around the convention of using [PascalCase](https://techterms.com/definition/pascalcase) to name `components`. As far as React is concerned though, your component simply needs to begin with a capital letter to be treated as a custom component.
 
 > To drive the point home further, Imagine we created a component named lowercase `div`. In this case, React wouldn't be able to tell the difference between a normal div and our component `div` since we use them identically. Hence the capitalization.
 

src/react/5-styling-in-react.md

@@ -44,7 +44,7 @@ Although this is the simplest way to add styles, it shouldn't be counted out. Us
 
 One of the downsides of this approach is the performance cost associated with making and interpolating these style objects. Though, for many common layouts you will likely never run into performance concerns. In the off-chance that you are rendering hundreds / thousands of components (nested tables, etc...), it would be faster to use a stylesheet.
 
-That being said there are libraries that mitigate this speed concern while still using inline styling (namely `emotion`). They perform a build step conversion that takes your inline styles and generates stylesheets for them.
+That being said there are libraries that mitigate this speed concern while still using inline styling (namely [emotion](https://emotion.sh/docs/introduction)). They perform a build step conversion that takes your inline styles and generates stylesheets for them.
 
 ## External Styles
 
@@ -161,9 +161,9 @@ Note that the `classnames` library can be used in conjunction with CSS modules a
 
 The styled components philosophy is that everything is a component. Instead of separating your CSS and your JS, they become integrated into one single entity. So instead of loading styles into a component from some external source, the styles are actually built into the component itself, and can be configured using props/state.
 
-In a styled components implementation, a `Button` component for example, might take a `color` prop, or a `fontSize` prop to determine its style. This approach is closely integrated with React, and utilizes the built-in React features (props/state) more than any other.
+In a styled components implementation, a `Button` component for example, might take a `color` prop or a `fontSize` prop to determine its style. This approach is closely integrated with React, and utilizes the built-in React features (props/state) more than any other.
 
-In the code below, we're using the [emotion](https://emotion.sh/docs/introduction) library to create a styled `Button` component. The syntax is a bit foreign, but this is essentially creating a `<button>` component which maps its props to styles. For example, the button below accepts a `color` and an `outline` prop, which are used to generate the styling.
+In the code below, we're using the [emotion](https://emotion.sh/docs/introduction) library to create a styled `Button` component. The syntax is a bit foreign, but this is essentially creating a `<button>` component which maps its props to styles. The button below accepts a `color` and an `outline` prop, which are used to generate the styling.
 
 ```js
 import styled from '@emotion/styled';

src/react/9-managing-complex-state.md

@@ -11,7 +11,7 @@ In React, `props` are the "arguments" that are passed to our component. Alternat
 
 Use `state` for internal variables, which when changed, should re-render the component. Examples include the value of a text box, whether or not a modal is open, and the current tab selection.
 
-Using functional components, the `useState()` hook provides a value and setter capable of holding any data type. (We will explain hooks in more detail in the coming lessons. For now, don't worry about what exactly a hook is.) This allows us to hold simple variables such as:
+Using functional components, the `useState()` hook provides a value and setter capable of holding any data type. This allows us to hold simple variables such as:
 
 ```js
 const [count, setCount] = useState(0);
@@ -126,7 +126,7 @@ function WrapperContainer() {
 }
 ```
 
-@highlight 3,5,10-14,17
+@highlight 3,5,10-14
 
 Using this data in the `DisplayComponent` is simple. Use the props to render the component and call `setUnsavedText` on changes.
 
@@ -153,7 +153,9 @@ Next, let's wire up that button. We'll define an `onButtonClick` callback to han
 
 ```jsx
 function WrapperContainer() {
+  // define the savedText to be shown
   const [savedText, setSavedText] = useState('');
+  // create a holder for unsaved text
   const [unsavedText, setUnsavedText] = useState('');
 
   function onButtonClick() {
@@ -180,7 +182,7 @@ function WrapperContainer() {
 }
 ```
 
-@highlight 2-3,5-10,15-19,22
+@highlight 7-12, 24
 
 Lastly, update the `ButtonComponent` to use our new callback.
 
@@ -255,11 +257,13 @@ ReactDOM.render(<WrapperContainer />, document.getElementById('root'));
 ```
 
 @codepen react
-@highlight 5,7,9-14,19-23,26,32,33-36,40,42,47,49
+@highlight 2-5,7-12,17-21,24,30-34,38,40,47-49
 
 ## What data should be kept in React state?
 
-There is no "right" answer for what data should be stored in state. Applications with simple API requirements may keep everything in state objects. Other apps may opt to store nearly everything in a separate global state management library.
+There is no "right" answer for what data should be stored in state. Applications with simple API requirements may keep everything in state objects. Other apps may opt to store nearly everything in a separate global state management library such as Redux or Apollo.
+
+For a purely React method of maintaining and exposing state accross your application, check out the [next lesson on Context.](context-hooks.html)
 
 ## Next Steps