Merge pull request FrontendMasters#36 from bernfarr/FrontendMasters/m…

…aster

Frontend masters/master

react-nodes/4.1.md

@@ -1,11 +1,11 @@
 # What Is a React Node?
 
-The primary type or value that is created when using React is what is known as a React node. A React node is defined as:
+The primary type or value that is created when using React is known as a React node. A React node is defined as:
 
  > a light, stateless, immutable, virtual representation of a DOM node.
 
-React nodes are thus, not [real DOM nodes](http://domenlightenment.com/#1) (e.g., [text](http://domenlightenment.com/#7) or [element](http://domenlightenment.com/#3) nodes) themselves, but a representation of a potential DOM node. The representation is considered the virtual DOM. In a nutshell, React is used to define a virtual DOM using React nodes, that fuel React components, that can eventually be used to create a real DOM structured or other structures (e.g., [React Native](https://facebook.github.io/react-native/)).
+React nodes are not [real DOM nodes](http://domenlightenment.com/#1) (e.g., [text](http://domenlightenment.com/#7) or [element](http://domenlightenment.com/#3) nodes) themselves, but a representation of a potential DOM node. The representation is considered the virtual DOM. In a nutshell, React is used to define a virtual DOM using React nodes, that fuel React components, that can eventually be used to create a real DOM structured or other structures (e.g., [React Native](https://facebook.github.io/react-native/)).
 
-React nodes can be created using JSX or JavaScript. In this chapter we'll look at creating React nodes using JavaScript alone. No JSX yet. I believe that one must first learn what JSX is concealing in order to understand JSX.
+React nodes can be created using JSX or JavaScript. In this chapter we'll look at creating React nodes using JavaScript alone. No JSX yet. I believe that you should first learn what JSX is concealing in order to understand JSX.
 
-You might be tempted to skip this chapter because you already know that you will be using JSX. I'd suggest reading this chapter so you are aware of what JSX is doing for you. This is likely the most important chapter in the book to Grok.
+You might be tempted to skip this chapter because you already know that you will be using JSX. I'd suggest reading this chapter so you are aware of what JSX is doing for you. This is likely the most important chapter in the book to [Grok](https://en.wikipedia.org/wiki/Grok).

react-nodes/4.2.md

@@ -1,6 +1,6 @@
 # Creating React Nodes
 
-In most cases developers using React will favor JSX and use it to create React nodes. Regardless of this fact in this chapter we are going to examine how React nodes can be created without JSX, using only JavaScript. The next chapter will discuss creating React nodes using JSX.
+In most cases developers using React will favor JSX and use it to create React nodes. Despite this, in this chapter we are going to examine how React nodes can be created without JSX, using only JavaScript. The next chapter will discuss creating React nodes using JSX.
 
 Creating React nodes using JavaScript is as simple as calling the `React.createElement(type,props,children)` function and passing it a set of arguments defining an actual DOM node (e.g., type = an html element e.g., `<li>` or custom element e.g., `<my-li>`).
 
@@ -24,21 +24,25 @@ Below I use the `React.createElement()` function to create a virtual DOM represe
 var reactNodeLi = React.createElement('li', {id:'li1'}, 'one');
 ```
 
-Notice that the first argument defines which HTML element I want to represent. The second argument defines the attributes/props on the `<li>`.  And, the third argument defines what the node inside of the element will be. In this case, I am simply placing a child text node (i.e., `'one'`) inside of the `<li>`. Note that, the last argument, that becomes a child of the node being created can be a React text node, a React element node, or even a React component instance.
+Notice that the first argument defines the HTML element I want to represent. The second argument defines the attributes/props on the `<li>`.  And the third argument defines what the node inside of the element will be. In this case, I am simply placing a child text node (i.e., `'one'`) inside the `<li>`. The last argument that becomes a child of the node being created can be 
 
-At this point all I've done is create a React element node containing a React text node that I have stored into the variable `reactNodeLi`. To create a virtual DOM next we have to actually render the React element node to a real DOM. To do this we use the `ReactDOM.render()` function.
+* A React text node
+* A React element node, or 
+* A React component instance.
+
+At this point all I've done is create a React element node containing a React text node that I have stored into the variable `reactNodeLi`. To create a virtual DOM we have to actually render the React element node to a real DOM. To do this we use the `ReactDOM.render()` function.
 
 ```js
 ReactDOM.render(reactNodeLi, document.getElementById('app'));
 ```
 
-The above code, loosely stated, would invoke the following:
+The above code, loosely stated, invokes the following:
 
-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>`.  
+1. Create a virtual DOM constructed from the React element node passed in (`reactNodeLi`)
+2. Use the virtual DOM to re-construct a real DOM branch
+3. Insert the real DOM branch (i.e., `<li id="li1">one</li>`) into the DOM as a child node of `<div id="app"></div>`.  
 
-In other words, the HTML DOM would change from this:
+In other words, the HTML DOM changes from this:
 
 ```html
 <div id="app"></div>
@@ -53,16 +57,17 @@ to this:
 </div>
 ```
 
-This was a rather simplistic example. Using `React.createElement()` a complex structure can be created as well. For example, below I'm using `React.createElement()` to create a bunch of React nodes representing an HTML unordered list of text (i.e., `<ul>`).
+This was a rather simplistic example. Using `React.createElement()` a complex structure can be created as well. For example, below I'm using `React.createElement()` to create a bunch of React nodes representing an HTML unordered list of text words (i.e., `<ul>`).
 
 ```js
-// create React element <li>'s
-var rElmLi1 = React.createElement('li', {id:'li1'}, 'one');
-var rElmLi2 = React.createElement('li', {id:'li2'}, 'two');
-var rElmLi3 = React.createElement('li', {id:'li3'}, 'three');
-
-//create <ul> React element and add child React <li> elements to it
-var reactElementUl = React.createElement('ul', {className:'myList'}, rElmLi1,rElmLi2,rElmLi3);
+// Create React element <li>'s
+var rElmLi1 = React.createElement('li', {id:'li1'}, 'one'),
+    rElmLi2 = React.createElement('li', {id:'li2'}, 'two'),
+    rElmLi3 = React.createElement('li', {id:'li3'}, 'three');
+
+// Create <ul> React element and add child
+// React <li> elements to it
+var reactElementUl = React.createElement('ul', {className:'myList'}, rElmLi1, rElmLi2, rElmLi3);
 ```
 
 Before rendering the unordered list to the DOM I think it is worth showing that the above code can be simplified by using the `React.createElement()` in place of variables. This also demonstrates how a hierarchy or DOM branch can be defined using JavaScript.
@@ -72,9 +77,9 @@ var reactElementUl = React.createElement(
     'ul', {
         className: 'myList'
     },
-        React.createElement('li', {id: 'li1'},'one'),
-        React.createElement('li', {id: 'li2'},'two'),
-        React.createElement('li', {id: 'li3'},'three')
+    React.createElement('li', {id: 'li1'}, 'one'),
+    React.createElement('li', {id: 'li2'}, 'two'),
+    React.createElement('li', {id: 'li3'}, 'three')
 );
 ```
 
@@ -96,8 +101,10 @@ It should be obvious that React nodes are just JavaScript objects in a tree that
 
 #### Notes
 
-* The `type` argument passed to `React.createElement(type,props,children)` can be a string indicating a standard HTML element (e.g., `'li'` = `<li></li>`), a custom element (e.g., `'foo-bar'` = `<foo-bar></foo-bar>`, or a React component instance (i.e., an instance of `React.createClass()`.
-* These are the standard HTML elements that React supports (i.e. these elements passed as a string `type` to `createElement()` will create the associating standard HTML element in the DOM):
+* The `type` argument passed to `React.createElement(type, props, children)` can be 
+ * A string indicating a standard HTML element (e.g., `'li'` = `<li></li>`), or 
+ * A custom element (e.g., `'foo-bar'` = `<foo-bar></foo-bar>`, or a React component instance (i.e., an instance of `React.createClass()`.
+* These are the standard HTML elements that React supports (i.e. these elements passed as a string `type` to `createElement()`). They create the associating standard HTML element in the DOM):
 
 ```html
 a abbr address area article aside audio b base bdi bdo big blockquote body br

react-nodes/4.3.md

@@ -6,7 +6,7 @@ In the code example below, using `ReactDOM.render()`, the `'<li>'` and `'<foo-ba
 
 > [source code](https://jsfiddle.net/LLz4p3ox/#tabs=js,result,html,resources)
 
-Once rendered to the DOM, the updated HTML will look like so:
+Once rendered to the DOM, the updated HTML will be:
 
 ```html
 <body>
@@ -19,7 +19,7 @@ The `ReactDOM.render()` function is initially how you get the React nodes to the
 
 #### Notes
 
-* Any DOM nodes inside of the DOM element in which you are rendering to will be replaced (i.e., removed).
+* Any DOM nodes inside of the DOM element which you are rendering into will be replaced (i.e., removed).
 * `ReactDOM.render()` does not modify the DOM element node in which you are rendering React. However, when rendering React wants complete ownership of the node. You should not add children to or remove children from a node in which React inserts a React node/component.
 * Rendering to an HTML DOM is only one option with React, [other rendering APi's are available](https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring). For example, it is also possible to render to a string (i.e., `ReactDOMServer.renderToString()`) on the server-side.
-* Re-rendering to the same DOM element will only update the current child nodes if a change (i.e., diff) has occurred or a new child node has been added.
+* Re-rendering to the same DOM element will only update the current child nodes if a change has been made or a new child node has been added.

react-nodes/4.4.md

@@ -5,7 +5,7 @@ The second argument that is passed to `React.createElement(type, props, children
 Props take on several roles:
 
 1. Props can become HTML attributes. If a prop matches a known HTML attribute then it will be added to the final HTML element in the DOM.
-2. Props passed to `createElement()` become values stored in a `prop` object as an instance property of `React.createElement()` instances  (i.e., `[INSTANCE].props.[NAME OF PROP]`). Props by enlarge are used to input values into components.
+2. Props passed to `createElement()` become values stored in a `prop` object as an instance property of `React.createElement()` instances  (i.e., `[INSTANCE].props.[NAME OF PROP]`). Props are normally used to input values into components.
 3. A few special props have side effects (e.g., [`key`](https://facebook.github.io/react/docs/multiple-components.html#dynamic-children), [`ref`](https://facebook.github.io/react/docs/more-about-refs.html), and [`dangerouslySetInnerHTML`](https://facebook.github.io/react/tips/dangerously-set-inner-html.html))
 
 In one sense you can think of props as the configuration options for React nodes and in another sense you can think of them as HTML attributes.
@@ -14,41 +14,44 @@ In the code example below I am defining a React `<li>` element node with five pr
 
 ```js
 var reactNodeLi = React.createElement('li',
-{
-    foo:'bar',
-    id:'li1',
-    //note use of JS class property representing class attribute below
-    //e.g., className
-    className:'blue',
-    'data-test':'test',
-    'aria-test':'test',
-    //note use of JS camel-cased CSS property below
-    //e.g., backgroundColor
-    style:{backgroundColor:'red'}
-},
-'text'
+    {
+        foo: 'bar',
+        id: 'li1',
+        // Note the use of the JS className property to change the 
+        // class attribute below
+        className: 'blue',
+        'data-test': 'test',
+        'aria-role' :'listitem',
+        // Note use of JS camel-cased CSS property backgroundColor below
+        style: {backgroundColor:'red'}
+    },
+    'text'
 );
 ```
 
 When the above code is rendered to an HTML page the actual HTML created will look like:
 
 ```html
-<li id="li1" data-test="test" class="blue" aria-test="test" style="background-color:red;" data-reactid=".0">text</li>
+<li id="li1" data-test="test" class="blue" aria-role="listitem" style="background-color:red;" data-reactid=".0">text</li>
 ```
 
-What you need to realize is only [standard HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes), `data-*`, and `aria-*` get passed to the real DOM from the Virtual DOM.
+What you need to realize is only the following attributes get passed to the real DOM from the Virtual DOM
+
+* [Standard HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes),
+* [Custom data attributes `data-*`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*), and 
+* [Accessibility attributes `aria-*`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)
 
 The `foo` attribute/prop does not show up in the real DOM. This non-standard HTML attribute is available as an instance property of the created `li` React node instance. (e.g., `reactNodeLi.props.foo`).
 
 > [source code](https://jsfiddle.net/codylindley/8ca0z80m/1/#tabs=js,result,html,resources)
 
-React attributes/props not only translate to real HTML attributes props but can also become configuration values that can be passed to React components. This aspect of props will be covered in the React component props chapter. For now simply realize that passing a React node a prop is different from defining a prop on a component to be used as configuration input within a component.
+React attributes/props not only translate to real HTML attributes props, they become configuration values that are passed to React components. This aspect of props will be covered in the React component props chapter. For now simply realize that passing a prop into a React node is different from defining a prop on a component to be used as configuration input within a component.
 
 #### Notes
 
 * Leaving an attribute/prop blank results in that attribute value becoming true (e.g., `id=""` becomes `id="true"` and `test` becomes `test="true"`)
 * If an attribute/prop is duplicated the last one defined wins.
-* If you pass props/attributes to native HTML elements that do not exist in the HTML specification, React will not render them. However, if you use a custom element (i.e., not a standard HTML element) then arbitrary/custom attributes will be added to custom elements (e.g., `<x-my-component custom-attribute="foo" />`).
+* If you pass props/attributes to native HTML elements that do not exist in the HTML specification React will not render them. However, if you use a custom element (i.e., not a standard HTML element) then arbitrary/custom attributes will be added to custom elements (e.g., `<x-my-component custom-attribute="foo"/>`).
 * The `class` attribute has to be written `className`
 * The `for` attribute has to be written `htmlFor`
 * The `style` attribute takes a reference to an object of [camel-cased style properties](https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties)

react-nodes/4.5.md

@@ -5,9 +5,9 @@ To apply inline CSS to a React node you have to pass a `style` attribute/prop wi
 For example, in the code below I am passing a `style` prop referencing (i.e., `inlineStyle`) an object containing CSS properties and values:
 
 ```js
-var inlineStyles = {backgroundColor:'red', fontSize:20};
+var inlineStyles = {backgroundColor: 'red', fontSize: 20};
 
-var reactNodeLi =  React.createElement('div',{style:inlineStyles}, 'styled')
+var reactNodeLi =  React.createElement('div',{style: inlineStyles}, 'styled')
 
 ReactDOM.render(reactNodeLi, document.getElementById('app1'));
 ```
@@ -16,14 +16,14 @@ The resulting HTML will look like so:
 
 ```html
 <div id="app1">
-  <div style="background-color:red;font-size:20px;" data-reactid=".0">styled</div>
+  <div style="background-color: red;font-size: 20px;" data-reactid=".0">styled</div>
 </div>
 ```
 
 Note two things in the JavaScript code above:
 
 1. I didn't have to add the "px" to the `fontSize` value because React did it for me.
-2. When writing CSS properties in JavaScript one has to use the [camelCased version of the CSS property](https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle) (e.g., `backgroundColor` not `background-color`).
+2. When writing CSS properties in JavaScript you have to use the [camelCased version of the CSS property](https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle) (e.g., `backgroundColor` not `background-color`).
 
 #### Notes
 
@@ -32,6 +32,7 @@ Note two things in the JavaScript code above:
 * When specifying a pixel value React will automatically append the string "px" for you after your number value except for the following properties:
 
 ```html
-columnCount fillOpacity flex flexGrow flexShrink fontWeight lineClamp lineHeight
-opacity order orphans strokeOpacity widows zIndex zoom
+columnCount fillOpacity flex flexGrow flexShrink fontWeight 
+lineClamp lineHeight opacity order orphans strokeOpacity 
+widows zIndex zoom
 ```

react-nodes/4.6.md

@@ -4,18 +4,18 @@ React provides built-in shortcuts for creating commonly used HTML element nodes.
 
 > A ReactElement-factory is simply a function that generates a ReactElement with a particular type property.
 
-Using a built-in element factory (i.e., `React.DOM.li()`), the React element node `<li>one</li>` can be created like so:
+Using a built-in element factory (i.e., `React.DOM.li()`), the React element node `<li id="li1">one</li>` can be created like so:
 
 ```js
 // uses React.DOM.li(props, children);
-var reactNodeLi = React.DOM.li({id:'li1'}, 'one');
+var reactNodeLi = React.DOM.li({id: 'li1'}, 'one');
 ```
 
 instead of using:
 
 ```js
 // uses React.createElement(type, prop, children)
-var reactNodeLi = React.createElement('li', {id:'li1'}, 'one');
+var reactNodeLi = React.createElement('li', {id: 'li1'}, 'one');
 ```
 
 Below I list out all of the built in node factories:
@@ -35,4 +35,4 @@ path,pattern,polygon,polyline,radialGradient,rect,stop,svg,text,tspa
 #### Notes
 
 * If you are using JSX you might not ever use factories
-* React has a built-in helper for you to create custom factories. It's effectively just: using [`React.createFactory(type)`](https://facebook.github.io/react/docs/top-level-api.html#react.createfactory).
+* React has a built-in helper for you to create custom factories. It's  [`React.createFactory(type)`](https://facebook.github.io/react/docs/top-level-api.html#react.createfactory).