foundations-high-performance-react/manuscript/getting-ready-to-render-with--createelement-.markua

# Getting Ready to Render with createElement

React's `render` expects to consume a tree of element objects in a specific, uniform format. `createElement` is the method by which we achieve that objective. `createElement` will take as input JSM and output a tree of objects compatible with `render`. 

React expects nodes defined as JavaScript objects that look like this: 

{format: "javascript"}
```
{
   type: NODE_TYPE,
   props: {
      propA: VALUE,
      propB: VALUE,
      ...
      children: STRING | ARRAY
   }
}
```

That is, an object with two properties: `type` and `props`. The `props` property contains all the properties of the node. The node's `children` are also considered part of its properties. The full version of React's `createElement` includes more properties, but they are not relevant to our study here. 

{format: "javascript"}
```
function createElement(node) {
   // if array (our representation of an element)
   if (Array.isArray(node)) {
      const [ tag, props, children ] = node;
      return {
         type: tag,
         props: {
             ...props,
             children: children.map(createElement)
         }
      };
   }

   // primitives like text or number
   return {
      type: 'TEXT',
      props: {
           nodeValue: node,
           children: []
      }
   };
}
```

Our `createElement` has two main parts: complex elements and primitive elements. The first part tests whether `node` is a complex node (specified by an array) and then generates an `element` object based on the input node. It recursively calls `createElement` to generate an array of children elements. If the node is not complex then we generate an element of type 'TEXT' which we use for all primitives, like strings and numbers. We call the output of `createElement` a tree of `elements` (surprise). 

That's it. Now we have everything we need to actually begin the process of rendering our tree to the DOM!