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., `