Creating React elements with JavaScript
We'll start by familiarizing ourselves with fundamental React terminology. It will help us build a clear picture of what the React library is made of. This terminology will most likely update over time, so keep an eye on the official documentation at https://facebook.github.io/react/docs/react-api.html.
Just like the DOM is a tree of nodes, React's virtual DOM is a tree of React nodes. One of the core types in React is called ReactNode
. It's a building block for a virtual DOM and it can be any one of these core types:
ReactElement
: This is the primary type in React. It's a light, stateless, immutable, virtual representation of aDOMElement
.ReactText
: This is a string or a number. It represents textual content and it's a virtual representation of a text node in the DOM.
ReactElement
and ReactText
are ReactNode
. An array of ReactNode
is called a ReactFragment
. You will see examples of all of these in this chapter.
Let's start...