├── README.md
├── build-and-learn
    ├── 1.text-element.html
    ├── 2.tag-element.html
    ├── 3.composite-element.html
    ├── 4.handling-updates.html
    └── 5.todo-list-example.html
├── demo
    └── todo-list-complete.html
└── react-lite.js


/README.md:
--------------------------------------------------------------------------------
 1 | # React Lite
 2 | 
 3 | A simple light-weight prototype of React :)
 4 | 
 5 | Built for learning purposes and to get the essence of what happens under the hood.
 6 | 
 7 | Size: 2kb gzipped.
 8 | 
 9 | ### Reference
10 | 
11 | [React - Basic Theoretical Concepts](https://github.com/reactjs/react-basic)
12 | 
13 | [React - Codebase overview](https://facebook.github.io/react/contributing/codebase-overview.html)
14 | 
15 | [React - Implementation details](https://facebook.github.io/react/contributing/implementation-notes.html)
16 | 
17 | [React Source parsing](http://zhenhua-lee.github.io/react/react.html)
18 | 
19 | [React in 200 bytes](https://medium.com/@gab_montes/react-in-200-bytes-28156e714165#.a82m7wii6)
20 | 
21 | [React source code analysis series - 1. Life cycle management](https://zhuanlan.zhihu.com/p/20312691)
22 | 
23 | [React source code analysis series - 2. Decrypting setState](https://zhuanlan.zhihu.com/p/20328570)
24 | 
25 | [React source code analysis series - 3. React diff](https://zhuanlan.zhihu.com/p/20346379)
26 | 
27 | [React Source code analysis series - 4. React Transition](https://zhuanlan.zhihu.com/p/20419592)
28 | 
29 | [Understanding React and reimplementing it from scratch Part 1: Views](https://gcanti.github.io/2014/10/29/understanding-react-and-reimplementing-it-from-scratch-part-1.html)
30 | 
31 | [Understanding React and reimplementing it from scratch Part 2: Controllers](https://gcanti.github.io/2014/11/24/understanding-react-and-reimplementing-it-from-scratch-part-2.html)
32 | 
33 | [React Transaction - What happens after setState](https://undefinedblog.com/what-happened-after-set-state/)
34 | 
35 | [In depth understanding of the React BatchUpdate mechanism](https://undefinedblog.com/understand-react-batch-update/)
36 | 
37 | [Dive into React codebase: Transactions](http://reactkungfu.com/2015/12/dive-into-react-codebase-transactions/)
38 | 
39 | [Dive into React codebase: Handling state changes](http://reactkungfu.com/2016/03/dive-into-react-codebase-handling-state-changes/)
40 | 
41 | [How to implement a Virtual DOM Algorithm](https://github.com/livoras/blog/issues/13)
42 | 
43 | [React Source Analysis - Part I (first rendering principle)](http://purplebamboo.github.io/2015/09/15/reactjs_source_analyze_part_one/)
44 | 
45 | [React Source Analysis - Part II (update mechanism principle)](http://purplebamboo.github.io/2015/09/15/reactjs_source_analyze_part_two/)
46 | 
47 | [Tiny React Renderer](https://github.com/iamdustan/tiny-react-renderer)
48 | 
49 | [Reconciliation - Docs](https://facebook.github.io/react/docs/reconciliation.html)
50 | 
51 | [React Fiber Architecture](https://github.com/acdlite/react-fiber-architecture)
52 | 
53 | [In-depth diffing](http://buildwithreact.com/article/in-depth-diffing)
54 | 
55 | [Performance Engineering with React](http://benchling.engineering/performance-engineering-with-react/)
56 | 
57 | [React performance - Vjeux](http://blog.vjeux.com/2013/javascript/react-performance.html)
58 | 
59 | [React architecture - Vjeux](http://blog.vjeux.com/2014/javascript/react-architecture-oscon.html)
60 | 
61 | [Preact - Lightweight 3kb version of React](https://github.com/developit/preact)
62 | 
63 | [React Lite - an implementation of React that optimizes for small script size](https://github.com/Lucifier129/react-lite)
64 | 
65 | ### Videos
66 | 
67 | [Building React from Scratch - Paul O Shannessy](https://www.youtube.com/watch?v=_MAD4Oly9yg)
68 | 
69 | [React.js Internals with Nick Niemeir](https://www.youtube.com/watch?v=FAgSdSikSCc)
70 | 
71 | [Standing On The Shoulders Of Giants Or How To Read The Internals Of React js](https://www.youtube.com/watch?v=IbXZL0e1haI)
72 | 
73 | [ReactJS: Under the hood](https://www.youtube.com/watch?v=xsKYAa1ZXpQ)
74 | 
75 | [React events in depth](https://www.youtube.com/watch?v=dRo_egw7tBc)
76 | 
77 | [React reconciliation - Jim Sproch](https://www.youtube.com/watch?v=EZV2rwnGgZA)
78 | 
79 | [React Fiber: What's next for React](https://www.youtube.com/watch?v=aV1271hd9ew)
80 | 
81 | [A Cartoon Intro to Fiber - Lin Clark](https://www.youtube.com/watch?v=ZCuYPiUIONs)
82 | 


--------------------------------------------------------------------------------
/build-and-learn/1.text-element.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 | 
 9 | <div id="container"></div>
10 | 
11 | <!--
12 |     <script type="text/javascript">
13 |         React.render('hello world', document.getElementById("container"));
14 |     </script>
15 | 
16 |     Corresponding HTML
17 |     <div id="container"></div>
18 | 
19 |     HTML after React generation as follows:
20 |     <div id = "container">
21 |         <span data-reactid="0">hello world</span>
22 |     </div>
23 | -->
24 | 
25 | <script type="text/javascript">
26 |     // Component class used to represent text render/update/delete
27 |     function ReactDOMTextComponent(text) {
28 |         // Saves text passed through
29 |         this._currentElement = '' + text;
30 |         // Root NodeID is used to identify the current DOMTextComponent
31 |         this._rootNodeID = null;
32 |     }
33 | 
34 |     // Handles Mount - Here's where the component render generates it's corresponding DOM structure.
35 |     ReactDOMTextComponent.prototype.mountComponent = function (rootID) {
36 |         this._rootNodeID = rootID;
37 |         return '<span data-reactid="' + rootID + '">' + this._currentElement + '</span>';
38 |     };
39 | 
40 |     // Component factory to return a new component instance
41 |     function instantiateReactComponent(node) {
42 |         if (typeof node === 'string' || typeof node === 'number') {
43 |             return new ReactDOMTextComponent(node)
44 |         }
45 |     }
46 | 
47 |     React = {
48 |         nextReactRootIndex: 0,
49 |         render: function (element, container) {
50 | 
51 |             var componentInstance = instantiateReactComponent(element);
52 |             var markup = componentInstance.mountComponent(React.nextReactRootIndex++);
53 |             $(container).html(markup);
54 |             // Trigger mount complete event - Does nothing as of now.
55 |             $(document).trigger('mountReady');
56 |         }
57 |     };
58 | 
59 |     React.render('Hello World', document.getElementById("container"))
60 | 
61 | </script>
62 | 
63 | </body>
64 | 
65 | </html>


--------------------------------------------------------------------------------
/build-and-learn/2.tag-element.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  5 | </head>
  6 | 
  7 | <body>
  8 | 
  9 | <div id="container"></div>
 10 | 
 11 | <script type="text/javascript">
 12 | 
 13 |     /**                          */
 14 |     /** REACT DOM TEXT COMPONENT */
 15 |     /**                          */
 16 | 
 17 |     // Component class used to represent text render/update/delete
 18 |     function ReactDOMTextComponent(text) {
 19 |         // Saves text passed through
 20 |         this._currentElement = '' + text;
 21 |         // Root NodeID is used to identify the current DOMTextComponent
 22 |         this._rootNodeID = null;
 23 |     }
 24 | 
 25 |     // Handles Mount - Here's where the component render generates it's corresponding DOM structure.
 26 |     ReactDOMTextComponent.prototype.mountComponent = function (rootID) {
 27 |         this._rootNodeID = rootID;
 28 |         return '<span data-reactid="' + rootID + '">' + this._currentElement + '</span>';
 29 |     };
 30 | 
 31 |     /**                     */
 32 |     /** REACT DOM COMPONENT */
 33 |     /**                     */
 34 | 
 35 |     // Component class used to represent HTML tag DOM elements' render/update/delete
 36 |     function ReactDOMComponent(element) {
 37 |         // Save the current element object's reference
 38 |         this._currentElement = element;
 39 |         this._rootNodeID = null;
 40 |     }
 41 | 
 42 |     // Mounting the component to generate the DOM element structure.
 43 |     ReactDOMComponent.prototype.mountComponent = function (rootID) {
 44 |         // Copy root id to the instance.
 45 |         this._rootNodeID = rootID;
 46 |         var props = this._currentElement.props;
 47 |         var tagOpen = '<' + this._currentElement.type;
 48 |         var tagClose = '</' + this._currentElement.type + '>';
 49 | 
 50 |         // Add react-id identification to the node as a data attribute.
 51 |         // The data-reactid attribute is a custom attribute used so that React can uniquely identify its components within the DOM.
 52 |         // This is important because React applications can be rendered at the server as well as the client.
 53 |         //
 54 |         // More: http://stackoverflow.com/a/33967810/1672655
 55 |         // React 15 uses document.createElement instead, so client rendered markup won't include these attributes anymore.
 56 |         tagOpen += ' data-reactid=' + this._rootNodeID;
 57 | 
 58 |         // Put together prop values into the tag
 59 |         for (var propKey in props) {
 60 |             // Handle EventListeners passed in props - identified via regex.
 61 |             if (/^on[A-Za-z]/.test(propKey)) {
 62 |                 var eventType = propKey.replace('on', '');
 63 |                 // Add the event listener as a custom event on the current DOM node - identfied via the rootNodeId values.
 64 |                 $(document).delegate('[data-reactid="' + this._rootNodeID + '"]', eventType + '.' + this._rootNodeID, props[propKey]);
 65 |             }
 66 | 
 67 |             // Ignore children and event listener props. -- Rest of the props are assigned as attributes to the DOM element.
 68 |             if (props[propKey] && propKey !== 'children' && !/^on[A-Za-z]/.test(propKey)) {
 69 |                 tagOpen += ' ' + propKey + '=' + props[propKey];
 70 |             }
 71 |         }
 72 | 
 73 |         // Recursively get the child nodes' render() content as well.
 74 |         var content = '';
 75 |         var children = props.children || [];
 76 | 
 77 |         // Book-keeping: Save component instances of all children.
 78 |         var childrenInstances = [];
 79 |         var that = this;
 80 |         $.each(children, function (key, child) {
 81 |             var childComponentInstance = instantiateReactComponent(child);
 82 |             childComponentInstance._mountIndex = key;
 83 | 
 84 |             childrenInstances.push(childComponentInstance);
 85 |             // Root id of children is calculated by concatenating it with the rootId of the parent.
 86 |             var curRootId = that._rootNodeID + '.' + key;
 87 |             //
 88 |             var childMarkup = childComponentInstance.mountComponent(curRootId);
 89 |             // Concatenate together the markup obtained
 90 |             content += ' ' + childMarkup;
 91 |         });
 92 | 
 93 |         // The children instances are saved to the current DOM component instance
 94 |         this._renderedChildren = childrenInstances;
 95 | 
 96 |         // Return the final markup of the DOM component
 97 |         return tagOpen + '>' + content + tagClose;
 98 |     };
 99 | 
100 | 
101 |     function instantiateReactComponent(node) {
102 |         // If a text node
103 |         if (typeof node === 'string' || typeof node === 'number') {
104 |             return new ReactDOMTextComponent(node);
105 |         }
106 |         // If a browser tag/node
107 |         if (typeof node === 'object' && typeof node.type === 'string') {
108 |             return new ReactDOMComponent(node);
109 |         }
110 |     }
111 | 
112 |     // React Element's instance is basically what we call the Virtual DOM.
113 |     // It has a type attribute representing the current node type, as well as props attribute for the node.
114 |     // Also here the `key` is used to uniquely identify this element regardless of where you are in the DOM tree + optimizations for future updates
115 |     function ReactElement(type, key, props) {
116 |         this.type = type;
117 |         this.key = key;
118 |         this.props = props;
119 |     }
120 | 
121 |     React = {
122 |         nextReactRootIndex: 0,  // The initial index at the React's root node.
123 |         createElement: function (type, config, children) {
124 |             var props = {}, propName;
125 |             config = config || {};
126 |             // Check if the key  is specified - if so it is easy to quickly identify and update the element in future.
127 |             var key = config.key || null;
128 | 
129 |             // Copy config object over as props.
130 |             for (propName in config) {
131 |                 if (config.hasOwnProperty(propName) && propName !== 'key') {
132 |                     props[propName] = config[propName];
133 |                 }
134 |             }
135 | 
136 |             // Handle children - which can be passed as additional params to createlement()
137 |             var childrenLength = arguments.length - 2;
138 |             if (childrenLength === 1) {
139 |                 props.children = Array.isArray(children) ? children : [children];
140 |             } else if (childrenLength > 1) {
141 |                 var childArray = [];
142 |                 for (var i = 0; i < childrenLength; i++) {
143 |                     childArray[i] = arguments[i + 2];
144 |                 }
145 |                 props.children = childArray;
146 |             }
147 | 
148 |             return new ReactElement(type, key, props);
149 | 
150 |         },
151 |         render: function (element, container) {
152 |             var componentInstance = instantiateReactComponent(element);
153 |             var markup = componentInstance.mountComponent(React.nextReactRootIndex++);
154 |             $(container).html(markup);
155 |             // Trigger the mount complete event
156 |             $(document).trigger('mountReady');
157 |         }
158 |     };
159 | 
160 | 
161 |     // Just a simple fn that is triggered onclick
162 |     function hello() {
163 |         alert('Don\'t click me: Bad Hombre!')
164 |     }
165 | 
166 |     var element = React.createElement('div', {id: 'test', onclick: hello}, 'Click me not');
167 | 
168 |     React.render(element, document.getElementById("container"));
169 | 
170 |     /**
171 |      * // Generated html is:
172 |      *
173 |      * <div data-reactid="0" id="test">
174 |      *     <span data-reactid="0.0">click me</span>
175 |      * </div>
176 |      *
177 |      * // Click on the text, a dialog box will pop hello
178 |      **/
179 | 
180 | </script>
181 | </body>
182 | 
183 | </html>


--------------------------------------------------------------------------------
/build-and-learn/3.composite-element.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <meta http-equiv="content-type" content="text/html;charset=utf-8">
  5 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  6 | </head>
  7 | 
  8 | <body>
  9 | 
 10 | <div id="container"></div>
 11 | 
 12 | <script type="text/javascript">
 13 | 
 14 |     /**                          */
 15 |     /** REACT DOM TEXT COMPONENT */
 16 |     /**                          */
 17 | 
 18 |     // Component class used to represent text render/update/delete
 19 |     function ReactDOMTextComponent(text) {
 20 |         // Saves text passed through
 21 |         this._currentElement = '' + text;
 22 |         // Root NodeID is used to identify the current DOMTextComponent
 23 |         this._rootNodeID = null;
 24 |     }
 25 | 
 26 |     // Handles Mount - Here's where the component render generates it's corresponding DOM structure.
 27 |     ReactDOMTextComponent.prototype.mountComponent = function (rootID) {
 28 |         this._rootNodeID = rootID;
 29 |         return '<span data-reactid="' + rootID + '">' + this._currentElement + '</span>';
 30 |     };
 31 | 
 32 |     /**                     */
 33 |     /** REACT DOM COMPONENT */
 34 |     /**                     */
 35 | 
 36 |     // Component class used to represent HTML tag DOM elements' render/update/delete
 37 |     function ReactDOMComponent(element) {
 38 |         // Save the current element object's reference
 39 |         this._currentElement = element;
 40 |         this._rootNodeID = null;
 41 |     }
 42 | 
 43 |     // Mounting the component to generate the DOM element structure.
 44 |     ReactDOMComponent.prototype.mountComponent = function (rootID) {
 45 |         // Copy root id to the instance.
 46 |         this._rootNodeID = rootID;
 47 |         var props = this._currentElement.props;
 48 |         var tagOpen = '<' + this._currentElement.type;
 49 |         var tagClose = '</' + this._currentElement.type + '>';
 50 | 
 51 |         // Add react-id identification to the node as a data attribute.
 52 |         // The data-reactid attribute is a custom attribute used so that React can uniquely identify its components within the DOM.
 53 |         // This is important because React applications can be rendered at the server as well as the client.
 54 |         //
 55 |         // More: http://stackoverflow.com/a/33967810/1672655
 56 |         // React 15 uses document.createElement instead, so client rendered markup won't include these attributes anymore.
 57 |         tagOpen += ' data-reactid=' + this._rootNodeID;
 58 | 
 59 |         // Put together prop values into the tag
 60 |         for (var propKey in props) {
 61 |             // Handle EventListeners passed in props - identified via regex.
 62 |             if (/^on[A-Za-z]/.test(propKey)) {
 63 |                 var eventType = propKey.replace('on', '');
 64 |                 // Add the event listener as a custom event on the current DOM node - identfied via the rootNodeId values.
 65 |                 $(document).delegate('[data-reactid="' + this._rootNodeID + '"]', eventType + '.' + this._rootNodeID, props[propKey]);
 66 |             }
 67 | 
 68 |             // Ignore children and event listener props. -- Rest of the props are assigned as attributes to the DOM element.
 69 |             if (props[propKey] && propKey !== 'children' && !/^on[A-Za-z]/.test(propKey)) {
 70 |                 tagOpen += ' ' + propKey + '=' + props[propKey];
 71 |             }
 72 |         }
 73 | 
 74 |         // Recursively get the child nodes' render() content as well.
 75 |         var content = '';
 76 |         var children = props.children || [];
 77 | 
 78 |         // Book-keeping: Save component instances of all children.
 79 |         var childrenInstances = [];
 80 |         var that = this;
 81 |         $.each(children, function (key, child) {
 82 |             var childComponentInstance = instantiateReactComponent(child);
 83 |             childComponentInstance._mountIndex = key;
 84 | 
 85 |             childrenInstances.push(childComponentInstance);
 86 |             // Root id of children is calculated by concatenating it with the rootId of the parent.
 87 |             var curRootId = that._rootNodeID + '.' + key;
 88 |             //
 89 |             var childMarkup = childComponentInstance.mountComponent(curRootId);
 90 |             // Concatenate together the markup obtained
 91 |             content += ' ' + childMarkup;
 92 |         });
 93 | 
 94 |         // The children instances are saved to the current DOM component instance
 95 |         this._renderedChildren = childrenInstances;
 96 | 
 97 |         // Return the final markup of the DOM component
 98 |         return tagOpen + '>' + content + tagClose;
 99 |     };
100 | 
101 |     /**                           */
102 |     /** REACT COMPOSITE COMPONENT */
103 |     /**                           */
104 | 
105 |     function ReactCompositeComponent(element) {
106 |         // Save the current element object's reference.
107 |         this._currentElement = element;
108 |         // To store the node reference.
109 |         this._rootNodeID = null;
110 |         // To store the corresponding instance of ReactClass later on.
111 |         this._instance = null;
112 |     }
113 | 
114 |     // Mounting the component to generate the DOM element structure.
115 |     // Should return the current custom elements' render contents.
116 |     ReactCompositeComponent.prototype.mountComponent = function (rootID) {
117 |         this._rootNodeID = rootID;
118 |         // The current element's prop values.
119 |         var publicProps = this._currentElement.props;
120 |         // The current element's ReactClass (Component class).
121 |         var ReactClass = this._currentElement.type;
122 |         // Initialize the public class
123 |         var inst = new ReactClass(publicProps);
124 |         this._instance = inst;
125 |         // Maintain reference to the current component - for future updates.
126 |         inst._reactInternalInstance = this;
127 | 
128 |         if (inst.componentWillMount) {
129 |             inst.componentWillMount();
130 |             // There is a lot more additional logic here in the complete library - but we'll keep it simple here.
131 |         }
132 |         // Call the ReactClass instance's render method - this returns an element or a text node
133 |         var renderedElement = this._instance.render();
134 |         // Get component class instance of the rendered element.
135 |         var renderedComponentInstance = instantiateReactComponent(renderedElement);
136 |         this._renderedComponent = renderedComponentInstance; // Save component instance for later use.
137 | 
138 |         // Get string content after rendering, the current _rootNodeID passed to render the node.
139 |         var renderedMarkup = renderedComponentInstance.mountComponent(this._rootNodeID);
140 | 
141 |         // Add an event listener for 'mountReady' event - which is triggered when React.render() completes.
142 |         $(document).on('mountReady', function () {
143 |             // call inst.componentDidMount
144 |             inst.componentDidMount && inst.componentDidMount();
145 |         });
146 | 
147 |         return renderedMarkup;
148 |     };
149 | 
150 |     function instantiateReactComponent(node) {
151 |         // If a text node
152 |         if (typeof node === 'string' || typeof node === 'number') {
153 |             return new ReactDOMTextComponent(node);
154 |         }
155 |         // If a browser tag/node
156 |         if (typeof node === 'object' && typeof node.type === 'string') {
157 |             return new ReactDOMComponent(node);
158 |         }
159 |         // If composite element node
160 |         if (typeof node === 'object' && typeof node.type === 'function') {
161 |             return new ReactCompositeComponent(node);
162 |         }
163 |     }
164 | 
165 |     // React Element's instance is basically what we call the Virtual DOM.
166 |     // It has a type attribute representing the current node type, as well as props attribute for the node.
167 |     // Also here the `key` is used to uniquely identify this element regardless of where you are in the DOM tree + optimizations for future updates
168 |     function ReactElement(type, key, props) {
169 |         this.type = type;
170 |         this.key = key;
171 |         this.props = props;
172 |     }
173 | 
174 |     // ReactClass - In a way this is the Super class
175 |     // For demo purposes, we're keep ReactClass simple - the original code handles a lot of things,
176 |     // eg. mixin class inheritance support, componentDidMount etc.
177 |     var ReactClass = function () {
178 |     };
179 |     // This leaves subclasses to inherit the render
180 |     ReactClass.prototype.render = function () {
181 |     };
182 | 
183 | 
184 |     React = {
185 |         nextReactRootIndex: 0,
186 |         createClass: function (spec) {
187 |             // Generate a subclass
188 |             var Constructor = function (props) {
189 |                 this.props = props;
190 |                 this.state = this.getInitialState ? this.getInitialState() : null;
191 |             };
192 |             // Prototype Inheritance
193 |             // This is a way to implement two levels of inheritance with constructor.
194 |             // If not clear check this: http://stackoverflow.com/a/7719184/1672655
195 |             Constructor.prototype = new ReactClass();        // (or) Object.create(ReactClass.prototype)
196 |             Constructor.prototype.constructor = Constructor; // Setting back the constructor to `Constructor`
197 | 
198 |             // Combine spec with prototype
199 |             $.extend(Constructor.prototype, spec);
200 |             return Constructor;
201 |         },
202 |         createElement: function (type, config, children) {
203 |             var props = {}, propName;
204 |             config = config || {};
205 |             // Check if the key  is specified - if so it is easy to quickly identify and update the element in future.
206 |             var key = config.key || null;
207 | 
208 |             // Copy config object over as props.
209 |             for (propName in config) {
210 |                 if (config.hasOwnProperty(propName) && propName !== 'key') {
211 |                     props[propName] = config[propName];
212 |                 }
213 |             }
214 | 
215 |             // Handle children - which can be passed as additional params to createlement()
216 |             var childrenLength = arguments.length - 2;
217 |             if (childrenLength === 1) {
218 |                 props.children = Array.isArray(children) ? children : [children];
219 |             } else if (childrenLength > 1) {
220 |                 var childArray = [];
221 |                 for (var i = 0; i < childrenLength; i++) {
222 |                     childArray[i] = arguments[i + 2];
223 |                 }
224 |                 props.children = childArray;
225 |             }
226 | 
227 |             return new ReactElement(type, key, props);
228 | 
229 |         },
230 |         render: function (element, container) {
231 |             var componentInstance = instantiateReactComponent(element);
232 |             var markup = componentInstance.mountComponent(React.nextReactRootIndex++);
233 |             $(container).html(markup);
234 |             // Trigger the mount complete event
235 |             $(document).trigger('mountReady');
236 |         }
237 |     };
238 | 
239 |     var HelloMessage = React.createClass({
240 |         // getInitialState obtains the initial property values of ​​this.state
241 |         getInitialState: function () {
242 |             return {type: 'say:'};
243 |         },
244 |         // Invoked when component is ready to render.
245 |         componentWillMount: function () {
246 |             console.log('I am going to start rendering the component - componentWillMount')
247 |         },
248 |         // Invoked after component has completed rendering.
249 |         componentDidMount: function () {
250 |             console.log('I have rendered the component - componentDidMount')
251 |         },
252 |         render: function () {
253 |             return React.createElement("div", null, this.state.type, "Thanks ", this.props.name);
254 |         }
255 |     });
256 | 
257 |     // If createElement's type is not a string and instead is a class == It's a React Composite Element.
258 |     React.render(React.createElement(HelloMessage, {name: "Obama"}), document.getElementById("container"));
259 | 
260 |     /**
261 |      * Results:
262 |      *
263 |      * html:
264 |      * <div data-reactid = "0">
265 |      *     <span data-reactid = "0.0"> say: </span>
266 |      *     <span data-reactid = "0.1"> Hello </span>
267 |      *     <span data-reactid = "0.2"> John </span>
268 |      * </div>
269 |      *
270 |      * Console:
271 |      * I am going to start rendering the component - componentWillMount
272 |      * I have rendered the component - componentDidMount
273 |      */
274 | 
275 | </script>
276 | </body>
277 | 
278 | 
279 | </html>


--------------------------------------------------------------------------------
/build-and-learn/4.handling-updates.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <meta http-equiv="content-type" content="text/html;charset=utf-8">
  5 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  6 | 
  7 | </head>
  8 | 
  9 | <body>
 10 | 
 11 | <div id="container"></div>
 12 | 
 13 | <script type="text/javascript">
 14 | 
 15 |     /**                          */
 16 |     /** REACT DOM TEXT COMPONENT */
 17 |     /**                          */
 18 | 
 19 |     // Component class used to represent text render/update/delete
 20 |     function ReactDOMTextComponent(text) {
 21 |         // Saves text passed through
 22 |         this._currentElement = '' + text;
 23 |         // Root NodeID is used to identify the current DOMTextComponent
 24 |         this._rootNodeID = null;
 25 |     }
 26 | 
 27 |     // Handles Mount - Here's where the component render generates it's corresponding DOM structure.
 28 |     ReactDOMTextComponent.prototype.mountComponent = function (rootID) {
 29 |         this._rootNodeID = rootID;
 30 |         return '<span data-reactid="' + rootID + '">' + this._currentElement + '</span>';
 31 |     };
 32 | 
 33 |     ReactDOMTextComponent.prototype.receiveComponent = function (nextText) {
 34 |         var nextStringText = '' + nextText;
 35 |         // Comparison with the previously saved string
 36 |         if (nextStringText !== this._currentElement) {
 37 |             this._currentElement = nextStringText;
 38 |             // Replace entire node
 39 |             $('[data-reactid="' + this._rootNodeID + '"]').html(this._currentElement);
 40 |         }
 41 |     };
 42 | 
 43 |     /**                     */
 44 |     /** REACT DOM COMPONENT */
 45 |     /**                     */
 46 | 
 47 |     // Component class used to represent HTML tag DOM elements' render/update/delete
 48 |     function ReactDOMComponent(element) {
 49 |         // Save the current element object's reference
 50 |         this._currentElement = element;
 51 |         this._rootNodeID = null;
 52 |     }
 53 | 
 54 |     // Mounting the component to generate the DOM element structure.
 55 |     ReactDOMComponent.prototype.mountComponent = function (rootID) {
 56 |         // Copy root id to the instance.
 57 |         this._rootNodeID = rootID;
 58 |         var props = this._currentElement.props;
 59 |         var tagOpen = '<' + this._currentElement.type;
 60 |         var tagClose = '</' + this._currentElement.type + '>';
 61 | 
 62 |         // Add react-id identification to the node as a data attribute.
 63 |         // The data-reactid attribute is a custom attribute used so that React can uniquely identify its components within the DOM.
 64 |         // This is important because React applications can be rendered at the server as well as the client.
 65 |         //
 66 |         // More: http://stackoverflow.com/a/33967810/1672655
 67 |         // React 15 uses document.createElement instead, so client rendered markup won't include these attributes anymore.
 68 |         tagOpen += ' data-reactid="' + this._rootNodeID + '"';
 69 | 
 70 |         // Put together prop values into the tag
 71 |         for (var propKey in props) {
 72 |             // Handle EventListeners passed in props - identified via regex.
 73 |             if (/^on[A-Za-z]/.test(propKey)) {
 74 |                 var eventType = propKey.replace('on', '');
 75 |                 // Add the event listener as a custom event on the current DOM node - identfied via the rootNodeId values.
 76 |                 $(document).delegate('[data-reactid="' + this._rootNodeID + '"]', eventType + '.' + this._rootNodeID, props[propKey]);
 77 |             }
 78 | 
 79 |             // Ignore children and event listener props. -- Rest of the props are assigned as attributes to the DOM element.
 80 |             if (props[propKey] && propKey !== 'children' && !/^on[A-Za-z]/.test(propKey)) {
 81 |                 tagOpen += ' ' + propKey + '="' + props[propKey] + '"';
 82 |             }
 83 |         }
 84 | 
 85 |         // Recursively get the child nodes' render() content as well.
 86 |         var content = '';
 87 |         var children = props.children || [];
 88 | 
 89 |         // Book-keeping: Save component instances of all children.
 90 |         var childrenInstances = [];
 91 |         var that = this;
 92 |         $.each(children, function (key, child) {
 93 |             var childComponentInstance = instantiateReactComponent(child);
 94 |             childComponentInstance._mountIndex = key;
 95 | 
 96 |             childrenInstances.push(childComponentInstance);
 97 |             // Root id of children is calculated by concatenating it with the rootId of the parent.
 98 |             var curRootId = that._rootNodeID + '.' + key;
 99 |             //
100 |             var childMarkup = childComponentInstance.mountComponent(curRootId);
101 |             // Concatenate together the markup obtained
102 |             content += ' ' + childMarkup;
103 |         });
104 | 
105 |         // The children instances are saved to the current DOM component instance
106 |         this._renderedChildren = childrenInstances;
107 | 
108 |         // Return the final markup of the DOM component
109 |         return tagOpen + '>' + content + tagClose;
110 |     };
111 | 
112 |     // Tag elements mainly have 2 types of updates
113 |     // 1. Attribute property updates - including events
114 |     // 2. Updates to child nodes (more complex)
115 |     //
116 |     // In order to do updates efficiently, we need to do it in 2 steps:
117 |     // Diff - Take a new child node tree and compare it with the previous old child nodes of the tree, to find out the differences between them.
118 |     // Patch - After all differences are found out, do a one-time update.
119 |     // Tip: All Reads + All writes is far more performant that RWRWRW - because browser does a bunch of recals/pains on every RW cycle.
120 |     ReactDOMComponent.prototype.receiveComponent = function (nextElement) {
121 |         var lastProps = this._currentElement.props;
122 |         var nextProps = nextElement.props;
123 | 
124 |         this._currentElement = nextElement;
125 |         // Update DOM properties
126 |         this._updateDOMProperties(lastProps, nextProps);
127 |         // Update DOM children
128 |         this._updateDOMChildren(nextElement.props.children);
129 |     };
130 | 
131 |     ReactDOMComponent.prototype._updateDOMProperties = function (lastProps, nextProps) {
132 |         var propKey;
133 | 
134 |         // If an old attribute/event is not part of the new props - Remove attribute/event listener.
135 |         for (propKey in lastProps) {
136 |             // Continue loop if old prop is still passed in as a part of the new props.
137 |             if (nextProps.hasOwnProperty(propKey) || !lastProps.hasOwnProperty(propKey)) {
138 |                 continue;
139 |             }
140 |             // Remove event listeners if they are not part of the new props anymore.
141 |             if (/^on[A-Za-z]/.test(propKey)) {
142 |                 var eventType = propKey.replace('on', '');
143 |                 // Remove event listener for the current node.
144 |                 $(document).undelegate('[data-reactid="' + this._rootNodeID + '"]', eventType, lastProps[propKey]);
145 |                 continue;
146 |             }
147 | 
148 |             // Remove old attribute/events that are not part of the new props
149 |             $('[data-reactid="' + this._rootNodeID + '"]').removeAttr(propKey)
150 |         }
151 | 
152 |         // For new attributes, write it to DOM node
153 |         for (propKey in nextProps) {
154 |             // Check if event listener using regex.
155 |             if (/^on[A-Za-z]/.test(propKey)) {
156 |                 var eventType = propKey.replace('on', '');
157 |                 // Remove previously attached eventType specific event listeners for the node (generic event)
158 |                 lastProps[propKey] && $(document).undelegate('[data-reactid="' + this._rootNodeID + '"]', eventType, lastProps[propKey]);
159 |                 // Add an event listener for the current node with the _rootNodeID namespace (custom Event)
160 |                 $(document).delegate('[data-reactid="' + this._rootNodeID + '"]', eventType + '.' + this._rootNodeID, nextProps[propKey]);
161 |                 continue;
162 |             }
163 | 
164 |             if (propKey === 'children') {
165 |                 continue;
166 |             }
167 | 
168 |             // Add a new property, or update old property
169 |             $('[data-reactid="' + this._rootNodeID + '"]').prop(propKey, nextProps[propKey])
170 |         }
171 |     };
172 | 
173 |     // Keep track of the current update depth.
174 |     var updateDepth = 0;
175 |     // All the diffs are pushed to this global array.
176 |     var diffQueue = [];
177 | 
178 |     ReactDOMComponent.prototype._updateDOMChildren = function (nextChildrenElements) {
179 |         updateDepth++;
180 |         // _ diff the tree recursively to find the difference - this diff is add to the update queue diffQueue.
181 |         this._diff(diffQueue, nextChildrenElements);
182 |         updateDepth--;
183 |         if (updateDepth == 0) {
184 |             // Call this finally to make a batched update/patch to the DOM
185 |             this._patch(diffQueue);
186 |             diffQueue = [];
187 |         }
188 |     };
189 | 
190 |     // NOTE:
191 |     // 1. The _diff internal recursive calls will call the child nodes' receiveComponent.
192 |     // 2. When a child node is an ordinary browser node, it will go to _updateDOMChildren() in this step.
193 |     // 3. We use `updateDepth` to record the recursive process, only to come back recursively to updateDepth 0.
194 |     // 4. When depth is back to 0 - this means the diff has been analyzed of the trees have been analyzed
195 |     // 5. We can now start making patch updates based on the differences in the queue.
196 | 
197 |     // Types of DOM updates
198 |     var UPDATE_TYPES = {
199 |         MOVE_EXISTING: 1,
200 |         REMOVE_NODE: 2,
201 |         INSERT_MARKUP: 3
202 |     };
203 | 
204 |     // Book keeping - This is an object of element keys mapped to children
205 |     //
206 |     // Normal children is an array, this method converts it to a map.
207 |     // key element is the key
208 |     // - If the key is not passed or if the node is a text element - we use the array index converted to base 36 instead.
209 |     //
210 |     // This key is later used during diffing to determine if the nodes in both the trees are derived form the same component.
211 |     function flattenChildren(componentChildren) {
212 |         var child;
213 |         var name;
214 |         var childrenMap = {};
215 |         for (var i = 0; i < componentChildren.length; i++) {
216 |             child = componentChildren[i];
217 |             name = child && child._currentElement && child._currentElement.key ? child._currentElement.key : i.toString(36);
218 |             // Note: toString(36) - converts to base 36 (hexatrigesimal) to allow large ints
219 |             childrenMap[name] = child;
220 |         }
221 |         return childrenMap;
222 |     }
223 | 
224 |     // Child node elements mainly used to generate a set of components
225 |     // There is a logic to check:
226 |     // 1. If has been updated in th past, if so - it will continue to use the previous componentInstance & call the corresponding receiveComponent().
227 |     // 2. If it is a new node, it will create a new componentInstance,
228 |     function generateComponentChildren(prevChildren, nextChildrenElements) {
229 |         var nextChildren = {};
230 |         nextChildrenElements = nextChildrenElements || [];
231 |         $.each(nextChildrenElements, function (index, element) {
232 |             var name = element.key ? element.key : index;
233 |             var prevChild = prevChildren && prevChildren[name];
234 |             var prevElement = prevChild && prevChild._currentElement;
235 |             var nextElement = element;
236 | 
237 |             // Call _shouldUpdateReactComponent() to determine whether the update is required
238 |             if (_shouldUpdateReactComponent(prevElement, nextElement)) {
239 |                 // To update call receiveComponent()
240 |                 prevChild.receiveComponent(nextElement);
241 |                 // Save the updated child instance to `nextChildren`
242 |                 nextChildren[name] = prevChild;
243 |             } else {
244 |                 // If not an update - create a new instance
245 |                 var nextChildInstance = instantiateReactComponent(nextElement, null);
246 |                 // Save the new child instance to `nextChildren`
247 |                 nextChildren[name] = nextChildInstance;
248 |             }
249 |         });
250 | 
251 |         return nextChildren;
252 |     }
253 | 
254 |     // _ diff() recursively to find the difference - then add it to the update queue diffQueue.
255 |     ReactDOMComponent.prototype._diff = function (diffQueue, nextChildrenElements) {
256 |         var self = this;
257 |         // _renderedChildren - originally an array, we make it into an object Map
258 |         var prevChildren = flattenChildren(self._renderedChildren);
259 |         // Set of component objects generate a new child node, where attention will reuse the old component objects
260 |         var nextChildren = generateComponentChildren(prevChildren, nextChildrenElements);
261 |         self._renderedChildren = [];
262 |         // Update rendered children array with the the latest component instance
263 |         $.each(nextChildren, function (key, instance) {
264 |             self._renderedChildren.push(instance);
265 |         });
266 | 
267 |         // The index of the last visited node
268 |         var lastIndex = 0;
269 |         // The index of the next node to be visited
270 |         var nextIndex = 0;
271 |         // Placeholder name variable used in loops.
272 |         var name;
273 | 
274 |         // Compare the differences between two sets and add nodes to the queue
275 |         for (name in nextChildren) {
276 |             if (!nextChildren.hasOwnProperty(name)) {
277 |                 continue;
278 |             }
279 |             var prevChild = prevChildren && prevChildren[name];
280 |             var nextChild = nextChildren[name];
281 |             // If the same reference -- same words/description is used for a component - we need to do a MOVE operation
282 |             if (prevChild === nextChild) {
283 |                 // Add properties to diff queue
284 |                 // TYPE：MOVE_EXISTING
285 |                 prevChild._mountIndex < lastIndex && diffQueue.push({
286 |                     parentId: self._rootNodeID,
287 |                     parentNode: $('[data-reactid="' + self._rootNodeID + '"]'),
288 |                     type: UPDATE_TYPES.MOVE_EXISTING,
289 |                     fromIndex: prevChild._mountIndex,
290 |                     toIndex: nextIndex
291 |                 });
292 |                 lastIndex = Math.max(prevChild._mountIndex, lastIndex);
293 |             } else { // If not identical -- meaning we need to newly add or remove node.
294 |                 // But if there is still the old, that is a different element, but the same component. We need to delete the corresponding old element.
295 |                 if (prevChild) {
296 |                     // Add properties to diff queue，
297 |                     // TYPE：REMOVE_NODE
298 |                     diffQueue.push({
299 |                         parentId: self._rootNodeID,
300 |                         parentNode: $('[data-reactid="' + self._rootNodeID + '"]'),
301 |                         type: UPDATE_TYPES.REMOVE_NODE,
302 |                         fromIndex: prevChild._mountIndex,
303 |                         toIndex: null
304 |                     });
305 | 
306 |                     // If you have previously rendered it - remember to remove all previous namespaced event listeners.
307 |                     if (prevChild._rootNodeID) {
308 |                         $(document).undelegate('[data-reactid="' + prevChild._rootNodeID + '"]');
309 |                     }
310 |                     lastIndex = Math.max(prevChild._mountIndex, lastIndex);
311 |                 }
312 | 
313 |                 // Add properties to diff queue，
314 |                 // TYPE：INSERT_MARKUP
315 |                 diffQueue.push({
316 |                     parentId: self._rootNodeID,
317 |                     parentNode: $('[data-reactid="' + self._rootNodeID + '"]'),
318 |                     type: UPDATE_TYPES.INSERT_MARKUP,
319 |                     fromIndex: null,
320 |                     toIndex: nextIndex,
321 |                     markup: nextChild.mountComponent(self._rootNodeID + '.' + name) // Extra key in object to indicate the content of new DOM node.
322 |                 });
323 |             }
324 |             // Update the mount index.
325 |             nextChild._mountIndex = nextIndex;
326 |             nextIndex++;
327 |         }
328 | 
329 |         // For old nodes with no new nodes - remove them all.
330 |         for (name in prevChildren) {
331 |             if (prevChildren.hasOwnProperty(name) && !(nextChildren && nextChildren.hasOwnProperty(name))) {
332 |                 // Add properties to diff queue,
333 |                 // TYPE：REMOVE_NODE
334 |                 diffQueue.push({
335 |                     parentId: self._rootNodeID,
336 |                     parentNode: $('[data-reactid="' + self._rootNodeID + '"]'),
337 |                     type: UPDATE_TYPES.REMOVE_NODE,
338 |                     fromIndex: prevChildren[name]._mountIndex,
339 |                     toIndex: null
340 |                 });
341 |                 if (prevChildren[name]._rootNodeID) {
342 |                     $(document).undelegate('[data-reactid="' + prevChildren._rootNodeID + '"]');
343 |                 }
344 |                 // Side Note:
345 |                 // If a DOM element is removed and is reference-free (no references pointing to it)
346 |                 // then the element is picked up by the garbage collector
347 |                 // and any event handlers/listeners associated with it are alss removed.
348 |             }
349 |         }
350 |     };
351 | 
352 |     // For inserting child nodes into a specific
353 |     function insertChildAt(parentNode, childNode, index) {
354 |         var beforeChild = parentNode.children().get(index);
355 |         beforeChild ? childNode.insertBefore(beforeChild) : childNode.appendTo(parentNode);
356 | 
357 |         // ANOTHER WAY TO DO THIS:
358 |         // var beforeChild = index >= parentNode.childNodes.length ? null : parentNode.childNodes.item(index);
359 |         // parentNode.insertBefore(childNode, beforeChild);
360 |     }
361 | 
362 |     ReactDOMComponent.prototype._patch = function (updates) {
363 |         var update;
364 |         var initialChildren = {};
365 |         var deleteChildren = [];
366 |         for (var i = 0; i < updates.length; i++) {
367 |             update = updates[i];
368 |             if (update.type === UPDATE_TYPES.MOVE_EXISTING || update.type === UPDATE_TYPES.REMOVE_NODE) {
369 |                 var updatedIndex = update.fromIndex;
370 |                 var updatedChild = $(update.parentNode.children().get(updatedIndex));
371 |                 var parentId = update.parentId;
372 | 
373 |                 // Need to update all nodes - Saved for later use.
374 |                 initialChildren[parentId] = initialChildren[parentId] || [];
375 |                 // Use parentID as a simple namespace
376 |                 initialChildren[parentId][updatedIndex] = updatedChild;
377 | 
378 |                 // For the node to be moved:
379 |                 // 1. First need to delete the node.
380 |                 // 2. Re-insert it into the correct position.
381 |                 deleteChildren.push(updatedChild)
382 |             }
383 |         }
384 |         // Do Step 1 of Move - Delete
385 |         $.each(deleteChildren, function (index, child) {
386 |             $(child).remove();
387 |         });
388 | 
389 |         // Iterate once again, this time Step 2 - Insert it back to the new position.
390 |         for (var k = 0; k < updates.length; k++) {
391 |             update = updates[k];
392 |             switch (update.type) {
393 |                 case UPDATE_TYPES.INSERT_MARKUP:
394 |                     insertChildAt(update.parentNode, $(update.markup), update.toIndex);
395 |                     break;
396 |                 case UPDATE_TYPES.MOVE_EXISTING:
397 |                     insertChildAt(update.parentNode, initialChildren[update.parentID][update.fromIndex], update.toIndex);
398 |                     break;
399 |                 case UPDATE_TYPES.REMOVE_NODE:
400 |                     // This has already been handled in the previous for-loop.
401 |                     break;
402 |             }
403 |         }
404 |     };
405 | 
406 |     /**                           */
407 |     /** REACT COMPOSITE COMPONENT */
408 |     /**                           */
409 | 
410 |     function ReactCompositeComponent(element) {
411 |         // Save the current element object's reference.
412 |         this._currentElement = element;
413 |         // To store the node reference.
414 |         this._rootNodeID = null;
415 |         // To store the corresponding instance of ReactClass later on.
416 |         this._instance = null;
417 |     }
418 | 
419 |     // Mounting the component to generate the DOM element structure.
420 |     // Should return the current custom elements' render contents.
421 |     ReactCompositeComponent.prototype.mountComponent = function (rootID) {
422 |         this._rootNodeID = rootID;
423 |         // The current element's prop values.
424 |         var publicProps = this._currentElement.props;
425 |         // The current element's ReactClass (Component class).
426 |         var ReactClass = this._currentElement.type;
427 |         // Initialize the public class
428 |         var inst = new ReactClass(publicProps);
429 |         this._instance = inst;
430 |         // Maintain reference to the current component - for future updates.
431 |         inst._reactInternalInstance = this;
432 | 
433 |         if (inst.componentWillMount) {
434 |             inst.componentWillMount();
435 |             // There is a lot more additional logic here in the complete library - but we'll keep it simple here.
436 |         }
437 |         // Call the ReactClass instance's render method - this returns an element or a text node
438 |         var renderedElement = this._instance.render();
439 |         // Get component class instance of the rendered element.
440 |         var renderedComponentInstance = instantiateReactComponent(renderedElement);
441 |         this._renderedComponent = renderedComponentInstance; // Save component instance for later use.
442 | 
443 |         // Get string content after rendering, the current _rootNodeID passed to render the node.
444 |         var renderedMarkup = renderedComponentInstance.mountComponent(this._rootNodeID);
445 | 
446 |         // Add an event listener for 'mountReady' event - which is triggered when React.render() completes.
447 |         $(document).on('mountReady', function () {
448 |             // call inst.componentDidMount
449 |             inst.componentDidMount && inst.componentDidMount();
450 |         });
451 | 
452 |         return renderedMarkup;
453 |     };
454 | 
455 |     // Update
456 |     ReactCompositeComponent.prototype.receiveComponent = function (nextElement, newState) {
457 |         // If nextElement is passed - it becomes the current element (we pass nextElement below while recursing)
458 |         this._currentElement = nextElement || this._currentElement;
459 | 
460 |         var inst = this._instance;
461 |         // Merge state and assign props.
462 |         var nextState = $.extend(inst.state, newState);
463 |         var nextProps = this._currentElement.props;
464 | 
465 |         // Update state & props in instance
466 |         inst.state = nextState;
467 |         inst.props = nextProps;
468 | 
469 |         // If there is shouldComponentUpdate inst and returns false. Do not update the component - just return.
470 |         if (inst.shouldComponentUpdate && (inst.shouldComponentUpdate(nextProps, nextState) === false)) {
471 |             return;
472 |         }
473 | 
474 |         // If there is componentWillUpdate - Call it to indicate start of update.
475 |         if (inst.componentWillUpdate) {
476 |             inst.componentWillUpdate(nextProps, nextState);
477 |         }
478 | 
479 |         var prevComponentInstance = this._renderedComponent;
480 |         var prevRenderedElement = prevComponentInstance._currentElement;
481 |         // Execute render for the current instance.
482 |         var nextRenderedElement = this._instance.render();
483 | 
484 |         // Condition checks if the component needs to be updated or render a completely different element (replace).
485 |         // Note that the _shouldUpdateReactComponent is a global method and different from the component's shouldComponentUpdate
486 |         if (_shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) {
487 |             // If you need to update, continue to call the child node receiveComponent method, passing the new element updating child nodes.
488 |             prevComponentInstance.receiveComponent(nextRenderedElement);
489 |             // Complete update by calling the component's corresponding componentDidUpdate()
490 |             inst.componentDidUpdate && inst.componentDidUpdate();
491 |         } else {
492 |             // If you find two completely different element, then just re-render the
493 |             var thisID = this._rootNodeID;
494 |             // Instantiate the corresponding Component.
495 |             this._renderedComponent = this._instantiateReactComponent(nextRenderedElement);
496 |             // Mount the corresponding component and get its DOM content.
497 |             var nextMarkup = _renderedComponent.mountComponent(thisID);
498 |             // Replace the entire node.
499 |             $('[data-reactid="' + this._rootNodeID + '"]').replaceWith(nextMarkup);
500 |         }
501 |     };
502 | 
503 |     // Used to compare two elements and determine if update is needed
504 |     // Checks if element types are the same and if an object also checks for the `key` which uniquely identifiess the element.
505 |     var _shouldUpdateReactComponent = function (prevElement, nextElement) {
506 |         if (prevElement && nextElement) {
507 |             var prevType = typeof prevElement;
508 |             var nextType = typeof nextElement;
509 |             if (prevType === 'string' || prevType === 'number') {
510 |                 return nextType === 'string' || nextType === 'number';
511 |             } else {
512 |                 return nextType === 'object' && prevElement.type === nextElement.type && prevElement.key === nextElement.key;
513 |             }
514 |         }
515 |         return false;
516 |     };
517 | 
518 |     function instantiateReactComponent(node) {
519 |         // If a text node
520 |         if (typeof node === 'string' || typeof node === 'number') {
521 |             return new ReactDOMTextComponent(node);
522 |         }
523 |         // If a browser tag/node
524 |         if (typeof node === 'object' && typeof node.type === 'string') {
525 |             return new ReactDOMComponent(node);
526 |         }
527 |         // If composite element node
528 |         if (typeof node === 'object' && typeof node.type === 'function') {
529 |             return new ReactCompositeComponent(node);
530 |         }
531 |     }
532 | 
533 |     // React Element's instance is basically what we call the Virtual DOM.
534 |     // It has a type attribute representing the current node type, as well as props attribute for the node.
535 |     // Also here the `key` is used to uniquely identify this element regardless of where you are in the DOM tree + optimizations for future updates
536 |     function ReactElement(type, key, props) {
537 |         this.type = type;
538 |         this.key = key;
539 |         this.props = props;
540 |     }
541 | 
542 |     // ReactClass - In a way this is the Super class
543 |     // For demo purposes, we're keep ReactClass simple - the original code handles a lot of things,
544 |     // eg. mixin class inheritance support, componentDidMount etc.
545 |     var ReactClass = function () {
546 |     };
547 | 
548 |     // This leaves subclasses to inherit the render
549 |     ReactClass.prototype.render = function () {
550 |     };
551 | 
552 |     // setState
553 |     ReactClass.prototype.setState = function (newState) {
554 |         // Remember when we mount the ReactCompositeComponent - we save a reference to its instance.
555 |         // So here, we can get the corresponding ReactCompositeComponent instance _reactInternalInstance
556 |         // and call its receiveComponent() - which handles updates to a component.
557 |         this._reactInternalInstance.receiveComponent(null, newState);
558 |         // Note:
559 |         // mountComponent is implemented to deal with the component's initial rendering.
560 |         // receiveComponent - should be implemented in all classes that need to handle their own updates.
561 |     };
562 | 
563 |     React = {
564 |         nextReactRootIndex: 0,
565 |         createClass: function (spec) {
566 |             // Generate a subclass
567 |             var Constructor = function (props) {
568 |                 this.props = props;
569 |                 this.state = this.getInitialState ? this.getInitialState() : null;
570 |             };
571 |             // Prototype Inheritance
572 |             // This is a way to implement two levels of inheritance with constructor.
573 |             // If not clear check this: http://stackoverflow.com/a/7719184/1672655
574 |             Constructor.prototype = new ReactClass();        // (or) Object.create(ReactClass.prototype)
575 |             Constructor.prototype.constructor = Constructor; // Setting back the constructor to `Constructor`
576 | 
577 |             // Combine spec with prototype
578 |             $.extend(Constructor.prototype, spec);
579 |             return Constructor;
580 |         },
581 |         createElement: function (type, config, children) {
582 |             var props = {};
583 |             var propName;
584 |             config = config || {};
585 |             // Check if the key  is specified - if so it is easy to quickly identify and update the element in future.
586 |             var key = config.key || null;
587 | 
588 |             // Copy config object over as props.
589 |             for (propName in config) {
590 |                 if (config.hasOwnProperty(propName) && propName !== 'key') {
591 |                     props[propName] = config[propName];
592 |                 }
593 |             }
594 | 
595 |             // Handle children - which can be passed as additional params to createlement()
596 |             var childrenLength = arguments.length - 2;
597 |             if (childrenLength === 1) {
598 |                 props.children = Array.isArray(children) ? children : [children];
599 |             } else if (childrenLength > 1) {
600 |                 var childArray = [];
601 |                 for (var i = 0; i < childrenLength; i++) {
602 |                     childArray[i] = arguments[i + 2];
603 |                 }
604 |                 props.children = childArray;
605 |             }
606 | 
607 |             return new ReactElement(type, key, props);
608 |         },
609 |         render: function (element, container) {
610 |             var componentInstance = instantiateReactComponent(element);
611 |             var markup = componentInstance.mountComponent(React.nextReactRootIndex++);
612 |             $(container).html(markup);
613 |             // Trigger the mount complete event
614 |             $(document).trigger('mountReady');
615 |         }
616 |     };
617 | 
618 |     var HelloMessage = React.createClass({
619 |         getInitialState: function () {
620 |             return {
621 |                 type: 'say:'
622 |             };
623 |         },
624 |         changeType: function () {
625 |             // This is updated asynchronously, because we kep track of lastindex - so most of the nodes do not need to be removed
626 |             this.props.name = 'OBAMA';
627 |             this.setState({
628 |                 type: 'shout:'
629 |             })
630 |         },
631 |         render: function () {
632 |             return React.createElement("div", {
633 |                 onclick: this.changeType.bind(this)
634 |             }, this.state.type, "Thanks ", this.props.name);
635 |         }
636 |     });
637 | 
638 |     React.render(React.createElement(HelloMessage, {
639 |         name: "Obama"
640 |     }), document.getElementById("container"));
641 | 
642 |     /**
643 |      * Generated HTML is:
644 |      *
645 |      * <div id="container">
646 |      *     <div data-reactid="0">
647 |      *         <span data-reactid="0.0">say:</span>
648 |      *         <span data-reactid="0.1">Hello </span>
649 |      *         <span data-reactid="0.2">John</span>
650 |      *     </div>
651 |      * </div>
652 |      *
653 |      * Click on the text, say it will become a shout:
654 |      *
655 |      * <div id="container">
656 |      *     <div data-reactid="0">
657 |      *         <span data-reactid="0.0">shout:</span>
658 |      *         <span data-reactid="0.1">Hello </span>
659 |      *         <span data-reactid="0.2">JOHN</span>
660 |      *     </div>
661 |      * </div>
662 |      */
663 | 
664 | </script>
665 | </body>
666 | 
667 | 
668 | </html>


--------------------------------------------------------------------------------
/build-and-learn/5.todo-list-example.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta http-equiv="content-type" content="text/html;charset=utf-8">
 5 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 6 |     <script src="../react-lite.js"></script>
 7 | 
 8 |     <style type="text/css">
 9 |         #container {
10 |             width: 500px;
11 |             background-color: #fafafa;
12 |             min-height: 200px;
13 |             margin: 100px auto;
14 |             text-align: center;
15 |             padding: 20px;
16 | 
17 |         }
18 | 
19 |         #container p {
20 |             display: inline-block;
21 |             border: 1px solid #999;
22 |             padding: 5px 5px;
23 |             cursor: pointer;
24 |         }
25 | 
26 |         #container input {
27 |             width: 200px;
28 |             border: 1px solid #999;
29 |             padding: 6px;
30 |             vertical-align: 1px;
31 |         }
32 |     </style>
33 | 
34 | </head>
35 | 
36 | <body>
37 | 
38 | <div id="container"></div>
39 | 
40 | <script type="text/javascript">
41 |     var TodoList = React.createClass({
42 |         getInitialState: function () {
43 |             return {items: []};
44 |         },
45 |         add: function () {
46 |             var nextItems = this.state.items.concat([this.state.text]);
47 |             this.setState({items: nextItems, text: ''});
48 |         },
49 |         onChange: function (e) {
50 |             this.setState({text: e.target.value});
51 |         },
52 |         render: function () {
53 |             var createItem = function (itemText) {
54 |                 return React.createElement("div", null, itemText);
55 |             };
56 | 
57 |             var lists = this.state.items.map(createItem);
58 |             var input = React.createElement("input", {onkeyup: this.onChange.bind(this), value: this.state.text});
59 |             var button = React.createElement("p", {onclick: this.add.bind(this)}, 'Add#' + (this.state.items.length + 1));
60 |             var children = [input, button].concat(lists);
61 | 
62 |             return React.createElement("div", null, children);
63 |         }
64 |     });
65 | 
66 |     React.render(React.createElement(TodoList), document.getElementById("container"));
67 | </script>
68 | </body>
69 | 
70 | 
71 | </html>


--------------------------------------------------------------------------------
/demo/todo-list-complete.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <meta http-equiv="content-type" content="text/html;charset=utf-8">
  5 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  6 |     <script src="../react-lite.js"></script>
  7 |     <style type="text/css">
  8 |         .vert-offset-top-0 {
  9 |             margin-top: 0em;
 10 |         }
 11 | 
 12 |         .vert-offset-top-2 {
 13 |             margin-top: 2em;
 14 |         }
 15 |     </style>
 16 |     <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
 17 | </head>
 18 | 
 19 | <body>
 20 | 
 21 | <section class="container vert-offset-top-2">
 22 |     <div id="todoBox" class="todoBox col-xs-6 col-xs-offset-3"></div>
 23 | </section>
 24 | 
 25 | <script type="text/javascript">
 26 |     var TodoBox = React.createClass({
 27 |         displayName: "TodoBox",
 28 | 
 29 |         getInitialState: function getInitialState() {
 30 |             return {
 31 |                 data: [{"id": "00001", "task": "Wake up", "complete": "false"}, {
 32 |                     "id": "00002",
 33 |                     "task": "Eat breakfast",
 34 |                     "complete": "false"
 35 |                 }, {"id": "00003", "task": "Go to work", "complete": "false"}]
 36 |             };
 37 |         },
 38 |         generateId: function generateId() {
 39 |             return Math.floor(Math.random() * 90000) + 10000;
 40 |         },
 41 |         handleNodeRemoval: function handleNodeRemoval(nodeId) {
 42 |             var data = this.state.data;
 43 |             data = data.filter(function (el) {
 44 |                 return el.id !== nodeId;
 45 |             });
 46 |             this.setState({data: data});
 47 |         },
 48 |         handleSubmit: function handleSubmit(task) {
 49 |             var data = this.state.data;
 50 |             var id = this.generateId().toString();
 51 |             var complete = 'false';
 52 |             data = data.concat([{id: id, task: task, complete: complete}]);
 53 |             this.setState({data: data});
 54 |         },
 55 |         handleToggleComplete: function handleToggleComplete(nodeId) {
 56 |             var data = this.state.data;
 57 |             for (var i in data) {
 58 |                 if (data[i].id == nodeId) {
 59 |                     data[i].complete = data[i].complete === 'true' ? 'false' : 'true';
 60 |                     break;
 61 |                 }
 62 |             }
 63 |             this.setState({data: data});
 64 |         },
 65 |         render: function render() {
 66 |             return React.createElement(
 67 |                     "div",
 68 |                     {class: "well"},
 69 |                     React.createElement(
 70 |                             "h1",
 71 |                             {class: "vert-offset-top-0"},
 72 |                             "To do:"
 73 |                     ),
 74 |                     React.createElement(TodoList, {
 75 |                         data: this.state.data,
 76 |                         removeNode: this.handleNodeRemoval.bind(this),
 77 |                         toggleComplete: this.handleToggleComplete.bind(this)
 78 |                     }),
 79 |                     React.createElement(TodoForm, {onTaskSubmit: this.handleSubmit.bind(this)})
 80 |             );
 81 |         }
 82 |     });
 83 | 
 84 |     var TodoList = React.createClass({
 85 |         displayName: "TodoList",
 86 | 
 87 |         removeNode: function removeNode(nodeId) {
 88 |             this.props.removeNode(nodeId);
 89 |         },
 90 |         toggleComplete: function toggleComplete(nodeId) {
 91 |             this.props.toggleComplete(nodeId);
 92 |         },
 93 |         render: function render() {
 94 |             var listNodes = this.props.data.map(function (listItem) {
 95 |                 return React.createElement(TodoItem, {
 96 |                     key: listItem.id,
 97 |                     nodeId: listItem.id,
 98 |                     task: listItem.task,
 99 |                     complete: listItem.complete,
100 |                     removeNode: this.removeNode.bind(this),
101 |                     toggleComplete: this.toggleComplete.bind(this)
102 |                 });
103 |             }, this);
104 |             return React.createElement(
105 |                     "ul",
106 |                     {class: "list-group"},
107 |                     listNodes
108 |             );
109 |         }
110 |     });
111 | 
112 |     var TodoItem = React.createClass({
113 |         removeNode: function removeNode(e) {
114 |             e.preventDefault();
115 |             this.props.removeNode(this.props.nodeId);
116 |         },
117 |         toggleComplete: function toggleComplete(e) {
118 |             e.preventDefault();
119 |             this.props.toggleComplete(this.props.nodeId);
120 |         },
121 |         updateClass: function updateClass() {
122 |         },
123 |         render: function render() {
124 |             var classes = 'list-group-item clearfix';
125 |             if (this.props.complete === 'true') {
126 |                 classes = classes + ' list-group-item-success';
127 |             }
128 |             return React.createElement(
129 |                     "li",
130 |                     {class: classes},
131 |                     this.props.task,
132 |                     React.createElement(
133 |                             "div",
134 |                             {class: "pull-right", role: "group"},
135 |                             React.createElement(
136 |                                     "button",
137 |                                     {
138 |                                         type: "button",
139 |                                         class: "btn btn-xs btn-success img-circle",
140 |                                         onclick: this.toggleComplete.bind(this)
141 |                                     },
142 |                                     "\u2713"
143 |                             ),
144 |                             " ",
145 |                             React.createElement(
146 |                                     "button",
147 |                                     {
148 |                                         type: "button",
149 |                                         class: "btn btn-xs btn-danger img-circle",
150 |                                         onclick: this.removeNode.bind(this)
151 |                                     },
152 |                                     "\uFF38"
153 |                             )
154 |                     )
155 |             );
156 |         }
157 |     });
158 | 
159 |     var TodoForm = React.createClass({
160 |         doSubmit: function doSubmit(e) {
161 |             e.preventDefault();
162 |             var task = document.getElementById('task').value.trim();
163 |             if (!task) {
164 |                 return;
165 |             }
166 |             this.props.onTaskSubmit(task);
167 |             document.getElementById('task').value = '';
168 |         },
169 |         render: function render() {
170 |             return React.createElement(
171 |                     "div",
172 |                     {class: "commentForm vert-offset-top-2"},
173 |                     React.createElement("hr", null),
174 |                     React.createElement(
175 |                             "div",
176 |                             {class: "clearfix"},
177 |                             React.createElement(
178 |                                     "form",
179 |                                     {class: "todoForm form-horizontal", onsubmit: this.doSubmit.bind(this)},
180 |                                     React.createElement(
181 |                                             "div",
182 |                                             {class: "form-group"},
183 |                                             React.createElement(
184 |                                                     "label",
185 |                                                     {htmlFor: "task", class: "col-md-2 control-label"},
186 |                                                     "Task"
187 |                                             ),
188 |                                             React.createElement(
189 |                                                     "div",
190 |                                                     {class: "col-md-10"},
191 |                                                     React.createElement("input", {
192 |                                                         type: "text",
193 |                                                         id: "task",
194 |                                                         class: "form-control",
195 |                                                         placeholder: "What do you need to do?"
196 |                                                     })
197 |                                             )
198 |                                     ),
199 |                                     React.createElement(
200 |                                             "div",
201 |                                             {class: "row"},
202 |                                             React.createElement(
203 |                                                     "div",
204 |                                                     {class: "col-md-10 col-md-offset-2 text-right"},
205 |                                                     React.createElement("input", {
206 |                                                         type: "submit",
207 |                                                         value: "Save Item",
208 |                                                         class: "btn btn-primary"
209 |                                                     })
210 |                                             )
211 |                                     )
212 |                             )
213 |                     )
214 |             );
215 |         }
216 |     });
217 | 
218 |     React.render(React.createElement(TodoBox, null), document.getElementById('todoBox'));
219 | </script>
220 | </body>
221 | 
222 | 
223 | </html>


--------------------------------------------------------------------------------
/react-lite.js:
--------------------------------------------------------------------------------
  1 | /**                          */
  2 | /** REACT DOM TEXT COMPONENT */
  3 | /**                          */
  4 | 
  5 | // Component class used to represent text render/update/delete
  6 | function ReactDOMTextComponent(text) {
  7 |   // Saves text passed through
  8 |   this._currentElement = '' + text;
  9 |   // Root NodeID is used to identify the current DOMTextComponent
 10 |   this._rootNodeID = null;
 11 | }
 12 | 
 13 | // Handles Mount - Here's where the component render generates it's corresponding DOM structure.
 14 | ReactDOMTextComponent.prototype.mountComponent = function (rootID) {
 15 |   this._rootNodeID = rootID;
 16 |   return '<span data-reactid="' + rootID + '">' + this._currentElement + '</span>';
 17 | };
 18 | 
 19 | ReactDOMTextComponent.prototype.receiveComponent = function (nextText) {
 20 |   var nextStringText = '' + nextText;
 21 |   // Comparison with the previously saved string
 22 |   if (nextStringText !== this._currentElement) {
 23 |     this._currentElement = nextStringText;
 24 |     // Replace entire node
 25 |     document.querySelector('[data-reactid="' + this._rootNodeID + '"]').innerHTML = this._currentElement;
 26 |   }
 27 | };
 28 | 
 29 | /**                     */
 30 | /** REACT DOM COMPONENT */
 31 | /**                     */
 32 | 
 33 | // Component class used to represent HTML tag DOM elements' render/update/delete
 34 | function ReactDOMComponent(element) {
 35 |   // Save the current element object's reference
 36 |   this._currentElement = element;
 37 |   this._rootNodeID = null;
 38 | }
 39 | 
 40 | // Mounting the component to generate the DOM element structure.
 41 | ReactDOMComponent.prototype.mountComponent = function (rootID) {
 42 |   // Copy root id to the instance.
 43 |   this._rootNodeID = rootID;
 44 |   var props = this._currentElement.props;
 45 |   var tagOpen = '<' + this._currentElement.type;
 46 |   var tagClose = '</' + this._currentElement.type + '>';
 47 | 
 48 |   // Add react-id identification to the node as a data attribute.
 49 |   // The data-reactid attribute is a custom attribute used so that React can uniquely identify its components within the DOM.
 50 |   // This is important because React applications can be rendered at the server as well as the client.
 51 |   //
 52 |   // More: http://stackoverflow.com/a/33967810/1672655
 53 |   // React 15 uses document.createElement instead, so client rendered markup won't include these attributes anymore.
 54 |   tagOpen += ' data-reactid="' + this._rootNodeID + '"';
 55 | 
 56 |   // Put together prop values into the tag
 57 |   for (var propKey in props) {
 58 |     // Handle EventListeners passed in props - identified via regex.
 59 |     if (/^on[A-Za-z]/.test(propKey)) {
 60 |       var eventType = propKey.replace('on', '');
 61 |       // Add the event listener as a custom event on the current DOM node - identfied via the rootNodeId values.
 62 |       $(document).on(eventType + '.' + this._rootNodeID, '[data-reactid="' + this._rootNodeID + '"]', props[propKey]);
 63 |     }
 64 | 
 65 |     // Ignore children and event listener props. -- Rest of the props are assigned as attributes to the DOM element.
 66 |     if (props[propKey] && propKey !== 'children' && !/^on[A-Za-z]/.test(propKey)) {
 67 |       tagOpen += ' ' + propKey + '="' + props[propKey] + '"';
 68 |     }
 69 |   }
 70 | 
 71 |   // Recursively get the child nodes' render() content as well.
 72 |   var content = '';
 73 |   var children = props.children || [];
 74 | 
 75 |   // Book-keeping: Save component instances of all children.
 76 |   var childrenInstances = [];
 77 |   var that = this;
 78 |   $.each(children, function (key, child) {
 79 |     var childComponentInstance = instantiateReactComponent(child);
 80 |     childComponentInstance._mountIndex = key;
 81 | 
 82 |     childrenInstances.push(childComponentInstance);
 83 |     // Root id of children is calculated by concatenating it with the rootId of the parent.
 84 |     var curRootId = that._rootNodeID + '.' + key;
 85 |     //
 86 |     var childMarkup = childComponentInstance.mountComponent(curRootId);
 87 |     // Concatenate together the markup obtained
 88 |     content += ' ' + childMarkup;
 89 |   });
 90 | 
 91 |   // The children instances are saved to the current DOM component instance
 92 |   this._renderedChildren = childrenInstances;
 93 | 
 94 |   // Return the final markup of the DOM component
 95 |   return tagOpen + '>' + content + tagClose;
 96 | };
 97 | 
 98 | // Tag elements mainly have 2 types of updates
 99 | // 1. Attribute property updates - including events
100 | // 2. Updates to child nodes (more complex)
101 | //
102 | // In order to do updates efficiently, we need to do it in 2 steps:
103 | // Diff - Take a new child node tree and compare it with the previous old child nodes of the tree, to find out the differences between them.
104 | // Patch - After all differences are found out, do a one-time update.
105 | // Tip: All Reads + All writes is far more performant that RWRWRW - because browser does a bunch of recals/pains on every RW cycle.
106 | ReactDOMComponent.prototype.receiveComponent = function (nextElement) {
107 |   var lastProps = this._currentElement.props;
108 |   var nextProps = nextElement.props;
109 | 
110 |   this._currentElement = nextElement;
111 |   // Update DOM properties
112 |   this._updateDOMProperties(lastProps, nextProps);
113 |   // Update DOM children
114 |   this._updateDOMChildren(nextElement.props.children);
115 | };
116 | 
117 | ReactDOMComponent.prototype._updateDOMProperties = function (lastProps, nextProps) {
118 |   var propKey;
119 | 
120 |   // If an old attribute/event is not part of the new props - Remove attribute/event listener.
121 |   for (propKey in lastProps) {
122 |     // Continue loop if old prop is still passed in as a part of the new props.
123 |     if (nextProps.hasOwnProperty(propKey) || !lastProps.hasOwnProperty(propKey)) {
124 |       continue;
125 |     }
126 |     // Remove event listeners if they are not part of the new props anymore.
127 |     if (/^on[A-Za-z]/.test(propKey)) {
128 |       var eventType = propKey.replace('on', '');
129 |       // Remove event listener for the current node.
130 |       $(document).off(eventType, '[data-reactid="' + this._rootNodeID + '"]', lastProps[propKey]);
131 |       continue;
132 |     }
133 | 
134 |     // Remove old attribute/events that are not part of the new props
135 |     $('[data-reactid="' + this._rootNodeID + '"]').removeAttr(propKey)
136 |   }
137 | 
138 |   // For new attributes, write it to DOM node
139 |   for (propKey in nextProps) {
140 |     // Check if event listener using regex.
141 |     if (/^on[A-Za-z]/.test(propKey)) {
142 |       var eventType = propKey.replace('on', '');
143 |       // Remove previously attached eventType specific event listeners for the node (generic event)
144 |       lastProps[propKey] && $(document).undelegate('[data-reactid="' + this._rootNodeID + '"]', eventType, lastProps[propKey]);
145 |       // Add an event listener for the current node with the _rootNodeID namespace (custom Event)
146 |       $(document).on(eventType + '.' + this._rootNodeID, '[data-reactid="' + this._rootNodeID + '"]', nextProps[propKey]);
147 |       continue;
148 |     }
149 | 
150 |     if (propKey === 'children') {
151 |       continue;
152 |     }
153 | 
154 |     // Add a new property, or update old property
155 |     $('[data-reactid="' + this._rootNodeID + '"]').prop(propKey, nextProps[propKey])
156 |   }
157 | };
158 | 
159 | // Keep track of the current update depth.
160 | var updateDepth = 0;
161 | // All the diffs are pushed to this global array.
162 | var diffQueue = [];
163 | 
164 | ReactDOMComponent.prototype._updateDOMChildren = function (nextChildrenElements) {
165 |   updateDepth++;
166 |   // _ diff the tree recursively to find the difference - this diff is add to the update queue diffQueue.
167 |   this._diff(diffQueue, nextChildrenElements);
168 |   updateDepth--;
169 |   if (updateDepth == 0) {
170 |     // Call this finally to make a batched update/patch to the DOM
171 |     this._patch(diffQueue);
172 |     diffQueue = [];
173 |   }
174 | };
175 | 
176 | // NOTE:
177 | // 1. The _diff internal recursive calls will call the child nodes' receiveComponent.
178 | // 2. When a child node is an ordinary browser node, it will go to _updateDOMChildren() in this step.
179 | // 3. We use `updateDepth` to record the recursive process, only to come back recursively to updateDepth 0.
180 | // 4. When depth is back to 0 - this means the diff has been analyzed of the trees have been analyzed
181 | // 5. We can now start making patch updates based on the differences in the queue.
182 | 
183 | // Types of DOM updates
184 | var UPDATE_TYPES = {
185 |   MOVE_EXISTING: 1,
186 |   REMOVE_NODE: 2,
187 |   INSERT_MARKUP: 3
188 | };
189 | 
190 | // Book keeping - This is an object of element keys mapped to children
191 | //
192 | // Normal children is an array, this method converts it to a map.
193 | // key element is the key
194 | // - If the key is not passed or if the node is a text element - we use the array index converted to base 36 instead.
195 | //
196 | // This key is later used during diffing to determine if the nodes in both the trees are derived form the same component.
197 | function flattenChildren(componentChildren) {
198 |   var child;
199 |   var name;
200 |   var childrenMap = {};
201 |   for (var i = 0; i < componentChildren.length; i++) {
202 |     child = componentChildren[i];
203 |     name = child && child._currentElement && child._currentElement.key ? child._currentElement.key : i.toString(36);
204 |     // Note: toString(36) - converts to base 36 (hexatrigesimal) to allow large ints
205 |     childrenMap[name] = child;
206 |   }
207 |   return childrenMap;
208 | }
209 | 
210 | // Child node elements mainly used to generate a set of components
211 | // There is a logic to check:
212 | // 1. If has been updated in th past, if so - it will continue to use the previous componentInstance & call the corresponding receiveComponent().
213 | // 2. If it is a new node, it will create a new componentInstance,
214 | function generateComponentChildren(prevChildren, nextChildrenElements) {
215 |   var nextChildren = {};
216 |   nextChildrenElements = nextChildrenElements || [];
217 |   $.each(nextChildrenElements, function (index, element) {
218 |     var name = element.key ? element.key : index;
219 |     var prevChild = prevChildren && prevChildren[name];
220 |     var prevElement = prevChild && prevChild._currentElement;
221 |     var nextElement = element;
222 | 
223 |     // Call _shouldUpdateReactComponent() to determine whether the update is required
224 |     if (_shouldUpdateReactComponent(prevElement, nextElement)) {
225 |       // To update call receiveComponent()
226 |       prevChild.receiveComponent(nextElement);
227 |       // Save the updated child instance to `nextChildren`
228 |       nextChildren[name] = prevChild;
229 |     } else {
230 |       // If not an update - create a new instance
231 |       var nextChildInstance = instantiateReactComponent(nextElement, null);
232 |       // Save the new child instance to `nextChildren`
233 |       nextChildren[name] = nextChildInstance;
234 |     }
235 |   });
236 | 
237 |   return nextChildren;
238 | }
239 | 
240 | // _ diff() recursively to find the difference - then add it to the update queue diffQueue.
241 | ReactDOMComponent.prototype._diff = function (diffQueue, nextChildrenElements) {
242 |   var self = this;
243 |   // _renderedChildren - originally an array, we make it into an object Map
244 |   var prevChildren = flattenChildren(self._renderedChildren);
245 |   // Set of component objects generate a new child node, where attention will reuse the old component objects
246 |   var nextChildren = generateComponentChildren(prevChildren, nextChildrenElements);
247 |   self._renderedChildren = [];
248 |   // Update rendered children array with the the latest component instance
249 |   $.each(nextChildren, function (key, instance) {
250 |     self._renderedChildren.push(instance);
251 |   });
252 | 
253 |   // The index of the last visited node
254 |   var lastIndex = 0;
255 |   // The index of the next node to be visited
256 |   var nextIndex = 0;
257 |   // Placeholder name variable used in loops.
258 |   var name;
259 | 
260 |   // Compare the differences between two sets and add nodes to the queue
261 |   for (name in nextChildren) {
262 |     if (!nextChildren.hasOwnProperty(name)) {
263 |       continue;
264 |     }
265 |     var prevChild = prevChildren && prevChildren[name];
266 |     var nextChild = nextChildren[name];
267 |     // If the same reference -- same words/description is used for a component - we need to do a MOVE operation
268 |     if (prevChild === nextChild) {
269 |       // Add properties to diff queue
270 |       // TYPE：MOVE_EXISTING
271 |       prevChild._mountIndex < lastIndex && diffQueue.push({
272 |         parentId: self._rootNodeID,
273 |         parentNode: $('[data-reactid="' + self._rootNodeID + '"]'),
274 |         type: UPDATE_TYPES.MOVE_EXISTING,
275 |         fromIndex: prevChild._mountIndex,
276 |         toIndex: nextIndex
277 |       });
278 |       lastIndex = Math.max(prevChild._mountIndex, lastIndex);
279 |     } else { // If not identical -- meaning we need to newly add or remove node.
280 |       // But if there is still the old, that is a different element, but the same component. We need to delete the corresponding old element.
281 |       if (prevChild) {
282 |         // Add properties to diff queue，
283 |         // TYPE：REMOVE_NODE
284 |         diffQueue.push({
285 |           parentId: self._rootNodeID,
286 |           parentNode: $('[data-reactid="' + self._rootNodeID + '"]'),
287 |           type: UPDATE_TYPES.REMOVE_NODE,
288 |           fromIndex: prevChild._mountIndex,
289 |           toIndex: null
290 |         });
291 | 
292 |         // If you have previously rendered it - remember to remove all previous namespaced event listeners.
293 |         if (prevChild._rootNodeID) {
294 |           $(document).off('[data-reactid="' + prevChild._rootNodeID + '"]');
295 |         }
296 |         lastIndex = Math.max(prevChild._mountIndex, lastIndex);
297 |       }
298 | 
299 |       // Add properties to diff queue，
300 |       // TYPE：INSERT_MARKUP
301 |       diffQueue.push({
302 |         parentId: self._rootNodeID,
303 |         parentNode: $('[data-reactid="' + self._rootNodeID + '"]'),
304 |         type: UPDATE_TYPES.INSERT_MARKUP,
305 |         fromIndex: null,
306 |         toIndex: nextIndex,
307 |         markup: nextChild.mountComponent(self._rootNodeID + '.' + name) // Extra key in object to indicate the content of new DOM node.
308 |       });
309 |     }
310 |     // Update the mount index.
311 |     nextChild._mountIndex = nextIndex;
312 |     nextIndex++;
313 |   }
314 | 
315 |   // For old nodes with no new nodes - remove them all.
316 |   for (name in prevChildren) {
317 |     if (prevChildren.hasOwnProperty(name) && !(nextChildren && nextChildren.hasOwnProperty(name))) {
318 |       // Add properties to diff queue,
319 |       // TYPE：REMOVE_NODE
320 |       diffQueue.push({
321 |         parentId: self._rootNodeID,
322 |         parentNode: $('[data-reactid="' + self._rootNodeID + '"]'),
323 |         type: UPDATE_TYPES.REMOVE_NODE,
324 |         fromIndex: prevChildren[name]._mountIndex,
325 |         toIndex: null
326 |       });
327 |       if (prevChildren[name]._rootNodeID) {
328 |         $(document).off('[data-reactid="' + prevChildren._rootNodeID + '"]');
329 |       }
330 |       // Side Note:
331 |       // If a DOM element is removed and is reference-free (no references pointing to it)
332 |       // then the element is picked up by the garbage collector
333 |       // and any event handlers/listeners associated with it are alss removed.
334 |     }
335 |   }
336 | };
337 | 
338 | // For inserting child nodes into a specific
339 | function insertChildAt(parentNode, childNode, index) {
340 |   var beforeChild = parentNode.children().get(index);
341 |   beforeChild ? childNode.insertBefore(beforeChild) : childNode.appendTo(parentNode);
342 | 
343 |   // ANOTHER WAY TO DO THIS:
344 |   // var beforeChild = index >= parentNode.childNodes.length ? null : parentNode.childNodes.item(index);
345 |   // parentNode.insertBefore(childNode, beforeChild);
346 | }
347 | 
348 | ReactDOMComponent.prototype._patch = function (updates) {
349 |   var update;
350 |   var initialChildren = {};
351 |   var deleteChildren = [];
352 |   for (var i = 0; i < updates.length; i++) {
353 |     update = updates[i];
354 |     if (update.type === UPDATE_TYPES.MOVE_EXISTING || update.type === UPDATE_TYPES.REMOVE_NODE) {
355 |       var updatedIndex = update.fromIndex;
356 |       var updatedChild = $(update.parentNode.children().get(updatedIndex));
357 |       var parentId = update.parentId;
358 | 
359 |       // Need to update all nodes - Saved for later use.
360 |       initialChildren[parentId] = initialChildren[parentId] || [];
361 |       // Use parentID as a simple namespace
362 |       initialChildren[parentId][updatedIndex] = updatedChild;
363 | 
364 |       // For the node to be moved:
365 |       // 1. First need to delete the node.
366 |       // 2. Re-insert it into the correct position.
367 |       deleteChildren.push(updatedChild)
368 |     }
369 |   }
370 |   // Do Step 1 of Move - Delete
371 |   $.each(deleteChildren, function (index, child) {
372 |     $(child).remove();
373 |   });
374 | 
375 |   // Iterate once again, this time Step 2 - Insert it back to the new position.
376 |   for (var k = 0; k < updates.length; k++) {
377 |     update = updates[k];
378 |     switch (update.type) {
379 |       case UPDATE_TYPES.INSERT_MARKUP:
380 |         insertChildAt(update.parentNode, $(update.markup), update.toIndex);
381 |         break;
382 |       case UPDATE_TYPES.MOVE_EXISTING:
383 |         insertChildAt(update.parentNode, initialChildren[update.parentID][update.fromIndex], update.toIndex);
384 |         break;
385 |       case UPDATE_TYPES.REMOVE_NODE:
386 |         // This has already been handled in the previous for-loop.
387 |         break;
388 |     }
389 |   }
390 | };
391 | 
392 | /**                           */
393 | /** REACT COMPOSITE COMPONENT */
394 | /**                           */
395 | 
396 | function ReactCompositeComponent(element) {
397 |   // Save the current element object's reference.
398 |   this._currentElement = element;
399 |   // To store the node reference.
400 |   this._rootNodeID = null;
401 |   // To store the corresponding instance of ReactClass later on.
402 |   this._instance = null;
403 | }
404 | 
405 | // Mounting the component to generate the DOM element structure.
406 | // Should return the current custom elements' render contents.
407 | ReactCompositeComponent.prototype.mountComponent = function (rootID) {
408 |   this._rootNodeID = rootID;
409 |   // The current element's prop values.
410 |   var publicProps = this._currentElement.props;
411 |   // The current element's ReactClass (Component class).
412 |   var ReactClass = this._currentElement.type;
413 |   // Initialize the public class
414 |   var inst = new ReactClass(publicProps);
415 |   this._instance = inst;
416 |   // Maintain reference to the current component - for future updates.
417 |   inst._reactInternalInstance = this;
418 | 
419 |   if (inst.componentWillMount) {
420 |     inst.componentWillMount();
421 |     // There is a lot more additional logic here in the complete library - but we'll keep it simple here.
422 |   }
423 |   // Call the ReactClass instance's render method - this returns an element or a text node
424 |   var renderedElement = this._instance.render();
425 |   // Get component class instance of the rendered element.
426 |   var renderedComponentInstance = instantiateReactComponent(renderedElement);
427 |   this._renderedComponent = renderedComponentInstance; // Save component instance for later use.
428 | 
429 |   // Get string content after rendering, the current _rootNodeID passed to render the node.
430 |   var renderedMarkup = renderedComponentInstance.mountComponent(this._rootNodeID);
431 | 
432 |   // Add an event listener for 'mountReady' event - which is triggered when React.render() completes.
433 |   $(document).on('mountReady', function () {
434 |     // call inst.componentDidMount
435 |     inst.componentDidMount && inst.componentDidMount();
436 |   });
437 | 
438 |   return renderedMarkup;
439 | };
440 | 
441 | // Update
442 | ReactCompositeComponent.prototype.receiveComponent = function (nextElement, newState) {
443 |   // If nextElement is passed - it becomes the current element (we pass nextElement below while recursing)
444 |   this._currentElement = nextElement || this._currentElement;
445 | 
446 |   var inst = this._instance;
447 |   // Merge state and assign props.
448 |   var nextState = $.extend(inst.state, newState);
449 |   var nextProps = this._currentElement.props;
450 | 
451 |   // Update state & props in instance
452 |   inst.state = nextState;
453 |   inst.props = nextProps;
454 | 
455 |   // If there is shouldComponentUpdate inst and returns false. Do not update the component - just return.
456 |   if (inst.shouldComponentUpdate && (inst.shouldComponentUpdate(nextProps, nextState) === false)) {
457 |     return;
458 |   }
459 | 
460 |   // If there is componentWillUpdate - Call it to indicate start of update.
461 |   if (inst.componentWillUpdate) {
462 |     inst.componentWillUpdate(nextProps, nextState);
463 |   }
464 | 
465 |   var prevComponentInstance = this._renderedComponent;
466 |   var prevRenderedElement = prevComponentInstance._currentElement;
467 |   // Execute render for the current instance.
468 |   var nextRenderedElement = this._instance.render();
469 | 
470 |   // Condition checks if the component needs to be updated or render a completely different element (replace).
471 |   // Note that the _shouldUpdateReactComponent is a global method and different from the component's shouldComponentUpdate
472 |   if (_shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) {
473 |     // If you need to update, continue to call the child node receiveComponent method, passing the new element updating child nodes.
474 |     prevComponentInstance.receiveComponent(nextRenderedElement);
475 |     // Complete update by calling the component's corresponding componentDidUpdate()
476 |     inst.componentDidUpdate && inst.componentDidUpdate();
477 |   } else {
478 |     // If you find two completely different element, then just re-render the
479 |     var thisID = this._rootNodeID;
480 |     // Instantiate the corresponding Component.
481 |     this._renderedComponent = this._instantiateReactComponent(nextRenderedElement);
482 |     // Mount the corresponding component and get its DOM content.
483 |     var nextMarkup = _renderedComponent.mountComponent(thisID);
484 |     // Replace the entire node.
485 |     $('[data-reactid="' + this._rootNodeID + '"]').replaceWith(nextMarkup);
486 |   }
487 | };
488 | 
489 | // Used to compare two elements and determine if update is needed
490 | // Checks if element types are the same and if an object also checks for the `key` which uniquely identifies the element.
491 | var _shouldUpdateReactComponent = function (prevElement, nextElement) {
492 |   if (prevElement && nextElement) {
493 |     var prevType = typeof prevElement;
494 |     var nextType = typeof nextElement;
495 |     if (prevType === 'string' || prevType === 'number') {
496 |       return nextType === 'string' || nextType === 'number';
497 |     } else {
498 |       return nextType === 'object' && prevElement.type === nextElement.type && prevElement.key === nextElement.key;
499 |     }
500 |   }
501 |   return false;
502 | };
503 | 
504 | function instantiateReactComponent(node) {
505 |   // If a text node
506 |   if (typeof node === 'string' || typeof node === 'number') {
507 |     return new ReactDOMTextComponent(node);
508 |   }
509 |   // If a browser tag/node
510 |   if (typeof node === 'object' && typeof node.type === 'string') {
511 |     return new ReactDOMComponent(node);
512 |   }
513 |   // If composite element node
514 |   if (typeof node === 'object' && typeof node.type === 'function') {
515 |     return new ReactCompositeComponent(node);
516 |   }
517 | }
518 | 
519 | // React Element's instance is basically what we call the Virtual DOM.
520 | // It has a type attribute representing the current node type, as well as props attribute for the node.
521 | // Also here the `key` is used to uniquely identify this element regardless of where you are in the DOM tree + optimizations for future updates
522 | function ReactElement(type, key, props) {
523 |   this.type = type;
524 |   this.key = key;
525 |   this.props = props;
526 | }
527 | 
528 | // ReactClass - In a way this is the super class
529 | // For demo purposes, we're keep ReactClass simple - the original code handles a lot of things,
530 | // eg. mixin class inheritance support, componentDidMount etc.
531 | var ReactClass = function () {
532 | };
533 | 
534 | // This leaves subclasses to inherit the render
535 | ReactClass.prototype.render = function () {
536 | };
537 | 
538 | // setState
539 | ReactClass.prototype.setState = function (newState) {
540 |   // Remember when we mount the ReactCompositeComponent - we save a reference to its instance.
541 |   // So here, we can get the corresponding ReactCompositeComponent instance _reactInternalInstance
542 |   // and call its receiveComponent() - which handles updates to a component.
543 |   this._reactInternalInstance.receiveComponent(null, newState);
544 |   // Note:
545 |   // mountComponent is implemented to deal with the component's initial rendering.
546 |   // receiveComponent - should be implemented in all classes that need to handle their own updates.
547 | };
548 | 
549 | React = {
550 |   nextReactRootIndex: 0,
551 |   createClass: function (spec) {
552 |     // Generate a subclass
553 |     var Constructor = function (props) {
554 |       this.props = props;
555 |       this.state = this.getInitialState ? this.getInitialState() : null;
556 |     };
557 |     // Prototype Inheritance
558 |     // This is a way to implement two levels of inheritance with constructor.
559 |     // If not clear check this: http://stackoverflow.com/a/7719184/1672655
560 |     Constructor.prototype = new ReactClass();        // (or) Object.create(ReactClass.prototype)
561 |     Constructor.prototype.constructor = Constructor; // Setting back the constructor to `Constructor`
562 | 
563 |     // Combine spec with prototype
564 |     $.extend(Constructor.prototype, spec);
565 |     return Constructor;
566 |   },
567 |   createElement: function (type, config, children) {
568 |     var props = {};
569 |     var propName;
570 |     config = config || {};
571 |     // Check if the key is specified - if so it is easy to quickly identify and update the element in future.
572 |     var key = config.key || null;
573 | 
574 |     // Copy config object over as props.
575 |     for (propName in config) {
576 |       if (config.hasOwnProperty(propName) && propName !== 'key') {
577 |         props[propName] = config[propName];
578 |       }
579 |     }
580 | 
581 |     // Handle children - which can be passed as additional params to createElement()
582 |     var childrenLength = arguments.length - 2;
583 |     if (childrenLength === 1) {
584 |       props.children = Array.isArray(children) ? children : [children];
585 |     } else if (childrenLength > 1) {
586 |       var childArray = [];
587 |       for (var i = 0; i < childrenLength; i++) {
588 |         childArray[i] = arguments[i + 2];
589 |       }
590 |       props.children = childArray;
591 |     }
592 | 
593 |     return new ReactElement(type, key, props);
594 |   },
595 |   render: function (element, container) {
596 |     var componentInstance = instantiateReactComponent(element);
597 |     var markup = componentInstance.mountComponent(React.nextReactRootIndex++);
598 |     $(container).html(markup);
599 |     // Trigger the mount complete event
600 |     $(document).trigger('mountReady');
601 |   }
602 | };


--------------------------------------------------------------------------------