diff --git a/react-nodes/4.1.md b/react-nodes/4.1.md
index 781c4be..3c867bc 100644
--- a/react-nodes/4.1.md
+++ b/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).
diff --git a/react-nodes/4.2.md b/react-nodes/4.2.md
index 20c6d87..0eb51f3 100644
--- a/react-nodes/4.2.md
+++ b/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., `
` or custom element e.g., ``).
@@ -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 ``. 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 ``. 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 ``. 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 ``. 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., `one`) into the DOM as a child node of ``.
+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., `one`) into the DOM as a child node of ``.
-In other words, the HTML DOM would change from this:
+In other words, the HTML DOM changes from this:
```html
@@ -53,16 +57,17 @@ to this:
```
-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., ``).
+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., ``).
```js
-// create React element - '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
React element and add child React - elements to it
-var reactElementUl = React.createElement('ul', {className:'myList'}, rElmLi1,rElmLi2,rElmLi3);
+// Create React element
- 's
+var rElmLi1 = React.createElement('li', {id:'li1'}, 'one'),
+ rElmLi2 = React.createElement('li', {id:'li2'}, 'two'),
+ rElmLi3 = React.createElement('li', {id:'li3'}, 'three');
+
+// Create
React element and add child
+// React - 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'` = `
`), a custom element (e.g., `'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'` = ``), or
+ * A custom element (e.g., `'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
diff --git a/react-nodes/4.3.md b/react-nodes/4.3.md
index dd80ee2..577fdc2 100644
--- a/react-nodes/4.3.md
+++ b/react-nodes/4.3.md
@@ -6,7 +6,7 @@ In the code example below, using `ReactDOM.render()`, the `'- '` and `' [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
@@ -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.
diff --git a/react-nodes/4.4.md b/react-nodes/4.4.md
index cd98db4..b04a450 100644
--- a/react-nodes/4.4.md
+++ b/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 `
- ` 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
-
- text
+- text
```
-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., ``).
+* 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., ``).
* 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)
diff --git a/react-nodes/4.5.md b/react-nodes/4.5.md
index c102410..60331a4 100644
--- a/react-nodes/4.5.md
+++ b/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
```
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
```
diff --git a/react-nodes/4.6.md b/react-nodes/4.6.md
index 928ff01..e6fa966 100644
--- a/react-nodes/4.6.md
+++ b/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 `- one
` can be created like so:
+Using a built-in element factory (i.e., `React.DOM.li()`), the React element node `- one
` 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).
diff --git a/react-nodes/4.7.md b/react-nodes/4.7.md
index c930e05..07f02b9 100644
--- a/react-nodes/4.7.md
+++ b/react-nodes/4.7.md
@@ -6,49 +6,49 @@ Events can be added to React nodes much like events can be added to DOM nodes. I
Note how the property name for an event in React starts with 'on' and is passed in the `props` argument object to the `ReactElement()` function.
-React creates what it calls a `SyntheticEvent` for each event, which contains the details for the event. Similar to the details that are define for DOM events. The `SyntheticEvent` instance, for an event, is passed into the events handlers/callback functions. In the code below I am logging the details of a SyntheticEvent instance.
+React creates what it calls a [`SyntheticEvent`](https://facebook.github.io/react/docs/events.html) for each event, which contains the details for the event. Similar to the details that are defined for DOM events. The `SyntheticEvent` instance, for an event, is passed into the events handlers/callback functions. In the code below I am logging the details of a SyntheticEvent instance.
> [source code](https://jsfiddle.net/9yn5qtxu/#tabs=js,result,html,resources)
-Every syntheticEvent object instance has the following properties.
+Every SyntheticEvent object instance has the following properties.
```
-bubbles
-cancelable
+boolean bubbles
+boolean cancelable
DOMEventTarget currentTarget
-defaultPrevented
-eventPhase
-isTrusted
+boolean defaultPrevented
+number eventPhase
+boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
-isDefaultPrevented()
+boolean isDefaultPrevented()
void stopPropagation()
-isPropagationStopped()
+boolean isPropagationStopped()
DOMEventTarget target
-timeStamp
-type
+number timeStamp
+string type
```
Additional properties are available depending upon the type/category of event that is used. For example the `onClick` syntheticEvent event also contains the following properties.
```
-altKey
-button
-buttons
-clientX
-clientY
-ctrlKey
-getModifierState(key)
-metaKey
-pageX
-pageY
+boolean altKey
+number button
+number buttons
+number clientX
+number clientY
+boolean ctrlKey
+boolean getModifierState(key)
+boolean metaKey
+number pageX
+number pageY
DOMEventTarget relatedTarget
-screenX
-screenY
-shiftKey
+number screenX
+number screenY
+boolean shiftKey
```
-The table below outlines the unique syntheticEvent properties for each type/category of events.
+The table below outlines the unique SyntheticEvent properties for each type/category of events.
@@ -192,5 +192,5 @@ shiftKey,
* Events in React are triggered on the bubbling phase. To trigger an event on the capturing phase add the word "Capture" to the event name (e.g., `onClick` would become `onClickCapture`).
* If you need the browser event details you can access this by using the `nativeEvent` property found in the SyntheticEvent object passed into React event hander/callback.
* React doesn't actually attach events to the nodes themselves, it uses [event delegation](http://domenlightenment.com/#11.14).
-* `e.stopPropagation()` or `e.preventDefault()` should be triggered manually to [stop](http://domenlightenment.com/#11.9) event [propagation](http://domenlightenment.com/#11.10) instead of `returning false;`.
+* `e.stopPropagation()` or `e.preventDefault()` should be triggered manually to [stop](http://domenlightenment.com/#11.9) event [propagation](http://domenlightenment.com/#11.10) instead of `return false;`.
* Not all DOM events are provided by React. But you can still make use of them [using React lifecycle methods](https://facebook.github.io/react/tips/dom-event-listeners.html).