Formatting updates.

foundations-high-performance-react.org

@@ -134,7 +134,7 @@ complete picture of the entire process. The more black-boxes we have
 in our mental model the harder it will be for us to diagnose
 performance problems.
 
-* Markup in JavaScript: ~JSX~
+* Markup in JavaScript: JSX
   :PROPERTIES:
   :EXPORT_FILE_NAME: manuscript/markup-in-javascript---jsx-.markua
   :END:
@@ -170,8 +170,8 @@ parts do you see here?
 
 #+BEGIN_SRC html
 <div class="header">
-  <h1>Hello</h1>
+   <h1>Hello</h1>
-  <input type="submit" disabled />
+   <input type="submit" disabled />
 </div>
 #+END_SRC
 
@@ -195,9 +195,9 @@ This is what I'm thinking:
 #+CAPTION: JSM - JavaScript Markup
 #+BEGIN_SRC javascript
 ['div', { 'className': 'header' },
-  [['h1', {}, ['Hello']],
+   [['h1', {}, ['Hello']],
-   ['input', { 'type': 'submit', 'disabled': 'disabled' }, []]
+    ['input', { 'type': 'submit', 'disabled': 'disabled' }, []]
-  ]
+   ]
 ]
 #+END_SRC
 
@@ -238,12 +238,12 @@ looks like:
 # #+attr_leanpub: :line-numbers true
 #+BEGIN_SRC javascript
 React.createElement(
-  'div',
+   'div',
-  { className: 'header' },
+   { className: 'header' },
-  React.createElement('h1', {}, 'Hello'),
+   React.createElement('h1', {}, 'Hello'),
-  React.createElement(
+   React.createElement(
-    'input',
+      'input',
-    { type: 'submit', 'disabled': 'disabled' })
+      { type: 'submit', 'disabled': 'disabled' })
 );
 #+END_SRC
 
@@ -257,7 +257,7 @@ by leaving those aspects of the JSX compiler out.
 So now that we've worked through JSX we're ready to tackle
 ~createElement~, the next item on our way to building our own React.
 
-* Getting Ready to Render with ~createElement~
+* Getting Ready to Render with createElement
   :PROPERTIES:
   :EXPORT_FILE_NAME: manuscript/getting-ready-to-render-with--createelement-.markua
   :END:
@@ -271,13 +271,13 @@ React expects nodes defined as JavaScript objects that look like this:
 
 #+BEGIN_SRC javascript
 {
-    type: NODE_TYPE,
+   type: NODE_TYPE,
-    props: {
+   props: {
-         propA: VALUE,
+      propA: VALUE,
-         propB: VALUE,
+      propB: VALUE,
-         ...
+      ...
-         children: STRING | ARRAY
+      children: STRING | ARRAY
-    }
+   }
 }
 #+END_SRC
 
@@ -289,26 +289,26 @@ are not relevant to our study here.
 
 #+BEGIN_SRC javascript
 function createElement(node) {
-    // if array (not text, number, or other primitive)
+   // if array (not text, number, or other primitive)
-    if (typeof node === 'object') {
+   if (typeof node === 'object') {
-        const [ tag, props, children ] = node;
+      const [ tag, props, children ] = node;
-        return {
+      return {
-            type: tag,
+         type: tag,
-            props: {
+         props: {
-                ...props,
+             ...props,
-                children: children.map(createElement)
+             children: children.map(createElement)
-            }
+         }
-        };
+      };
-    }
+   }
-
+
-    // primitives like text or number
+   // primitives like text or number
-    return {
+   return {
-        type: 'TEXT',
+      type: 'TEXT',
-        props: {
+      props: {
-            nodeValue: node,
+           nodeValue: node,
-            children: []
+           children: []
-        }
+      }
-    };
+   };
 }
 #+END_SRC
 

manuscript/getting-ready-to-render-with--createelement-.markua

@@ -1,4 +1,4 @@
-# Getting Ready to Render with `createElement`
+# 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`. 
 
@@ -7,13 +7,13 @@ React expects nodes defined as JavaScript objects that look like this:
 {format: "javascript"}
 ```
 {
-    type: NODE_TYPE,
+   type: NODE_TYPE,
-    props: {
+   props: {
-         propA: VALUE,
+      propA: VALUE,
-         propB: VALUE,
+      propB: VALUE,
-         ...
+      ...
-         children: STRING | ARRAY
+      children: STRING | ARRAY
-    }
+   }
 }
 ```
 
@@ -22,26 +22,26 @@ That is: an object with two properties: `type` and `props`. The `props` property
 {format: "javascript"}
 ```
 function createElement(node) {
-    // if array (not text, number, or other primitive)
+   // if array (not text, number, or other primitive)
-    if (typeof node === 'object') {
+   if (typeof node === 'object') {
-        const [ tag, props, children ] = node;
+      const [ tag, props, children ] = node;
-        return {
+      return {
-            type: tag,
+         type: tag,
-            props: {
+         props: {
-                ...props,
+             ...props,
-                children: children.map(createElement)
+             children: children.map(createElement)
-            }
+         }
-        };
+      };
-    }
+   }
-
+
-    // primitives like text or number
+   // primitives like text or number
-    return {
+   return {
-        type: 'TEXT',
+      type: 'TEXT',
-        props: {
+      props: {
-            nodeValue: node,
+           nodeValue: node,
-            children: []
+           children: []
-        }
+      }
-    };
+   };
 }
 ```
 

manuscript/markup-in-javascript---jsx-.markua

@@ -1,4 +1,4 @@
-# Markup in JavaScript: `JSX`
+# Markup in JavaScript: JSX
 
 `createElement`, however, takes as input something that is probably not familiar to us since we usually work in JSX, which is the last element of the chain in this puzzle and the first step in solving it. While not strictly a part of React, it is almost universally used with it. And if we understand it then `createElement` will be less of a mystery since we will be able to connect all the dots. 
 
@@ -13,8 +13,8 @@ To start with, we need to create a data-structure -- let's call it JavaScript Ma
 {format: "html"}
 ```
 <div class="header">
-  <h1>Hello</h1>
+   <h1>Hello</h1>
-  <input type="submit" disabled />
+   <input type="submit" disabled />
 </div>
 ```
 
@@ -33,9 +33,9 @@ This is what I'm thinking:
 {format: "javascript", caption: "JSM - JavaScript Markup"}
 ```
 ['div', { 'className': 'header' },
-  [['h1', {}, ['Hello']],
+   [['h1', {}, ['Hello']],
-   ['input', { 'type': 'submit', 'disabled': 'disabled' }, []]
+    ['input', { 'type': 'submit', 'disabled': 'disabled' }, []]
-  ]
+   ]
 ]
 ```
 
@@ -52,12 +52,12 @@ There are three main differences between JSM and the real output of the JSX comp
 {format: "javascript"}
 ```
 React.createElement(
-  'div',
+   'div',
-  { className: 'header' },
+   { className: 'header' },
-  React.createElement('h1', {}, 'Hello'),
+   React.createElement('h1', {}, 'Hello'),
-  React.createElement(
+   React.createElement(
-    'input',
+      'input',
-    { type: 'submit', 'disabled': 'disabled' })
+      { type: 'submit', 'disabled': 'disabled' })
 );
 ```