You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
3
+
The primary type or value that is created when using React is known as a React node. A React node is defined as:
4
4
5
5
> a light, stateless, immutable, virtual representation of a DOM node.
6
6
7
-
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/)).
7
+
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/)).
8
8
9
-
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.
9
+
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.
10
10
11
-
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.
11
+
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).
Copy file name to clipboardExpand all lines: react-nodes/4.2.md
+28-21Lines changed: 28 additions & 21 deletions
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Creating React Nodes
2
2
3
-
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.
3
+
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.
4
4
5
5
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>`).
6
6
@@ -24,21 +24,25 @@ Below I use the `React.createElement()` function to create a virtual DOM represe
24
24
var reactNodeLi =React.createElement('li', {id:'li1'}, 'one');
25
25
```
26
26
27
-
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.
27
+
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
28
28
29
-
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.
29
+
* A React text node
30
+
* A React element node, or
31
+
* A React component instance.
32
+
33
+
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.
The above code, loosely stated, would invoke the following:
39
+
The above code, loosely stated, invokes the following:
36
40
37
-
1.create a virtual DOM constructed from the React element node passed in (i.e., `reactNodeLi`)
38
-
2.use the virtual DOM to re-construct a real DOM branch
39
-
3.inserted real DOM branch (i.e., `<li id="li1">one</li>`) into the DOM as a child node of `<div id="app"></div>`.
41
+
1.Create a virtual DOM constructed from the React element node passed in (`reactNodeLi`)
42
+
2.Use the virtual DOM to re-construct a real DOM branch
43
+
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>`.
40
44
41
-
In other words, the HTML DOM would change from this:
45
+
In other words, the HTML DOM changes from this:
42
46
43
47
```html
44
48
<divid="app"></div>
@@ -53,16 +57,17 @@ to this:
53
57
</div>
54
58
```
55
59
56
-
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>`).
60
+
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>`).
57
61
58
62
```js
59
-
// create React element <li>'s
60
-
var rElmLi1 =React.createElement('li', {id:'li1'}, 'one');
61
-
var rElmLi2 =React.createElement('li', {id:'li2'}, 'two');
62
-
var rElmLi3 =React.createElement('li', {id:'li3'}, 'three');
63
-
64
-
//create <ul> React element and add child React <li> elements to it
65
-
var reactElementUl =React.createElement('ul', {className:'myList'}, rElmLi1,rElmLi2,rElmLi3);
63
+
// Create React element <li>'s
64
+
var rElmLi1 =React.createElement('li', {id:'li1'}, 'one'),
var reactElementUl =React.createElement('ul', {className:'myList'}, rElmLi1, rElmLi2, rElmLi3);
66
71
```
67
72
68
73
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(
72
77
'ul', {
73
78
className:'myList'
74
79
},
75
-
React.createElement('li', {id:'li1'},'one'),
76
-
React.createElement('li', {id:'li2'},'two'),
77
-
React.createElement('li', {id:'li3'},'three')
80
+
React.createElement('li', {id:'li1'},'one'),
81
+
React.createElement('li', {id:'li2'},'two'),
82
+
React.createElement('li', {id:'li3'},'three')
78
83
);
79
84
```
80
85
@@ -96,8 +101,10 @@ It should be obvious that React nodes are just JavaScript objects in a tree that
96
101
97
102
#### Notes
98
103
99
-
* 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()`.
100
-
* 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):
104
+
* The `type` argument passed to `React.createElement(type, props, children)` can be
105
+
* A string indicating a standard HTML element (e.g., `'li'` = `<li></li>`), or
106
+
* A custom element (e.g., `'foo-bar'` = `<foo-bar></foo-bar>`, or a React component instance (i.e., an instance of `React.createClass()`.
107
+
* 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):
101
108
102
109
```html
103
110
a abbr address area article aside audio b base bdi bdo big blockquote body br
Once rendered to the DOM, the updated HTML will look like so:
9
+
Once rendered to the DOM, the updated HTML will be:
10
10
11
11
```html
12
12
<body>
@@ -19,7 +19,7 @@ The `ReactDOM.render()` function is initially how you get the React nodes to the
19
19
20
20
#### Notes
21
21
22
-
* Any DOM nodes inside of the DOM element in which you are rendering to will be replaced (i.e., removed).
22
+
* Any DOM nodes inside of the DOM element which you are rendering into will be replaced (i.e., removed).
23
23
*`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.
24
24
* 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.
25
-
* 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.
25
+
* 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.
Copy file name to clipboardExpand all lines: react-nodes/4.4.md
+21-18Lines changed: 21 additions & 18 deletions
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ The second argument that is passed to `React.createElement(type, props, children
5
5
Props take on several roles:
6
6
7
7
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.
8
-
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.
8
+
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.
9
9
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))
10
10
11
11
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
14
14
15
15
```js
16
16
var reactNodeLi =React.createElement('li',
17
-
{
18
-
foo:'bar',
19
-
id:'li1',
20
-
//note use of JS class property representing class attribute below
21
-
//e.g., className
22
-
className:'blue',
23
-
'data-test':'test',
24
-
'aria-test':'test',
25
-
//note use of JS camel-cased CSS property below
26
-
//e.g., backgroundColor
27
-
style:{backgroundColor:'red'}
28
-
},
29
-
'text'
17
+
{
18
+
foo:'bar',
19
+
id:'li1',
20
+
// Note the use of the JS className property to change the
21
+
// class attribute below
22
+
className:'blue',
23
+
'data-test':'test',
24
+
'aria-role':'listitem',
25
+
// Note use of JS camel-cased CSS property backgroundColor below
26
+
style: {backgroundColor:'red'}
27
+
},
28
+
'text'
30
29
);
31
30
```
32
31
33
32
When the above code is rendered to an HTML page the actual HTML created will look like:
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.
38
+
What you need to realize is only the following attributes get passed to the real DOM from the Virtual DOM
39
+
40
+
*[Standard HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes),
41
+
*[Custom data attributes `data-*`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*), and
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`).
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.
48
+
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.
46
49
47
50
#### Notes
48
51
49
52
* Leaving an attribute/prop blank results in that attribute value becoming true (e.g., `id=""` becomes `id="true"` and `test` becomes `test="true"`)
50
53
* If an attribute/prop is duplicated the last one defined wins.
51
-
* 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"/>`).
54
+
* 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"/>`).
52
55
* The `class` attribute has to be written `className`
53
56
* The `for` attribute has to be written `htmlFor`
54
57
* 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)
1. I didn't have to add the "px" to the `fontSize` value because React did it for me.
26
-
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`).
26
+
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`).
27
27
28
28
#### Notes
29
29
@@ -32,6 +32,7 @@ Note two things in the JavaScript code above:
32
32
* When specifying a pixel value React will automatically append the string "px" for you after your number value except for the following properties:
* If you are using JSX you might not ever use factories
38
-
* 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).
38
+
* 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).
0 commit comments