Bug 1096399 - [Loop] Upgrade React to 0.12.2. r=Standard8

--HG--
rename : browser/components/loop/content/shared/libs/react-0.11.2.js => browser/components/loop/content/shared/libs/react-0.12.2.js

browser/components/loop/content/conversation.html

@@ -20,7 +20,7 @@
     <script type="text/javascript" src="loop/libs/l10n.js"></script>
     <script type="text/javascript" src="loop/js/otconfig.js"></script>
     <script type="text/javascript" src="loop/libs/sdk.js"></script>
-    <script type="text/javascript" src="loop/shared/libs/react-0.11.2.js"></script>
+    <script type="text/javascript" src="loop/shared/libs/react-0.12.2.js"></script>
     <script type="text/javascript" src="loop/shared/libs/jquery-2.1.0.js"></script>
     <script type="text/javascript" src="loop/shared/libs/lodash-2.4.1.js"></script>
     <script type="text/javascript" src="loop/shared/libs/backbone-1.1.2.js"></script>

browser/components/loop/content/js/contacts.js

@@ -81,7 +81,7 @@ loop.contacts = (function(_, mozL10n) {
     contact[field][0].value = value;
   };
 
-  const ContactDropdown = React.createClass({displayName: 'ContactDropdown',
+  const ContactDropdown = React.createClass({displayName: "ContactDropdown",
     propTypes: {
       handleAction: React.PropTypes.func.isRequired,
       canEdit: React.PropTypes.bool
@@ -124,36 +124,36 @@ loop.contacts = (function(_, mozL10n) {
                                           : "block_contact_menu_button";
 
       return (
-        React.DOM.ul({className: cx({ "dropdown-menu": true,
+        React.createElement("ul", {className: cx({ "dropdown-menu": true,
                             "dropdown-menu-up": this.state.openDirUp })}, 
-          React.DOM.li({className: cx({ "dropdown-menu-item": true,
+          React.createElement("li", {className: cx({ "dropdown-menu-item": true,
                               "disabled": this.props.blocked }), 
               onClick: this.onItemClick, 
-              'data-action': "video-call"}, 
-            React.DOM.i({className: "icon icon-video-call"}), 
+              "data-action": "video-call"}, 
+            React.createElement("i", {className: "icon icon-video-call"}), 
             mozL10n.get("video_call_menu_button")
           ), 
-          React.DOM.li({className: cx({ "dropdown-menu-item": true,
+          React.createElement("li", {className: cx({ "dropdown-menu-item": true,
                               "disabled": this.props.blocked }), 
-              onClick: this.onItemClick, 'data-action': "audio-call"}, 
-            React.DOM.i({className: "icon icon-audio-call"}), 
+              onClick: this.onItemClick, "data-action": "audio-call"}, 
+            React.createElement("i", {className: "icon icon-audio-call"}), 
             mozL10n.get("audio_call_menu_button")
           ), 
-          React.DOM.li({className: cx({ "dropdown-menu-item": true,
+          React.createElement("li", {className: cx({ "dropdown-menu-item": true,
                               "disabled": !this.props.canEdit }), 
-              onClick: this.onItemClick, 'data-action': "edit"}, 
-            React.DOM.i({className: "icon icon-edit"}), 
+              onClick: this.onItemClick, "data-action": "edit"}, 
+            React.createElement("i", {className: "icon icon-edit"}), 
             mozL10n.get("edit_contact_menu_button")
           ), 
-          React.DOM.li({className: "dropdown-menu-item", 
-              onClick: this.onItemClick, 'data-action': blockAction}, 
-            React.DOM.i({className: "icon icon-" + blockAction}), 
+          React.createElement("li", {className: "dropdown-menu-item", 
+              onClick: this.onItemClick, "data-action": blockAction}, 
+            React.createElement("i", {className: "icon icon-" + blockAction}), 
             mozL10n.get(blockLabel)
           ), 
-          React.DOM.li({className: cx({ "dropdown-menu-item": true,
+          React.createElement("li", {className: cx({ "dropdown-menu-item": true,
                               "disabled": !this.props.canEdit }), 
-              onClick: this.onItemClick, 'data-action': "remove"}, 
-            React.DOM.i({className: "icon icon-remove"}), 
+              onClick: this.onItemClick, "data-action": "remove"}, 
+            React.createElement("i", {className: "icon icon-remove"}), 
             mozL10n.get("remove_contact_menu_button")
           )
         )
@@ -161,7 +161,7 @@ loop.contacts = (function(_, mozL10n) {
     }
   });
 
-  const ContactDetail = React.createClass({displayName: 'ContactDetail',
+  const ContactDetail = React.createClass({displayName: "ContactDetail",
     getInitialState: function() {
       return {
         showMenu: false,
@@ -231,23 +231,23 @@ loop.contacts = (function(_, mozL10n) {
       });
 
       return (
-        React.DOM.li({className: contactCSSClass, onMouseLeave: this.hideDropdownMenu}, 
-          React.DOM.div({className: "avatar"}), 
-          React.DOM.div({className: "details"}, 
-            React.DOM.div({className: "username"}, React.DOM.strong(null, names.firstName), " ", names.lastName, 
-              React.DOM.i({className: cx({"icon icon-google": this.props.contact.category[0] == "google"})}), 
-              React.DOM.i({className: cx({"icon icon-blocked": this.props.contact.blocked})})
+        React.createElement("li", {className: contactCSSClass, onMouseLeave: this.hideDropdownMenu}, 
+          React.createElement("div", {className: "avatar"}), 
+          React.createElement("div", {className: "details"}, 
+            React.createElement("div", {className: "username"}, React.createElement("strong", null, names.firstName), " ", names.lastName, 
+              React.createElement("i", {className: cx({"icon icon-google": this.props.contact.category[0] == "google"})}), 
+              React.createElement("i", {className: cx({"icon icon-blocked": this.props.contact.blocked})})
             ), 
-            React.DOM.div({className: "email"}, email.value)
+            React.createElement("div", {className: "email"}, email.value)
           ), 
-          React.DOM.div({className: "icons"}, 
-            React.DOM.i({className: "icon icon-video", 
+          React.createElement("div", {className: "icons"}, 
+            React.createElement("i", {className: "icon icon-video", 
                onClick: this.handleAction.bind(null, "video-call")}), 
-            React.DOM.i({className: "icon icon-caret-down", 
+            React.createElement("i", {className: "icon icon-caret-down", 
                onClick: this.showDropdownMenu})
           ), 
           this.state.showMenu
-            ? ContactDropdown({handleAction: this.handleAction, 
+            ? React.createElement(ContactDropdown, {handleAction: this.handleAction, 
                                canEdit: this.canEdit(), 
                                blocked: this.props.contact.blocked})
             : null
@@ -257,7 +257,7 @@ loop.contacts = (function(_, mozL10n) {
     }
   });
 
-  const ContactsList = React.createClass({displayName: 'ContactsList',
+  const ContactsList = React.createClass({displayName: "ContactsList",
     mixins: [
       React.addons.LinkedStateMixin,
       loop.shared.mixins.WindowCloseMixin
@@ -467,7 +467,7 @@ loop.contacts = (function(_, mozL10n) {
       let cx = React.addons.classSet;
 
       let viewForItem = item => {
-        return ContactDetail({key: item._guid, contact: item, 
+        return React.createElement(ContactDetail, {key: item._guid, contact: item, 
                               handleContactAction: this.handleContactAction})
       };
 
@@ -494,33 +494,33 @@ loop.contacts = (function(_, mozL10n) {
       }
 
       return (
-        React.DOM.div(null, 
-          React.DOM.div({className: "content-area"}, 
-            ButtonGroup(null, 
-              Button({caption: this.state.importBusy
+        React.createElement("div", null, 
+          React.createElement("div", {className: "content-area"}, 
+            React.createElement(ButtonGroup, null, 
+              React.createElement(Button, {caption: this.state.importBusy
                                ? mozL10n.get("importing_contacts_progress_button")
                                : mozL10n.get("import_contacts_button"), 
                       disabled: this.state.importBusy, 
                       onClick: this.handleImportButtonClick}, 
-                React.DOM.div({className: cx({"contact-import-spinner": true,
+                React.createElement("div", {className: cx({"contact-import-spinner": true,
                                     spinner: true,
                                     busy: this.state.importBusy})})
               ), 
-              Button({caption: mozL10n.get("new_contact_button"), 
+              React.createElement(Button, {caption: mozL10n.get("new_contact_button"), 
                       onClick: this.handleAddContactButtonClick})
             ), 
             showFilter ?
-            React.DOM.input({className: "contact-filter", 
+            React.createElement("input", {className: "contact-filter", 
                    placeholder: mozL10n.get("contacts_search_placesholder"), 
                    valueLink: this.linkState("filter")})
             : null
           ), 
-          React.DOM.ul({className: "contact-list"}, 
+          React.createElement("ul", {className: "contact-list"}, 
             shownContacts.available ?
               shownContacts.available.sort(this.sortContacts).map(viewForItem) :
               null, 
             shownContacts.blocked && shownContacts.blocked.length > 0 ?
-              React.DOM.div({className: "contact-separator"}, mozL10n.get("contacts_blocked_contacts")) :
+              React.createElement("div", {className: "contact-separator"}, mozL10n.get("contacts_blocked_contacts")) :
               null, 
             shownContacts.blocked ?
               shownContacts.blocked.sort(this.sortContacts).map(viewForItem) :
@@ -531,7 +531,7 @@ loop.contacts = (function(_, mozL10n) {
     }
   });
 
-  const ContactDetailsForm = React.createClass({displayName: 'ContactDetailsForm',
+  const ContactDetailsForm = React.createClass({displayName: "ContactDetailsForm",
     mixins: [React.addons.LinkedStateMixin],
 
     propTypes: {
@@ -628,27 +628,27 @@ loop.contacts = (function(_, mozL10n) {
       let phoneOrEmailRequired = !this.state.email && !this.state.tel;
 
       return (
-        React.DOM.div({className: "content-area contact-form"}, 
-          React.DOM.header(null, this.props.mode == "add"
+        React.createElement("div", {className: "content-area contact-form"}, 
+          React.createElement("header", null, this.props.mode == "add"
                    ? mozL10n.get("add_contact_button")
                    : mozL10n.get("edit_contact_title")), 
-          React.DOM.label(null, mozL10n.get("edit_contact_name_label")), 
-          React.DOM.input({ref: "name", required: true, pattern: "\\s*\\S.*", type: "text", 
+          React.createElement("label", null, mozL10n.get("edit_contact_name_label")), 
+          React.createElement("input", {ref: "name", required: true, pattern: "\\s*\\S.*", type: "text", 
                  className: cx({pristine: this.state.pristine}), 
                  valueLink: this.linkState("name")}), 
-          React.DOM.label(null, mozL10n.get("edit_contact_email_label")), 
-          React.DOM.input({ref: "email", type: "email", required: phoneOrEmailRequired, 
+          React.createElement("label", null, mozL10n.get("edit_contact_email_label")), 
+          React.createElement("input", {ref: "email", type: "email", required: phoneOrEmailRequired, 
                  className: cx({pristine: this.state.pristine}), 
                  valueLink: this.linkState("email")}), 
-          React.DOM.label(null, mozL10n.get("new_contact_fxos_phone_placeholder")), 
-          React.DOM.input({ref: "tel", type: "tel", required: phoneOrEmailRequired, 
+          React.createElement("label", null, mozL10n.get("new_contact_fxos_phone_placeholder")), 
+          React.createElement("input", {ref: "tel", type: "tel", required: phoneOrEmailRequired, 
                  className: cx({pristine: this.state.pristine}), 
                  valueLink: this.linkState("tel")}), 
-          ButtonGroup(null, 
-            Button({additionalClass: "button-cancel", 
+          React.createElement(ButtonGroup, null, 
+            React.createElement(Button, {additionalClass: "button-cancel", 
                     caption: mozL10n.get("cancel_button"), 
                     onClick: this.handleCancelButtonClick}), 
-            Button({additionalClass: "button-accept", 
+            React.createElement(Button, {additionalClass: "button-accept", 
                     caption: this.props.mode == "add"
                              ? mozL10n.get("add_contact_button")
                              : mozL10n.get("edit_contact_done_button"), 

browser/components/loop/content/js/conversation.js

@@ -26,7 +26,7 @@ loop.conversation = (function(mozL10n) {
    * Master controller view for handling if incoming or outgoing calls are
    * in progress, and hence, which view to display.
    */
-  var AppControllerView = React.createClass({displayName: 'AppControllerView',
+  var AppControllerView = React.createClass({displayName: "AppControllerView",
     mixins: [Backbone.Events, sharedMixins.WindowCloseMixin],
 
     propTypes: {
@@ -64,7 +64,7 @@ loop.conversation = (function(mozL10n) {
     render: function() {
       switch(this.state.windowType) {
         case "incoming": {
-          return (IncomingConversationView({
+          return (React.createElement(IncomingConversationView, {
             client: this.props.client, 
             conversation: this.props.conversation, 
             sdk: this.props.sdk, 
@@ -73,21 +73,21 @@ loop.conversation = (function(mozL10n) {
           ));
         }
         case "outgoing": {
-          return (OutgoingConversationView({
+          return (React.createElement(OutgoingConversationView, {
             store: this.props.conversationStore, 
             dispatcher: this.props.dispatcher, 
             feedbackStore: this.props.feedbackStore}
           ));
         }
         case "room": {
-          return (DesktopRoomConversationView({
+          return (React.createElement(DesktopRoomConversationView, {
             dispatcher: this.props.dispatcher, 
             roomStore: this.props.roomStore, 
             feedbackStore: this.props.feedbackStore}
           ));
         }
         case "failed": {
-          return GenericFailureView({cancelCall: this.closeWindow});
+          return React.createElement(GenericFailureView, {cancelCall: this.closeWindow});
         }
         default: {
           // If we don't have a windowType, we don't know what we are yet,
@@ -183,7 +183,7 @@ loop.conversation = (function(mozL10n) {
       dispatcher.dispatch(new sharedActions.WindowUnload());
     });
 
-    React.renderComponent(AppControllerView({
+    React.render(React.createElement(AppControllerView, {
       conversationAppStore: conversationAppStore, 
       roomStore: roomStore, 
       feedbackStore: feedbackStore, 

browser/components/loop/content/js/conversation.jsx

@@ -183,7 +183,7 @@ loop.conversation = (function(mozL10n) {
       dispatcher.dispatch(new sharedActions.WindowUnload());
     });
 
-    React.renderComponent(<AppControllerView
+    React.render(<AppControllerView
       conversationAppStore={conversationAppStore}
       roomStore={roomStore}
       feedbackStore={feedbackStore}

browser/components/loop/content/js/conversationViews.js

@@ -39,7 +39,7 @@ loop.conversationViews = (function(mozL10n) {
    * Displays information about the call
    * Caller avatar, name & conversation creation date
    */
-  var CallIdentifierView = React.createClass({displayName: 'CallIdentifierView',
+  var CallIdentifierView = React.createClass({displayName: "CallIdentifierView",
     propTypes: {
       peerIdentifier: React.PropTypes.string,
       showIcons: React.PropTypes.bool.isRequired,
@@ -83,16 +83,16 @@ loop.conversationViews = (function(mozL10n) {
       });
 
       return (
-        React.DOM.div({className: "fx-embedded-call-identifier"}, 
-          React.DOM.div({className: "fx-embedded-call-identifier-avatar fx-embedded-call-identifier-item"}), 
-          React.DOM.div({className: "fx-embedded-call-identifier-info fx-embedded-call-identifier-item"}, 
-            React.DOM.div({className: "fx-embedded-call-identifier-text overflow-text-ellipsis"}, 
+        React.createElement("div", {className: "fx-embedded-call-identifier"}, 
+          React.createElement("div", {className: "fx-embedded-call-identifier-avatar fx-embedded-call-identifier-item"}), 
+          React.createElement("div", {className: "fx-embedded-call-identifier-info fx-embedded-call-identifier-item"}, 
+            React.createElement("div", {className: "fx-embedded-call-identifier-text overflow-text-ellipsis"}, 
               this.props.peerIdentifier
             ), 
-            React.DOM.div({className: callDetailClasses}, 
-              React.DOM.span({className: "fx-embedded-tiny-audio-icon"}), 
-              React.DOM.span({className: iconVideoClasses}), 
-              React.DOM.span({className: "fx-embedded-conversation-timestamp"}, 
+            React.createElement("div", {className: callDetailClasses}, 
+              React.createElement("span", {className: "fx-embedded-tiny-audio-icon"}), 
+              React.createElement("span", {className: iconVideoClasses}), 
+              React.createElement("span", {className: "fx-embedded-conversation-timestamp"}, 
                 this.formatCreationDate()
               )
             )
@@ -109,7 +109,7 @@ loop.conversationViews = (function(mozL10n) {
    * Allows the view to be extended with different buttons and progress
    * via children properties.
    */
-  var ConversationDetailView = React.createClass({displayName: 'ConversationDetailView',
+  var ConversationDetailView = React.createClass({displayName: "ConversationDetailView",
     propTypes: {
       contact: React.PropTypes.object
     },
@@ -120,11 +120,11 @@ loop.conversationViews = (function(mozL10n) {
       document.title = contactName;
 
       return (
-        React.DOM.div({className: "call-window"}, 
-          CallIdentifierView({
+        React.createElement("div", {className: "call-window"}, 
+          React.createElement(CallIdentifierView, {
             peerIdentifier: contactName, 
             showIcons: false}), 
-          React.DOM.div(null, this.props.children)
+          React.createElement("div", null, this.props.children)
         )
       );
     }
@@ -133,7 +133,7 @@ loop.conversationViews = (function(mozL10n) {
   // Matches strings of the form "<nonspaces>@<nonspaces>" or "+<digits>"
   var EMAIL_OR_PHONE_RE = /^(:?\S+@\S+|\+\d+)$/;
 
-  var IncomingCallView = React.createClass({displayName: 'IncomingCallView',
+  var IncomingCallView = React.createClass({displayName: "IncomingCallView",
     mixins: [sharedMixins.DropdownMenuMixin, sharedMixins.AudioMixin],
 
     propTypes: {
@@ -213,29 +213,29 @@ loop.conversationViews = (function(mozL10n) {
       });
 
       return (
-        React.DOM.div({className: "call-window"}, 
-          CallIdentifierView({video: this.props.video, 
+        React.createElement("div", {className: "call-window"}, 
+          React.createElement(CallIdentifierView, {video: this.props.video, 
             peerIdentifier: this.props.model.getCallIdentifier(), 
             urlCreationDate: this.props.model.get("urlCreationDate"), 
             showIcons: true}), 
 
-          React.DOM.div({className: "btn-group call-action-group"}, 
+          React.createElement("div", {className: "btn-group call-action-group"}, 
 
-            React.DOM.div({className: "fx-embedded-call-button-spacer"}), 
+            React.createElement("div", {className: "fx-embedded-call-button-spacer"}), 
 
-            React.DOM.div({className: "btn-chevron-menu-group"}, 
-              React.DOM.div({className: "btn-group-chevron"}, 
-                React.DOM.div({className: "btn-group"}, 
+            React.createElement("div", {className: "btn-chevron-menu-group"}, 
+              React.createElement("div", {className: "btn-group-chevron"}, 
+                React.createElement("div", {className: "btn-group"}, 
 
-                  React.DOM.button({className: "btn btn-decline", 
+                  React.createElement("button", {className: "btn btn-decline", 
                           onClick: this._handleDecline}, 
                     mozL10n.get("incoming_call_cancel_button")
                   ), 
-                  React.DOM.div({className: "btn-chevron", onClick: this.toggleDropdownMenu})
+                  React.createElement("div", {className: "btn-chevron", onClick: this.toggleDropdownMenu})
                 ), 
 
-                React.DOM.ul({className: dropdownMenuClassesDecline}, 
-                  React.DOM.li({className: "btn-block", onClick: this._handleDeclineBlock}, 
+                React.createElement("ul", {className: dropdownMenuClassesDecline}, 
+                  React.createElement("li", {className: "btn-block", onClick: this._handleDeclineBlock}, 
                     mozL10n.get("incoming_call_cancel_and_block_button")
                   )
                 )
@@ -243,11 +243,11 @@ loop.conversationViews = (function(mozL10n) {
               )
             ), 
 
-            React.DOM.div({className: "fx-embedded-call-button-spacer"}), 
+            React.createElement("div", {className: "fx-embedded-call-button-spacer"}), 
 
-            AcceptCallButton({mode: this._answerModeProps()}), 
+            React.createElement(AcceptCallButton, {mode: this._answerModeProps()}), 
 
-            React.DOM.div({className: "fx-embedded-call-button-spacer"})
+            React.createElement("div", {className: "fx-embedded-call-button-spacer"})
 
           )
         )
@@ -260,7 +260,7 @@ loop.conversationViews = (function(mozL10n) {
    * Incoming call view accept button, renders different primary actions
    * (answer with video / with audio only) based on the props received
    **/
-  var AcceptCallButton = React.createClass({displayName: 'AcceptCallButton',
+  var AcceptCallButton = React.createClass({displayName: "AcceptCallButton",
 
     propTypes: {
       mode: React.PropTypes.object.isRequired,
@@ -270,17 +270,17 @@ loop.conversationViews = (function(mozL10n) {
       var mode = this.props.mode;
       return (
         /* jshint ignore:start */
-        React.DOM.div({className: "btn-chevron-menu-group"}, 
-          React.DOM.div({className: "btn-group"}, 
-            React.DOM.button({className: "btn btn-accept", 
+        React.createElement("div", {className: "btn-chevron-menu-group"}, 
+          React.createElement("div", {className: "btn-group"}, 
+            React.createElement("button", {className: "btn btn-accept", 
                     onClick: mode.primary.handler, 
                     title: mozL10n.get(mode.primary.tooltip)}, 
-              React.DOM.span({className: "fx-embedded-answer-btn-text"}, 
+              React.createElement("span", {className: "fx-embedded-answer-btn-text"}, 
                 mozL10n.get("incoming_call_accept_button")
               ), 
-              React.DOM.span({className: mode.primary.className})
+              React.createElement("span", {className: mode.primary.className})
             ), 
-            React.DOM.div({className: mode.secondary.className, 
+            React.createElement("div", {className: mode.secondary.className, 
                  onClick: mode.secondary.handler, 
                  title: mozL10n.get(mode.secondary.tooltip)}
             )
@@ -297,7 +297,7 @@ loop.conversationViews = (function(mozL10n) {
    * XXX Based on CallFailedView, but built specially until we flux-ify the
    * incoming call views (bug 1088672).
    */
-  var GenericFailureView = React.createClass({displayName: 'GenericFailureView',
+  var GenericFailureView = React.createClass({displayName: "GenericFailureView",
     mixins: [sharedMixins.AudioMixin],
 
     propTypes: {
@@ -312,11 +312,11 @@ loop.conversationViews = (function(mozL10n) {
       document.title = mozL10n.get("generic_failure_title");
 
       return (
-        React.DOM.div({className: "call-window"}, 
-          React.DOM.h2(null, mozL10n.get("generic_failure_title")), 
+        React.createElement("div", {className: "call-window"}, 
+          React.createElement("h2", null, mozL10n.get("generic_failure_title")), 
 
-          React.DOM.div({className: "btn-group call-action-group"}, 
-            React.DOM.button({className: "btn btn-cancel", 
+          React.createElement("div", {className: "btn-group call-action-group"}, 
+            React.createElement("button", {className: "btn btn-cancel", 
                     onClick: this.props.cancelCall}, 
               mozL10n.get("cancel_button")
             )
@@ -332,7 +332,7 @@ loop.conversationViews = (function(mozL10n) {
    *
    * At the moment, it does more than that, these parts need refactoring out.
    */
-  var IncomingConversationView = React.createClass({displayName: 'IncomingConversationView',
+  var IncomingConversationView = React.createClass({displayName: "IncomingConversationView",
     mixins: [sharedMixins.AudioMixin, sharedMixins.WindowCloseMixin],
 
     propTypes: {
@@ -385,7 +385,7 @@ loop.conversationViews = (function(mozL10n) {
           document.title = mozL10n.get("incoming_call_title2");
 
           return (
-            IncomingCallView({
+            React.createElement(IncomingCallView, {
               model: this.props.conversation, 
               video: this.props.conversation.hasVideoStream("incoming")}
             )
@@ -397,7 +397,7 @@ loop.conversationViews = (function(mozL10n) {
           var callType = this.props.conversation.get("selectedCallType");
 
           return (
-            sharedViews.ConversationView({
+            React.createElement(sharedViews.ConversationView, {
               initiate: true, 
               sdk: this.props.sdk, 
               model: this.props.conversation, 
@@ -408,7 +408,7 @@ loop.conversationViews = (function(mozL10n) {
         case "end": {
           // XXX To be handled with the "failed" view state when bug 1047410 lands
           if (this.state.callFailed) {
-            return GenericFailureView({
+            return React.createElement(GenericFailureView, {
               cancelCall: this.closeWindow.bind(this)}
             );
           }
@@ -418,7 +418,7 @@ loop.conversationViews = (function(mozL10n) {
           this.play("terminated");
 
           return (
-            sharedViews.FeedbackView({
+            React.createElement(sharedViews.FeedbackView, {
               feedbackStore: this.props.feedbackStore, 
               onAfterFeedbackReceived: this.closeWindow.bind(this)}
             )
@@ -426,7 +426,7 @@ loop.conversationViews = (function(mozL10n) {
         }
         case "close": {
           this.closeWindow();
-          return (React.DOM.div(null));
+          return (React.createElement("div", null));
         }
       }
     },
@@ -646,7 +646,7 @@ loop.conversationViews = (function(mozL10n) {
    * View for pending conversations. Displays a cancel button and appropriate
    * pending/ringing strings.
    */
-  var PendingConversationView = React.createClass({displayName: 'PendingConversationView',
+  var PendingConversationView = React.createClass({displayName: "PendingConversationView",
     mixins: [sharedMixins.AudioMixin],
 
     propTypes: {
@@ -686,12 +686,12 @@ loop.conversationViews = (function(mozL10n) {
       });
 
       return (
-        ConversationDetailView({contact: this.props.contact}, 
+        React.createElement(ConversationDetailView, {contact: this.props.contact}, 
 
-          React.DOM.p({className: "btn-label"}, pendingStateString), 
+          React.createElement("p", {className: "btn-label"}, pendingStateString), 
 
-          React.DOM.div({className: "btn-group call-action-group"}, 
-            React.DOM.button({className: btnCancelStyles, 
+          React.createElement("div", {className: "btn-group call-action-group"}, 
+            React.createElement("button", {className: btnCancelStyles, 
                     onClick: this.cancelCall}, 
               mozL10n.get("initiate_call_cancel_button")
             )
@@ -705,7 +705,7 @@ loop.conversationViews = (function(mozL10n) {
   /**
    * Call failed view. Displayed when a call fails.
    */
-  var CallFailedView = React.createClass({displayName: 'CallFailedView',
+  var CallFailedView = React.createClass({displayName: "CallFailedView",
     mixins: [
       Backbone.Events,
       sharedMixins.AudioMixin,
@@ -758,7 +758,7 @@ loop.conversationViews = (function(mozL10n) {
       if (!this.state.emailLinkError) {
         return;
       }
-      return React.DOM.p({className: "error"}, mozL10n.get("unable_retrieve_url"));
+      return React.createElement("p", {className: "error"}, mozL10n.get("unable_retrieve_url"));
     },
 
     retryCall: function() {
@@ -783,23 +783,23 @@ loop.conversationViews = (function(mozL10n) {
 
     render: function() {
       return (
-        React.DOM.div({className: "call-window"}, 
-          React.DOM.h2(null, mozL10n.get("generic_failure_title")), 
+        React.createElement("div", {className: "call-window"}, 
+          React.createElement("h2", null, mozL10n.get("generic_failure_title")), 
 
-          React.DOM.p({className: "btn-label"}, mozL10n.get("generic_failure_with_reason2")), 
+          React.createElement("p", {className: "btn-label"}, mozL10n.get("generic_failure_with_reason2")), 
 
           this._renderError(), 
 
-          React.DOM.div({className: "btn-group call-action-group"}, 
-            React.DOM.button({className: "btn btn-cancel", 
+          React.createElement("div", {className: "btn-group call-action-group"}, 
+            React.createElement("button", {className: "btn btn-cancel", 
                     onClick: this.cancelCall}, 
               mozL10n.get("cancel_button")
             ), 
-            React.DOM.button({className: "btn btn-info btn-retry", 
+            React.createElement("button", {className: "btn btn-info btn-retry", 
                     onClick: this.retryCall}, 
               mozL10n.get("retry_call_button")
             ), 
-            React.DOM.button({className: "btn btn-info btn-email", 
+            React.createElement("button", {className: "btn btn-info btn-email", 
                     onClick: this.emailLink, 
                     disabled: this.state.emailLinkButtonDisabled}, 
               mozL10n.get("share_button2")
@@ -810,7 +810,7 @@ loop.conversationViews = (function(mozL10n) {
     }
   });
 
-  var OngoingConversationView = React.createClass({displayName: 'OngoingConversationView',
+  var OngoingConversationView = React.createClass({displayName: "OngoingConversationView",
     propTypes: {
       dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
       video: React.PropTypes.object,
@@ -924,15 +924,15 @@ loop.conversationViews = (function(mozL10n) {
       });
 
       return (
-        React.DOM.div({className: "video-layout-wrapper"}, 
-          React.DOM.div({className: "conversation"}, 
-            React.DOM.div({className: "media nested"}, 
-              React.DOM.div({className: "video_wrapper remote_wrapper"}, 
-                React.DOM.div({className: "video_inner remote"})
+        React.createElement("div", {className: "video-layout-wrapper"}, 
+          React.createElement("div", {className: "conversation"}, 
+            React.createElement("div", {className: "media nested"}, 
+              React.createElement("div", {className: "video_wrapper remote_wrapper"}, 
+                React.createElement("div", {className: "video_inner remote"})
               ), 
-              React.DOM.div({className: localStreamClasses})
+              React.createElement("div", {className: localStreamClasses})
             ), 
-            loop.shared.views.ConversationToolbar({
+            React.createElement(loop.shared.views.ConversationToolbar, {
               video: this.props.video, 
               audio: this.props.audio, 
               publishStream: this.publishStream, 
@@ -947,7 +947,7 @@ loop.conversationViews = (function(mozL10n) {
    * Master View Controller for outgoing calls. This manages
    * the different views that need displaying.
    */
-  var OutgoingConversationView = React.createClass({displayName: 'OutgoingConversationView',
+  var OutgoingConversationView = React.createClass({displayName: "OutgoingConversationView",
     mixins: [
       sharedMixins.AudioMixin,
       Backbone.Events
@@ -995,7 +995,7 @@ loop.conversationViews = (function(mozL10n) {
       document.title = mozL10n.get("conversation_has_ended");
 
       return (
-        sharedViews.FeedbackView({
+        React.createElement(sharedViews.FeedbackView, {
           feedbackStore: this.props.feedbackStore, 
           onAfterFeedbackReceived: this._closeWindow.bind(this)}
         )
@@ -1009,14 +1009,14 @@ loop.conversationViews = (function(mozL10n) {
           return null;
         }
         case CALL_STATES.TERMINATED: {
-          return (CallFailedView({
+          return (React.createElement(CallFailedView, {
             dispatcher: this.props.dispatcher, 
             store: this.props.store, 
             contact: this.state.contact}
           ));
         }
         case CALL_STATES.ONGOING: {
-          return (OngoingConversationView({
+          return (React.createElement(OngoingConversationView, {
             dispatcher: this.props.dispatcher, 
             video: {enabled: !this.state.videoMuted}, 
             audio: {enabled: !this.state.audioMuted}}
@@ -1032,7 +1032,7 @@ loop.conversationViews = (function(mozL10n) {
           return null;
         }
         default: {
-          return (PendingConversationView({
+          return (React.createElement(PendingConversationView, {
             dispatcher: this.props.dispatcher, 
             callState: this.state.callState, 
             contact: this.state.contact, 

browser/components/loop/content/js/panel.js

@@ -21,7 +21,7 @@ loop.panel = (function(_, mozL10n) {
   var ContactsList = loop.contacts.ContactsList;
   var ContactDetailsForm = loop.contacts.ContactDetailsForm;
 
-  var TabView = React.createClass({displayName: 'TabView',
+  var TabView = React.createClass({displayName: "TabView",
     propTypes: {
       buttonsHidden: React.PropTypes.array,
       // The selectedTab prop is used by the UI showcase.
@@ -66,28 +66,28 @@ loop.panel = (function(_, mozL10n) {
         var isSelected = (this.state.selectedTab == tabName);
         if (!tab.props.hidden) {
           tabButtons.push(
-            React.DOM.li({className: cx({selected: isSelected}), 
+            React.createElement("li", {className: cx({selected: isSelected}), 
                 key: i, 
-                'data-tab-name': tabName, 
+                "data-tab-name": tabName, 
                 onClick: this.handleSelectTab})
           );
         }
         tabs.push(
-          React.DOM.div({key: i, className: cx({tab: true, selected: isSelected})}, 
+          React.createElement("div", {key: i, className: cx({tab: true, selected: isSelected})}, 
             tab.props.children
           )
         );
       }, this);
       return (
-        React.DOM.div({className: "tab-view-container"}, 
-          React.DOM.ul({className: "tab-view"}, tabButtons), 
+        React.createElement("div", {className: "tab-view-container"}, 
+          React.createElement("ul", {className: "tab-view"}, tabButtons), 
           tabs
         )
       );
     }
   });
 
-  var Tab = React.createClass({displayName: 'Tab',
+  var Tab = React.createClass({displayName: "Tab",
     render: function() {
       return null;
     }
@@ -96,7 +96,7 @@ loop.panel = (function(_, mozL10n) {
   /**
    * Availability drop down menu subview.
    */
-  var AvailabilityDropdown = React.createClass({displayName: 'AvailabilityDropdown',
+  var AvailabilityDropdown = React.createClass({displayName: "AvailabilityDropdown",
     mixins: [sharedMixins.DropdownMenuMixin],
 
     getInitialState: function() {
@@ -142,22 +142,22 @@ loop.panel = (function(_, mozL10n) {
                               mozL10n.get("display_name_available_status");
 
       return (
-        React.DOM.div({className: "dropdown"}, 
-          React.DOM.p({className: "dnd-status", onClick: this.showDropdownMenu}, 
-            React.DOM.span(null, availabilityText), 
-            React.DOM.i({className: availabilityStatus})
+        React.createElement("div", {className: "dropdown"}, 
+          React.createElement("p", {className: "dnd-status", onClick: this.showDropdownMenu}, 
+            React.createElement("span", null, availabilityText), 
+            React.createElement("i", {className: availabilityStatus})
           ), 
-          React.DOM.ul({className: availabilityDropdown, 
+          React.createElement("ul", {className: availabilityDropdown, 
               onMouseLeave: this.hideDropdownMenu}, 
-            React.DOM.li({onClick: this.changeAvailability("available"), 
+            React.createElement("li", {onClick: this.changeAvailability("available"), 
                 className: "dropdown-menu-item dnd-make-available"}, 
-              React.DOM.i({className: "status status-available"}), 
-              React.DOM.span(null, mozL10n.get("display_name_available_status"))
+              React.createElement("i", {className: "status status-available"}), 
+              React.createElement("span", null, mozL10n.get("display_name_available_status"))
             ), 
-            React.DOM.li({onClick: this.changeAvailability("do-not-disturb"), 
+            React.createElement("li", {onClick: this.changeAvailability("do-not-disturb"), 
                 className: "dropdown-menu-item dnd-make-unavailable"}, 
-              React.DOM.i({className: "status status-dnd"}), 
-              React.DOM.span(null, mozL10n.get("display_name_dnd_status"))
+              React.createElement("i", {className: "status status-dnd"}), 
+              React.createElement("span", null, mozL10n.get("display_name_dnd_status"))
             )
           )
         )
@@ -165,7 +165,7 @@ loop.panel = (function(_, mozL10n) {
     }
   });
 
-  var GettingStartedView = React.createClass({displayName: 'GettingStartedView',
+  var GettingStartedView = React.createClass({displayName: "GettingStartedView",
     mixins: [sharedMixins.WindowCloseMixin],
 
     handleButtonClick: function() {
@@ -181,13 +181,13 @@ loop.panel = (function(_, mozL10n) {
         return null;
       }
       return (
-        React.DOM.div({id: "fte-getstarted"}, 
-          React.DOM.header({id: "fte-title"}, 
+        React.createElement("div", {id: "fte-getstarted"}, 
+          React.createElement("header", {id: "fte-title"}, 
             mozL10n.get("first_time_experience_title", {
               "clientShortname": mozL10n.get("clientShortname2")
             })
           ), 
-          Button({htmlId: "fte-button", 
+          React.createElement(Button, {htmlId: "fte-button", 
                   onClick: this.handleButtonClick, 
                   caption: mozL10n.get("first_time_experience_button_label")})
         )
@@ -195,7 +195,7 @@ loop.panel = (function(_, mozL10n) {
     }
   });
 
-  var ToSView = React.createClass({displayName: 'ToSView',
+  var ToSView = React.createClass({displayName: "ToSView",
     getInitialState: function() {
       var getPref = navigator.mozLoop.getLoopPref.bind(navigator.mozLoop);
 
@@ -212,28 +212,28 @@ loop.panel = (function(_, mozL10n) {
         var privacy_notice_url = navigator.mozLoop.getLoopPref('legal.privacy_url');
         var tosHTML = mozL10n.get("legal_text_and_links3", {
           "clientShortname": mozL10n.get("clientShortname2"),
-          "terms_of_use": React.renderComponentToStaticMarkup(
-            React.DOM.a({href: terms_of_use_url, target: "_blank"}, 
+          "terms_of_use": React.renderToStaticMarkup(
+            React.createElement("a", {href: terms_of_use_url, target: "_blank"}, 
               mozL10n.get("legal_text_tos")
             )
           ),
-          "privacy_notice": React.renderComponentToStaticMarkup(
-            React.DOM.a({href: privacy_notice_url, target: "_blank"}, 
+          "privacy_notice": React.renderToStaticMarkup(
+            React.createElement("a", {href: privacy_notice_url, target: "_blank"}, 
               mozL10n.get("legal_text_privacy")
             )
           ),
         });
-        return React.DOM.div({id: "powered-by-wrapper"}, 
-          React.DOM.p({id: "powered-by"}, 
+        return React.createElement("div", {id: "powered-by-wrapper"}, 
+          React.createElement("p", {id: "powered-by"}, 
             mozL10n.get("powered_by_beforeLogo"), 
-            React.DOM.img({id: "powered-by-logo", className: locale}), 
+            React.createElement("img", {id: "powered-by-logo", className: locale}), 
             mozL10n.get("powered_by_afterLogo")
           ), 
-          React.DOM.p({className: "terms-service", 
+          React.createElement("p", {className: "terms-service", 
              dangerouslySetInnerHTML: {__html: tosHTML}})
          );
       } else {
-        return React.DOM.div(null);
+        return React.createElement("div", null);
       }
     }
   });
@@ -241,7 +241,7 @@ loop.panel = (function(_, mozL10n) {
   /**
    * Panel settings (gear) menu entry.
    */
-  var SettingsDropdownEntry = React.createClass({displayName: 'SettingsDropdownEntry',
+  var SettingsDropdownEntry = React.createClass({displayName: "SettingsDropdownEntry",
     propTypes: {
       onClick: React.PropTypes.func.isRequired,
       label: React.PropTypes.string.isRequired,
@@ -258,11 +258,11 @@ loop.panel = (function(_, mozL10n) {
         return null;
       }
       return (
-        React.DOM.li({onClick: this.props.onClick, className: "dropdown-menu-item"}, 
+        React.createElement("li", {onClick: this.props.onClick, className: "dropdown-menu-item"}, 
           this.props.icon ?
-            React.DOM.i({className: "icon icon-" + this.props.icon}) :
+            React.createElement("i", {className: "icon icon-" + this.props.icon}) :
             null, 
-          React.DOM.span(null, this.props.label)
+          React.createElement("span", null, this.props.label)
         )
       );
     }
@@ -271,7 +271,7 @@ loop.panel = (function(_, mozL10n) {
   /**
    * Panel settings (gear) menu.
    */
-  var SettingsDropdown = React.createClass({displayName: 'SettingsDropdown',
+  var SettingsDropdown = React.createClass({displayName: "SettingsDropdown",
     mixins: [sharedMixins.DropdownMenuMixin, sharedMixins.WindowCloseMixin],
 
     handleClickSettingsEntry: function() {
@@ -315,29 +315,29 @@ loop.panel = (function(_, mozL10n) {
       }
 
       return (
-        React.DOM.div({className: "settings-menu dropdown"}, 
-          React.DOM.a({className: "button-settings", onClick: this.showDropdownMenu, 
+        React.createElement("div", {className: "settings-menu dropdown"}, 
+          React.createElement("a", {className: "button-settings", onClick: this.showDropdownMenu, 
              title: mozL10n.get("settings_menu_button_tooltip")}), 
-          React.DOM.ul({className: cx({"dropdown-menu": true, hide: !this.state.showMenu}), 
+          React.createElement("ul", {className: cx({"dropdown-menu": true, hide: !this.state.showMenu}), 
               onMouseLeave: this.hideDropdownMenu}, 
-            SettingsDropdownEntry({label: mozL10n.get("settings_menu_item_settings"), 
+            React.createElement(SettingsDropdownEntry, {label: mozL10n.get("settings_menu_item_settings"), 
                                    onClick: this.handleClickSettingsEntry, 
                                    displayed: false, 
                                    icon: "settings"}), 
-            SettingsDropdownEntry({label: mozL10n.get("settings_menu_item_account"), 
+            React.createElement(SettingsDropdownEntry, {label: mozL10n.get("settings_menu_item_account"), 
                                    onClick: this.handleClickAccountEntry, 
                                    icon: "account", 
                                    displayed: this._isSignedIn()}), 
-            SettingsDropdownEntry({icon: "tour", 
+            React.createElement(SettingsDropdownEntry, {icon: "tour", 
                                    label: mozL10n.get("tour_label"), 
                                    onClick: this.openGettingStartedTour}), 
-            SettingsDropdownEntry({label: this._isSignedIn() ?
+            React.createElement(SettingsDropdownEntry, {label: this._isSignedIn() ?
                                           mozL10n.get("settings_menu_item_signout") :
                                           mozL10n.get("settings_menu_item_signin"), 
                                    onClick: this.handleClickAuthEntry, 
                                    displayed: navigator.mozLoop.fxAEnabled, 
                                    icon: this._isSignedIn() ? "signout" : "signin"}), 
-            SettingsDropdownEntry({label: mozL10n.get("help_label"), 
+            React.createElement(SettingsDropdownEntry, {label: mozL10n.get("help_label"), 
                                    onClick: this.handleHelpEntry, 
                                    icon: "help"})
           )
@@ -349,7 +349,7 @@ loop.panel = (function(_, mozL10n) {
   /**
    * Call url result view.
    */
-  var CallUrlResult = React.createClass({displayName: 'CallUrlResult',
+  var CallUrlResult = React.createClass({displayName: "CallUrlResult",
     mixins: [sharedMixins.DocumentVisibilityMixin],
 
     propTypes: {
@@ -467,26 +467,26 @@ loop.panel = (function(_, mozL10n) {
       // from the react lib.
       var cx = React.addons.classSet;
       return (
-        React.DOM.div({className: "generate-url"}, 
-          React.DOM.header({id: "share-link-header"}, mozL10n.get("share_link_header_text")), 
-          React.DOM.div({className: "generate-url-stack"}, 
-            React.DOM.input({type: "url", value: this.state.callUrl, readOnly: "true", 
+        React.createElement("div", {className: "generate-url"}, 
+          React.createElement("header", {id: "share-link-header"}, mozL10n.get("share_link_header_text")), 
+          React.createElement("div", {className: "generate-url-stack"}, 
+            React.createElement("input", {type: "url", value: this.state.callUrl, readOnly: "true", 
                    onCopy: this.handleLinkExfiltration, 
                    className: cx({"generate-url-input": true,
                                   pending: this.state.pending,
                                   // Used in functional testing, signals that
                                   // call url was received from loop server
                                   callUrl: !this.state.pending})}), 
-            React.DOM.div({className: cx({"generate-url-spinner": true,
+            React.createElement("div", {className: cx({"generate-url-spinner": true,
                                 spinner: true,
                                 busy: this.state.pending})})
           ), 
-          ButtonGroup({additionalClass: "url-actions"}, 
-            Button({additionalClass: "button-email", 
+          React.createElement(ButtonGroup, {additionalClass: "url-actions"}, 
+            React.createElement(Button, {additionalClass: "button-email", 
                     disabled: !this.state.callUrl, 
                     onClick: this.handleEmailButtonClick, 
                     caption: mozL10n.get("share_button")}), 
-            Button({additionalClass: "button-copy", 
+            React.createElement(Button, {additionalClass: "button-copy", 
                     disabled: !this.state.callUrl, 
                     onClick: this.handleCopyButtonClick, 
                     caption: this.state.copied ? mozL10n.get("copied_url_button") :
@@ -500,7 +500,7 @@ loop.panel = (function(_, mozL10n) {
   /**
    * FxA sign in/up link component.
    */
-  var AuthLink = React.createClass({displayName: 'AuthLink',
+  var AuthLink = React.createClass({displayName: "AuthLink",
     handleSignUpLinkClick: function() {
       navigator.mozLoop.logInToFxA();
     },
@@ -510,8 +510,8 @@ loop.panel = (function(_, mozL10n) {
         return null;
       }
       return (
-        React.DOM.p({className: "signin-link"}, 
-          React.DOM.a({href: "#", onClick: this.handleSignUpLinkClick}, 
+        React.createElement("p", {className: "signin-link"}, 
+          React.createElement("a", {href: "#", onClick: this.handleSignUpLinkClick}, 
             mozL10n.get("panel_footer_signin_or_signup_link")
           )
         )
@@ -522,17 +522,17 @@ loop.panel = (function(_, mozL10n) {
   /**
    * FxA user identity (guest/authenticated) component.
    */
-  var UserIdentity = React.createClass({displayName: 'UserIdentity',
+  var UserIdentity = React.createClass({displayName: "UserIdentity",
     render: function() {
       return (
-        React.DOM.p({className: "user-identity"}, 
+        React.createElement("p", {className: "user-identity"}, 
           this.props.displayName
         )
       );
     }
   });
 
-  var EditInPlace = React.createClass({displayName: 'EditInPlace',
+  var EditInPlace = React.createClass({displayName: "EditInPlace",
     mixins: [React.addons.LinkedStateMixin],
 
     propTypes: {
@@ -588,15 +588,15 @@ loop.panel = (function(_, mozL10n) {
     render: function() {
       if (!this.state.edit) {
         return (
-          React.DOM.span({className: "edit-in-place", onClick: this.handleTextClick, 
+          React.createElement("span", {className: "edit-in-place", onClick: this.handleTextClick, 
                 title: mozL10n.get("rooms_name_this_room_tooltip2")}, 
             this.state.text
           )
         );
       }
       return (
-        React.DOM.form({onSubmit: this.handleFormSubmit}, 
-          React.DOM.input({type: "text", valueLink: this.linkState("text"), 
+        React.createElement("form", {onSubmit: this.handleFormSubmit}, 
+          React.createElement("input", {type: "text", valueLink: this.linkState("text"), 
                  onClick: this.handleInputClick, 
                  onBlur: this.cancelEdit})
         )
@@ -607,7 +607,7 @@ loop.panel = (function(_, mozL10n) {
   /**
    * Room list entry.
    */
-  var RoomEntry = React.createClass({displayName: 'RoomEntry',
+  var RoomEntry = React.createClass({displayName: "RoomEntry",
     propTypes: {
       dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
       room:       React.PropTypes.instanceOf(loop.store.Room).isRequired
@@ -690,19 +690,19 @@ loop.panel = (function(_, mozL10n) {
       });
 
       return (
-        React.DOM.div({className: roomClasses, onMouseLeave: this.handleMouseLeave, 
+        React.createElement("div", {className: roomClasses, onMouseLeave: this.handleMouseLeave, 
              onClick: this.handleClickEntry}, 
-          React.DOM.h2(null, 
-            React.DOM.span({className: "room-notification"}), 
-            EditInPlace({text: room.roomName, onChange: this.renameRoom}), 
-            React.DOM.button({className: copyButtonClasses, 
+          React.createElement("h2", null, 
+            React.createElement("span", {className: "room-notification"}), 
+            React.createElement(EditInPlace, {text: room.roomName, onChange: this.renameRoom}), 
+            React.createElement("button", {className: copyButtonClasses, 
               title: mozL10n.get("rooms_list_copy_url_tooltip"), 
               onClick: this.handleCopyButtonClick}), 
-            React.DOM.button({className: "delete-link", 
+            React.createElement("button", {className: "delete-link", 
               title: mozL10n.get("rooms_list_delete_tooltip"), 
               onClick: this.handleDeleteButtonClick})
           ), 
-          React.DOM.p(null, React.DOM.a({className: "room-url-link", href: "#"}, room.roomUrl))
+          React.createElement("p", null, React.createElement("a", {className: "room-url-link", href: "#"}, room.roomUrl))
         )
       );
     }
@@ -711,7 +711,7 @@ loop.panel = (function(_, mozL10n) {
   /**
    * Room list.
    */
-  var RoomList = React.createClass({displayName: 'RoomList',
+  var RoomList = React.createClass({displayName: "RoomList",
     mixins: [Backbone.Events, sharedMixins.WindowCloseMixin],
 
     propTypes: {
@@ -776,19 +776,19 @@ loop.panel = (function(_, mozL10n) {
       }
 
       return (
-        React.DOM.div({className: "rooms"}, 
-          React.DOM.h1(null, this._getListHeading()), 
-          React.DOM.div({className: "room-list"}, 
+        React.createElement("div", {className: "rooms"}, 
+          React.createElement("h1", null, this._getListHeading()), 
+          React.createElement("div", {className: "room-list"}, 
             this.state.rooms.map(function(room, i) {
-              return RoomEntry({
+              return React.createElement(RoomEntry, {
                 key: room.roomToken, 
                 dispatcher: this.props.dispatcher, 
                 room: room}
               );
             }, this)
           ), 
-          React.DOM.p(null, 
-            React.DOM.button({className: "btn btn-info new-room-button", 
+          React.createElement("p", null, 
+            React.createElement("button", {className: "btn btn-info new-room-button", 
                     onClick: this.handleCreateButtonClick, 
                     disabled: this._hasPendingOperation()}, 
               mozL10n.get("rooms_new_room_button_label")
@@ -802,7 +802,7 @@ loop.panel = (function(_, mozL10n) {
   /**
    * Panel view.
    */
-  var PanelView = React.createClass({displayName: 'PanelView',
+  var PanelView = React.createClass({displayName: "PanelView",
     propTypes: {
       notifications: React.PropTypes.object.isRequired,
       client: React.PropTypes.object.isRequired,
@@ -894,23 +894,23 @@ loop.panel = (function(_, mozL10n) {
     _renderRoomsOrCallTab: function() {
       if (!this._roomsEnabled()) {
         return (
-          Tab({name: "call"}, 
-            React.DOM.div({className: "content-area"}, 
-              CallUrlResult({client: this.props.client, 
+          React.createElement(Tab, {name: "call"}, 
+            React.createElement("div", {className: "content-area"}, 
+              React.createElement(CallUrlResult, {client: this.props.client, 
                              notifications: this.props.notifications, 
                              callUrl: this.props.callUrl}), 
-              ToSView(null)
+              React.createElement(ToSView, null)
             )
           )
         );
       }
 
       return (
-        Tab({name: "rooms"}, 
-          RoomList({dispatcher: this.props.dispatcher, 
+        React.createElement(Tab, {name: "rooms"}, 
+          React.createElement(RoomList, {dispatcher: this.props.dispatcher, 
                     store: this.props.roomStore, 
                     userDisplayName: this._getUserDisplayName()}), 
-          ToSView(null)
+          React.createElement(ToSView, null)
         )
       );
     },
@@ -950,11 +950,11 @@ loop.panel = (function(_, mozL10n) {
 
       if (!this.state.gettingStartedSeen) {
         return (
-          React.DOM.div(null, 
-            NotificationListView({notifications: this.props.notifications, 
+          React.createElement("div", null, 
+            React.createElement(NotificationListView, {notifications: this.props.notifications, 
                                   clearOnDocumentHidden: true}), 
-            GettingStartedView(null), 
-            ToSView(null)
+            React.createElement(GettingStartedView, null), 
+            React.createElement(ToSView, null)
           )
         );
       }
@@ -966,38 +966,38 @@ loop.panel = (function(_, mozL10n) {
       }
 
       return (
-        React.DOM.div(null, 
-          NotificationListView({notifications: this.props.notifications, 
+        React.createElement("div", null, 
+          React.createElement(NotificationListView, {notifications: this.props.notifications, 
                                 clearOnDocumentHidden: true}), 
-          TabView({ref: "tabView", selectedTab: this.props.selectedTab, 
+          React.createElement(TabView, {ref: "tabView", selectedTab: this.props.selectedTab, 
             buttonsHidden: hideButtons}, 
             this._renderRoomsOrCallTab(), 
-            Tab({name: "contacts"}, 
-              ContactsList({selectTab: this.selectTab, 
+            React.createElement(Tab, {name: "contacts"}, 
+              React.createElement(ContactsList, {selectTab: this.selectTab, 
                             startForm: this.startForm})
             ), 
-            Tab({name: "contacts_add", hidden: true}, 
-              ContactDetailsForm({ref: "contacts_add", mode: "add", 
+            React.createElement(Tab, {name: "contacts_add", hidden: true}, 
+              React.createElement(ContactDetailsForm, {ref: "contacts_add", mode: "add", 
                                   selectTab: this.selectTab})
             ), 
-            Tab({name: "contacts_edit", hidden: true}, 
-              ContactDetailsForm({ref: "contacts_edit", mode: "edit", 
+            React.createElement(Tab, {name: "contacts_edit", hidden: true}, 
+              React.createElement(ContactDetailsForm, {ref: "contacts_edit", mode: "edit", 
                                   selectTab: this.selectTab})
             ), 
-            Tab({name: "contacts_import", hidden: true}, 
-              ContactDetailsForm({ref: "contacts_import", mode: "import", 
+            React.createElement(Tab, {name: "contacts_import", hidden: true}, 
+              React.createElement(ContactDetailsForm, {ref: "contacts_import", mode: "import", 
                                   selectTab: this.selectTab})
             )
           ), 
-          React.DOM.div({className: "footer"}, 
-            React.DOM.div({className: "user-details"}, 
-              UserIdentity({displayName: this._getUserDisplayName()}), 
-              AvailabilityDropdown(null)
+          React.createElement("div", {className: "footer"}, 
+            React.createElement("div", {className: "user-details"}, 
+              React.createElement(UserIdentity, {displayName: this._getUserDisplayName()}), 
+              React.createElement(AvailabilityDropdown, null)
             ), 
-            React.DOM.div({className: "signin-details"}, 
-              AuthLink(null), 
-              React.DOM.div({className: "footer-signin-separator"}), 
-              SettingsDropdown(null)
+            React.createElement("div", {className: "signin-details"}, 
+              React.createElement(AuthLink, null), 
+              React.createElement("div", {className: "footer-signin-separator"}), 
+              React.createElement(SettingsDropdown, null)
             )
           )
         )
@@ -1021,7 +1021,7 @@ loop.panel = (function(_, mozL10n) {
       notifications: notifications
     });
 
-    React.renderComponent(PanelView({
+    React.render(React.createElement(PanelView, {
       client: client, 
       notifications: notifications, 
       roomStore: roomStore, 

browser/components/loop/content/js/panel.jsx

@@ -212,12 +212,12 @@ loop.panel = (function(_, mozL10n) {
         var privacy_notice_url = navigator.mozLoop.getLoopPref('legal.privacy_url');
         var tosHTML = mozL10n.get("legal_text_and_links3", {
           "clientShortname": mozL10n.get("clientShortname2"),
-          "terms_of_use": React.renderComponentToStaticMarkup(
+          "terms_of_use": React.renderToStaticMarkup(
             <a href={terms_of_use_url} target="_blank">
               {mozL10n.get("legal_text_tos")}
             </a>
           ),
-          "privacy_notice": React.renderComponentToStaticMarkup(
+          "privacy_notice": React.renderToStaticMarkup(
             <a href={privacy_notice_url} target="_blank">
               {mozL10n.get("legal_text_privacy")}
             </a>
@@ -1021,7 +1021,7 @@ loop.panel = (function(_, mozL10n) {
       notifications: notifications
     });
 
-    React.renderComponent(<PanelView
+    React.render(<PanelView
       client={client}
       notifications={notifications}
       roomStore={roomStore}

browser/components/loop/content/js/roomViews.js

@@ -57,7 +57,7 @@ loop.roomViews = (function(mozL10n) {
   /**
    * Desktop room invitation view (overlay).
    */
-  var DesktopRoomInvitationView = React.createClass({displayName: 'DesktopRoomInvitationView',
+  var DesktopRoomInvitationView = React.createClass({displayName: "DesktopRoomInvitationView",
     mixins: [ActiveRoomStoreMixin, React.addons.LinkedStateMixin],
 
     propTypes: {
@@ -128,25 +128,25 @@ loop.roomViews = (function(mozL10n) {
     render: function() {
       var cx = React.addons.classSet;
       return (
-        React.DOM.div({className: "room-invitation-overlay"}, 
-          React.DOM.p({className: cx({"error": !!this.state.error,
+        React.createElement("div", {className: "room-invitation-overlay"}, 
+          React.createElement("p", {className: cx({"error": !!this.state.error,
                             "error-display-area": true})}, 
             mozL10n.get("rooms_name_change_failed_label")
           ), 
-          React.DOM.form({onSubmit: this.handleFormSubmit}, 
-            React.DOM.textarea({rows: "2", type: "text", className: "input-room-name", 
+          React.createElement("form", {onSubmit: this.handleFormSubmit}, 
+            React.createElement("textarea", {rows: "2", type: "text", className: "input-room-name", 
               valueLink: this.linkState("newRoomName"), 
               onBlur: this.handleFormSubmit, 
               onKeyDown: this.handleTextareaKeyDown, 
               placeholder: mozL10n.get("rooms_name_this_room_label")})
           ), 
-          React.DOM.p(null, mozL10n.get("invite_header_text")), 
-          React.DOM.div({className: "btn-group call-action-group"}, 
-            React.DOM.button({className: "btn btn-info btn-email", 
+          React.createElement("p", null, mozL10n.get("invite_header_text")), 
+          React.createElement("div", {className: "btn-group call-action-group"}, 
+            React.createElement("button", {className: "btn btn-info btn-email", 
                     onClick: this.handleEmailButtonClick}, 
               mozL10n.get("share_button2")
             ), 
-            React.DOM.button({className: "btn btn-info btn-copy", 
+            React.createElement("button", {className: "btn btn-info btn-copy", 
                     onClick: this.handleCopyButtonClick}, 
               this.state.copiedUrl ? mozL10n.get("copied_url_button") :
                                       mozL10n.get("copy_url_button2")
@@ -160,7 +160,7 @@ loop.roomViews = (function(mozL10n) {
   /**
    * Desktop room conversation view.
    */
-  var DesktopRoomConversationView = React.createClass({displayName: 'DesktopRoomConversationView',
+  var DesktopRoomConversationView = React.createClass({displayName: "DesktopRoomConversationView",
     mixins: [
       ActiveRoomStoreMixin,
       sharedMixins.DocumentTitleMixin,
@@ -175,7 +175,7 @@ loop.roomViews = (function(mozL10n) {
 
     _renderInvitationOverlay: function() {
       if (this.state.roomState !== ROOM_STATES.HAS_PARTICIPANTS) {
-        return DesktopRoomInvitationView({
+        return React.createElement(DesktopRoomInvitationView, {
           roomStore: this.props.roomStore, 
           dispatcher: this.props.dispatcher}
         );
@@ -295,13 +295,13 @@ loop.roomViews = (function(mozL10n) {
         case ROOM_STATES.FULL: {
           // Note: While rooms are set to hold a maximum of 2 participants, the
           //       FULL case should never happen on desktop.
-          return loop.conversationViews.GenericFailureView({
+          return React.createElement(loop.conversationViews.GenericFailureView, {
             cancelCall: this.closeWindow}
           );
         }
         case ROOM_STATES.ENDED: {
           if (this.state.used)
-            return sharedViews.FeedbackView({
+            return React.createElement(sharedViews.FeedbackView, {
               feedbackStore: this.props.feedbackStore, 
               onAfterFeedbackReceived: this.closeWindow}
             );
@@ -313,17 +313,17 @@ loop.roomViews = (function(mozL10n) {
         }
         default: {
           return (
-            React.DOM.div({className: "room-conversation-wrapper"}, 
+            React.createElement("div", {className: "room-conversation-wrapper"}, 
               this._renderInvitationOverlay(), 
-              React.DOM.div({className: "video-layout-wrapper"}, 
-                React.DOM.div({className: "conversation room-conversation"}, 
-                  React.DOM.div({className: "media nested"}, 
-                    React.DOM.div({className: "video_wrapper remote_wrapper"}, 
-                      React.DOM.div({className: "video_inner remote"})
+              React.createElement("div", {className: "video-layout-wrapper"}, 
+                React.createElement("div", {className: "conversation room-conversation"}, 
+                  React.createElement("div", {className: "media nested"}, 
+                    React.createElement("div", {className: "video_wrapper remote_wrapper"}, 
+                      React.createElement("div", {className: "video_inner remote"})
                     ), 
-                    React.DOM.div({className: localStreamClasses})
+                    React.createElement("div", {className: localStreamClasses})
                   ), 
-                  sharedViews.ConversationToolbar({
+                  React.createElement(sharedViews.ConversationToolbar, {
                     video: {enabled: !this.state.videoMuted, visible: true}, 
                     audio: {enabled: !this.state.audioMuted, visible: true}, 
                     publishStream: this.publishStream, 

browser/components/loop/content/panel.html

@@ -14,7 +14,7 @@
 
     <div id="main"></div>
 
-    <script type="text/javascript" src="loop/shared/libs/react-0.11.2.js"></script>
+    <script type="text/javascript" src="loop/shared/libs/react-0.12.2.js"></script>
     <script type="text/javascript" src="loop/libs/l10n.js"></script>
     <script type="text/javascript" src="loop/shared/libs/jquery-2.1.0.js"></script>
     <script type="text/javascript" src="loop/shared/libs/lodash-2.4.1.js"></script>

browser/components/loop/content/shared/js/feedbackViews.js

@@ -25,7 +25,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
    * Props:
    * -
    */
-  var FeedbackLayout = React.createClass({displayName: 'FeedbackLayout',
+  var FeedbackLayout = React.createClass({displayName: "FeedbackLayout",
     propTypes: {
       children: React.PropTypes.component.isRequired,
       title: React.PropTypes.string.isRequired,
@@ -33,19 +33,19 @@ loop.shared.views.FeedbackView = (function(l10n) {
     },
 
     render: function() {
-      var backButton = React.DOM.div(null);
+      var backButton = React.createElement("div", null);
       if (this.props.reset) {
         backButton = (
-          React.DOM.button({className: "fx-embedded-btn-back", type: "button", 
+          React.createElement("button", {className: "fx-embedded-btn-back", type: "button", 
                   onClick: this.props.reset}, 
             "« ", l10n.get("feedback_back_button")
           )
         );
       }
       return (
-        React.DOM.div({className: "feedback"}, 
+        React.createElement("div", {className: "feedback"}, 
           backButton, 
-          React.DOM.h3(null, this.props.title), 
+          React.createElement("h3", null, this.props.title), 
           this.props.children
         )
       );
@@ -55,7 +55,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
   /**
    * Detailed feedback form.
    */
-  var FeedbackForm = React.createClass({displayName: 'FeedbackForm',
+  var FeedbackForm = React.createClass({displayName: "FeedbackForm",
     propTypes: {
       feedbackStore: React.PropTypes.instanceOf(loop.store.FeedbackStore),
       pending:       React.PropTypes.bool,
@@ -84,8 +84,8 @@ loop.shared.views.FeedbackView = (function(l10n) {
       var categories = this._getCategories();
       return Object.keys(categories).map(function(category, key) {
         return (
-          React.DOM.label({key: key, className: "feedback-category-label"}, 
-            React.DOM.input({type: "radio", ref: "category", name: "category", 
+          React.createElement("label", {key: key, className: "feedback-category-label"}, 
+            React.createElement("input", {type: "radio", ref: "category", name: "category", 
                    className: "feedback-category-radio", 
                    value: category, 
                    onChange: this.handleCategoryChange, 
@@ -149,12 +149,12 @@ loop.shared.views.FeedbackView = (function(l10n) {
       var descriptionDisplayValue = this.state.category === "other" ?
                                     this.state.description : "";
       return (
-        FeedbackLayout({title: l10n.get("feedback_what_makes_you_sad"), 
+        React.createElement(FeedbackLayout, {title: l10n.get("feedback_what_makes_you_sad"), 
                         reset: this.props.reset}, 
-          React.DOM.form({onSubmit: this.handleFormSubmit}, 
+          React.createElement("form", {onSubmit: this.handleFormSubmit}, 
             this._getCategoryFields(), 
-            React.DOM.p(null, 
-              React.DOM.input({type: "text", ref: "description", name: "description", 
+            React.createElement("p", null, 
+              React.createElement("input", {type: "text", ref: "description", name: "description", 
                 className: "feedback-description", 
                 onChange: this.handleDescriptionFieldChange, 
                 onFocus: this.handleDescriptionFieldFocus, 
@@ -162,7 +162,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
                 placeholder: 
                   l10n.get("feedback_custom_category_text_placeholder")})
             ), 
-            React.DOM.button({type: "submit", className: "btn btn-success", 
+            React.createElement("button", {type: "submit", className: "btn btn-success", 
                     disabled: !this._isFormReady()}, 
               l10n.get("feedback_submit_button")
             )
@@ -179,7 +179,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
    * - {Function} onAfterFeedbackReceived Function to execute after the
    *   WINDOW_AUTOCLOSE_TIMEOUT_IN_SECONDS timeout has elapsed
    */
-  var FeedbackReceived = React.createClass({displayName: 'FeedbackReceived',
+  var FeedbackReceived = React.createClass({displayName: "FeedbackReceived",
     propTypes: {
       onAfterFeedbackReceived: React.PropTypes.func
     },
@@ -208,8 +208,8 @@ loop.shared.views.FeedbackView = (function(l10n) {
         }
       }
       return (
-        FeedbackLayout({title: l10n.get("feedback_thank_you_heading")}, 
-          React.DOM.p({className: "info thank-you"}, 
+        React.createElement(FeedbackLayout, {title: l10n.get("feedback_thank_you_heading")}, 
+          React.createElement("p", {className: "info thank-you"}, 
             l10n.get("feedback_window_will_close_in2", {
               countdown: this.state.countdown,
               num: this.state.countdown
@@ -222,7 +222,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
   /**
    * Feedback view.
    */
-  var FeedbackView = React.createClass({displayName: 'FeedbackView',
+  var FeedbackView = React.createClass({displayName: "FeedbackView",
     mixins: [Backbone.Events],
 
     propTypes: {
@@ -283,12 +283,12 @@ loop.shared.views.FeedbackView = (function(l10n) {
         default:
         case FEEDBACK_STATES.INIT: {
           return (
-            FeedbackLayout({title: 
+            React.createElement(FeedbackLayout, {title: 
               l10n.get("feedback_call_experience_heading2")}, 
-              React.DOM.div({className: "faces"}, 
-                React.DOM.button({className: "face face-happy", 
+              React.createElement("div", {className: "faces"}, 
+                React.createElement("button", {className: "face face-happy", 
                         onClick: this.handleHappyClick}), 
-                React.DOM.button({className: "face face-sad", 
+                React.createElement("button", {className: "face face-sad", 
                         onClick: this.handleSadClick})
               )
             )
@@ -296,7 +296,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
         }
         case FEEDBACK_STATES.DETAILS: {
           return (
-            FeedbackForm({
+            React.createElement(FeedbackForm, {
               feedbackStore: this.props.feedbackStore, 
               reset: this.reset, 
               pending: this.state.feedbackState === FEEDBACK_STATES.PENDING})
@@ -311,7 +311,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
                           this.state.error);
           }
           return (
-            FeedbackReceived({
+            React.createElement(FeedbackReceived, {
               onAfterFeedbackReceived: this.props.onAfterFeedbackReceived})
           );
         }

browser/components/loop/content/shared/js/views.js

@@ -23,7 +23,7 @@ loop.shared.views = (function(_, OT, l10n) {
    * - {Function} action  Function to be executed on click.
    * - {Enabled}  enabled Stream activation status (default: true).
    */
-  var MediaControlButton = React.createClass({displayName: 'MediaControlButton',
+  var MediaControlButton = React.createClass({displayName: "MediaControlButton",
     propTypes: {
       scope: React.PropTypes.string.isRequired,
       type: React.PropTypes.string.isRequired,
@@ -64,7 +64,7 @@ loop.shared.views = (function(_, OT, l10n) {
     render: function() {
       return (
         /* jshint ignore:start */
-        React.DOM.button({className: this._getClasses(), 
+        React.createElement("button", {className: this._getClasses(), 
                 title: this._getTitle(), 
                 onClick: this.handleClick})
         /* jshint ignore:end */
@@ -75,7 +75,7 @@ loop.shared.views = (function(_, OT, l10n) {
   /**
    * Conversation controls.
    */
-  var ConversationToolbar = React.createClass({displayName: 'ConversationToolbar',
+  var ConversationToolbar = React.createClass({displayName: "ConversationToolbar",
     getDefaultProps: function() {
       return {
         video: {enabled: true, visible: true},
@@ -112,22 +112,22 @@ loop.shared.views = (function(_, OT, l10n) {
     render: function() {
       var cx = React.addons.classSet;
       return (
-        React.DOM.ul({className: "conversation-toolbar"}, 
-          React.DOM.li({className: "conversation-toolbar-btn-box btn-hangup-entry"}, 
-            React.DOM.button({className: "btn btn-hangup", onClick: this.handleClickHangup, 
+        React.createElement("ul", {className: "conversation-toolbar"}, 
+          React.createElement("li", {className: "conversation-toolbar-btn-box btn-hangup-entry"}, 
+            React.createElement("button", {className: "btn btn-hangup", onClick: this.handleClickHangup, 
                     title: l10n.get("hangup_button_title"), 
                     disabled: !this.props.enableHangup}, 
               this._getHangupButtonLabel()
             )
           ), 
-          React.DOM.li({className: "conversation-toolbar-btn-box"}, 
-            MediaControlButton({action: this.handleToggleVideo, 
+          React.createElement("li", {className: "conversation-toolbar-btn-box"}, 
+            React.createElement(MediaControlButton, {action: this.handleToggleVideo, 
                                 enabled: this.props.video.enabled, 
                                 visible: this.props.video.visible, 
                                 scope: "local", type: "video"})
           ), 
-          React.DOM.li({className: "conversation-toolbar-btn-box"}, 
-            MediaControlButton({action: this.handleToggleAudio, 
+          React.createElement("li", {className: "conversation-toolbar-btn-box"}, 
+            React.createElement(MediaControlButton, {action: this.handleToggleAudio, 
                                 enabled: this.props.audio.enabled, 
                                 visible: this.props.audio.visible, 
                                 scope: "local", type: "audio"})
@@ -140,7 +140,7 @@ loop.shared.views = (function(_, OT, l10n) {
   /**
    * Conversation view.
    */
-  var ConversationView = React.createClass({displayName: 'ConversationView',
+  var ConversationView = React.createClass({displayName: "ConversationView",
     mixins: [Backbone.Events, sharedMixins.AudioMixin],
 
     propTypes: {
@@ -324,15 +324,15 @@ loop.shared.views = (function(_, OT, l10n) {
       });
       /* jshint ignore:start */
       return (
-        React.DOM.div({className: "video-layout-wrapper"}, 
-          React.DOM.div({className: "conversation"}, 
-            React.DOM.div({className: "media nested"}, 
-              React.DOM.div({className: "video_wrapper remote_wrapper"}, 
-                React.DOM.div({className: "video_inner remote"})
+        React.createElement("div", {className: "video-layout-wrapper"}, 
+          React.createElement("div", {className: "conversation"}, 
+            React.createElement("div", {className: "media nested"}, 
+              React.createElement("div", {className: "video_wrapper remote_wrapper"}, 
+                React.createElement("div", {className: "video_inner remote"})
               ), 
-              React.DOM.div({className: localStreamClasses})
+              React.createElement("div", {className: localStreamClasses})
             ), 
-            ConversationToolbar({video: this.state.video, 
+            React.createElement(ConversationToolbar, {video: this.state.video, 
                                  audio: this.state.audio, 
                                  publishStream: this.publishStream, 
                                  hangup: this.hangup})
@@ -346,7 +346,7 @@ loop.shared.views = (function(_, OT, l10n) {
   /**
    * Notification view.
    */
-  var NotificationView = React.createClass({displayName: 'NotificationView',
+  var NotificationView = React.createClass({displayName: "NotificationView",
     mixins: [Backbone.Events],
 
     propTypes: {
@@ -357,19 +357,19 @@ loop.shared.views = (function(_, OT, l10n) {
     render: function() {
       var notification = this.props.notification;
       return (
-        React.DOM.div({className: "notificationContainer"}, 
-          React.DOM.div({key: this.props.key, 
+        React.createElement("div", {className: "notificationContainer"}, 
+          React.createElement("div", {key: this.props.key, 
                className: "alert alert-" + notification.get("level")}, 
-            React.DOM.span({className: "message"}, notification.get("message"))
+            React.createElement("span", {className: "message"}, notification.get("message"))
           ), 
-          React.DOM.div({className: "detailsBar details-" + notification.get("level"), 
+          React.createElement("div", {className: "detailsBar details-" + notification.get("level"), 
                hidden: !notification.get("details")}, 
-            React.DOM.button({className: "detailsButton btn-info", 
+            React.createElement("button", {className: "detailsButton btn-info", 
                     onClick: notification.get("detailsButtonCallback"), 
                     hidden: !notification.get("detailsButtonLabel") || !notification.get("detailsButtonCallback")}, 
               notification.get("detailsButtonLabel")
             ), 
-            React.DOM.span({className: "details"}, notification.get("details"))
+            React.createElement("span", {className: "details"}, notification.get("details"))
           )
         )
       );
@@ -379,7 +379,7 @@ loop.shared.views = (function(_, OT, l10n) {
   /**
    * Notification list view.
    */
-  var NotificationListView = React.createClass({displayName: 'NotificationListView',
+  var NotificationListView = React.createClass({displayName: "NotificationListView",
     mixins: [Backbone.Events, sharedMixins.DocumentVisibilityMixin],
 
     propTypes: {
@@ -419,9 +419,9 @@ loop.shared.views = (function(_, OT, l10n) {
 
     render: function() {
       return (
-        React.DOM.div({className: "messages"}, 
+        React.createElement("div", {className: "messages"}, 
           this.props.notifications.map(function(notification, key) {
-            return NotificationView({key: key, notification: notification});
+            return React.createElement(NotificationView, {key: key, notification: notification});
           })
         
         )
@@ -429,7 +429,7 @@ loop.shared.views = (function(_, OT, l10n) {
     }
   });
 
-  var Button = React.createClass({displayName: 'Button',
+  var Button = React.createClass({displayName: "Button",
     propTypes: {
       caption: React.PropTypes.string.isRequired,
       onClick: React.PropTypes.func.isRequired,
@@ -453,18 +453,18 @@ loop.shared.views = (function(_, OT, l10n) {
         classObject[this.props.additionalClass] = true;
       }
       return (
-        React.DOM.button({onClick: this.props.onClick, 
+        React.createElement("button", {onClick: this.props.onClick, 
                 disabled: this.props.disabled, 
                 id: this.props.htmlId, 
                 className: cx(classObject)}, 
-          React.DOM.span({className: "button-caption"}, this.props.caption), 
+          React.createElement("span", {className: "button-caption"}, this.props.caption), 
           this.props.children
         )
       );
     }
   });
 
-  var ButtonGroup = React.createClass({displayName: 'ButtonGroup',
+  var ButtonGroup = React.createClass({displayName: "ButtonGroup",
     PropTypes: {
       additionalClass: React.PropTypes.string
     },
@@ -482,7 +482,7 @@ loop.shared.views = (function(_, OT, l10n) {
         classObject[this.props.additionalClass] = true;
       }
       return (
-        React.DOM.div({className: cx(classObject)}, 
+        React.createElement("div", {className: cx(classObject)}, 
           this.props.children
         )
       );

browser/components/loop/jar.mn

@@ -89,9 +89,9 @@ browser.jar:
 
   # Shared libs
 #ifdef DEBUG
-  content/browser/loop/shared/libs/react-0.11.2.js    (content/shared/libs/react-0.11.2.js)
+  content/browser/loop/shared/libs/react-0.12.2.js    (content/shared/libs/react-0.12.2.js)
 #else
-  content/browser/loop/shared/libs/react-0.11.2.js    (content/shared/libs/react-0.11.2-prod.js)
+  content/browser/loop/shared/libs/react-0.12.2.js    (content/shared/libs/react-0.12.2-prod.js)
 #endif
   content/browser/loop/shared/libs/lodash-2.4.1.js    (content/shared/libs/lodash-2.4.1.js)
   content/browser/loop/shared/libs/jquery-2.1.0.js    (content/shared/libs/jquery-2.1.0.js)

browser/components/loop/standalone/content/index.html

@@ -80,7 +80,7 @@
       }
     </script>
     <script type="text/javascript" src="libs/l10n-gaia-02ca67948fe8.js"></script>
-    <script type="text/javascript" src="shared/libs/react-0.11.2.js"></script>
+    <script type="text/javascript" src="shared/libs/react-0.12.2.js"></script>
     <script type="text/javascript" src="shared/libs/jquery-2.1.0.js"></script>
     <script type="text/javascript" src="shared/libs/lodash-2.4.1.js"></script>
     <script type="text/javascript" src="shared/libs/backbone-1.1.2.js"></script>

browser/components/loop/standalone/content/js/fxOSMarketplace.js

@@ -12,9 +12,9 @@ loop.fxOSMarketplaceViews = (function() {
    * iframe in case that we need to request the installation of the FxOS Loop
    * client.
    */
-  var FxOSHiddenMarketplaceView = React.createClass({displayName: 'FxOSHiddenMarketplaceView',
+  var FxOSHiddenMarketplaceView = React.createClass({displayName: "FxOSHiddenMarketplaceView",
     render: function() {
-      return React.DOM.iframe({id: "marketplace", src: this.props.marketplaceSrc, hidden: true});
+      return React.createElement("iframe", {id: "marketplace", src: this.props.marketplaceSrc, hidden: true});
     },
 
     componentDidUpdate: function() {

browser/components/loop/standalone/content/js/standaloneRoomViews.js

@@ -17,7 +17,7 @@ loop.standaloneRoomViews = (function(mozL10n) {
   var sharedMixins = loop.shared.mixins;
   var sharedViews = loop.shared.views;
 
-  var StandaloneRoomInfoArea = React.createClass({displayName: 'StandaloneRoomInfoArea',
+  var StandaloneRoomInfoArea = React.createClass({displayName: "StandaloneRoomInfoArea",
     propTypes: {
       helper: React.PropTypes.instanceOf(loop.shared.utils.Helper).isRequired,
       activeRoomStore: React.PropTypes.oneOfType([
@@ -38,7 +38,7 @@ loop.standaloneRoomViews = (function(mozL10n) {
     _renderCallToActionLink: function() {
       if (this.props.helper.isFirefox(navigator.userAgent)) {
         return (
-          React.DOM.a({href: loop.config.learnMoreUrl, className: "btn btn-info"}, 
+          React.createElement("a", {href: loop.config.learnMoreUrl, className: "btn btn-info"}, 
             mozL10n.get("rooms_room_full_call_to_action_label", {
               clientShortname: mozL10n.get("clientShortname2")
             })
@@ -46,7 +46,7 @@ loop.standaloneRoomViews = (function(mozL10n) {
         );
       }
       return (
-        React.DOM.a({href: loop.config.brandWebsiteUrl, className: "btn btn-info"}, 
+        React.createElement("a", {href: loop.config.brandWebsiteUrl, className: "btn btn-info"}, 
           mozL10n.get("rooms_room_full_call_to_action_nonFx_label", {
             brandShortname: mozL10n.get("brandShortname")
           })
@@ -74,8 +74,8 @@ loop.standaloneRoomViews = (function(mozL10n) {
         case ROOM_STATES.READY: {
           // XXX: In ENDED state, we should rather display the feedback form.
           return (
-            React.DOM.div({className: "room-inner-info-area"}, 
-              React.DOM.button({className: "btn btn-join btn-info", 
+            React.createElement("div", {className: "room-inner-info-area"}, 
+              React.createElement("button", {className: "btn btn-join btn-info", 
                       onClick: this.props.joinRoom}, 
                 mozL10n.get("rooms_room_join_label")
               )
@@ -87,8 +87,8 @@ loop.standaloneRoomViews = (function(mozL10n) {
                                 {clientShortname: mozL10n.get("clientShortname2")});
           // XXX Bug 1047040 will add images to help prompt the user.
           return (
-            React.DOM.div({className: "room-inner-info-area"}, 
-              React.DOM.p({className: "prompt-media-message"}, 
+            React.createElement("div", {className: "room-inner-info-area"}, 
+              React.createElement("p", {className: "prompt-media-message"}, 
                 msg
               )
             )
@@ -97,8 +97,8 @@ loop.standaloneRoomViews = (function(mozL10n) {
         case ROOM_STATES.JOINED:
         case ROOM_STATES.SESSION_CONNECTED: {
           return (
-            React.DOM.div({className: "room-inner-info-area"}, 
-              React.DOM.p({className: "empty-room-message"}, 
+            React.createElement("div", {className: "room-inner-info-area"}, 
+              React.createElement("p", {className: "empty-room-message"}, 
                 mozL10n.get("rooms_only_occupant_label")
               )
             )
@@ -106,19 +106,19 @@ loop.standaloneRoomViews = (function(mozL10n) {
         }
         case ROOM_STATES.FULL: {
           return (
-            React.DOM.div({className: "room-inner-info-area"}, 
-              React.DOM.p({className: "full-room-message"}, 
+            React.createElement("div", {className: "room-inner-info-area"}, 
+              React.createElement("p", {className: "full-room-message"}, 
                 mozL10n.get("rooms_room_full_label")
               ), 
-              React.DOM.p(null, this._renderCallToActionLink())
+              React.createElement("p", null, this._renderCallToActionLink())
             )
           );
         }
         case ROOM_STATES.ENDED: {
           if (this.props.roomUsed)
             return (
-              React.DOM.div({className: "ended-conversation"}, 
-                sharedViews.FeedbackView({
+              React.createElement("div", {className: "ended-conversation"}, 
+                React.createElement(sharedViews.FeedbackView, {
                   feedbackStore: this.props.feedbackStore, 
                   onAfterFeedbackReceived: this.onFeedbackSent}
                 )
@@ -132,11 +132,11 @@ loop.standaloneRoomViews = (function(mozL10n) {
         }
         case ROOM_STATES.FAILED: {
           return (
-            React.DOM.div({className: "room-inner-info-area"}, 
-              React.DOM.p({className: "failed-room-message"}, 
+            React.createElement("div", {className: "room-inner-info-area"}, 
+              React.createElement("p", {className: "failed-room-message"}, 
                 this._getFailureString()
               ), 
-              React.DOM.button({className: "btn btn-join btn-info", 
+              React.createElement("button", {className: "btn btn-join btn-info", 
                       onClick: this.props.joinRoom}, 
                 mozL10n.get("retry_call_button")
               )
@@ -150,30 +150,30 @@ loop.standaloneRoomViews = (function(mozL10n) {
     }
   });
 
-  var StandaloneRoomHeader = React.createClass({displayName: 'StandaloneRoomHeader',
+  var StandaloneRoomHeader = React.createClass({displayName: "StandaloneRoomHeader",
     render: function() {
       return (
-        React.DOM.header(null, 
-          React.DOM.h1(null, mozL10n.get("clientShortname2")), 
-          React.DOM.a({target: "_blank", href: loop.config.generalSupportUrl}, 
-            React.DOM.i({className: "icon icon-help"})
+        React.createElement("header", null, 
+          React.createElement("h1", null, mozL10n.get("clientShortname2")), 
+          React.createElement("a", {target: "_blank", href: loop.config.generalSupportUrl}, 
+            React.createElement("i", {className: "icon icon-help"})
           )
         )
       );
     }
   });
 
-  var StandaloneRoomFooter = React.createClass({displayName: 'StandaloneRoomFooter',
+  var StandaloneRoomFooter = React.createClass({displayName: "StandaloneRoomFooter",
     _getContent: function() {
       return mozL10n.get("legal_text_and_links", {
         "clientShortname": mozL10n.get("clientShortname2"),
-        "terms_of_use_url": React.renderComponentToStaticMarkup(
-          React.DOM.a({href: loop.config.legalWebsiteUrl, target: "_blank"}, 
+        "terms_of_use_url": React.renderToStaticMarkup(
+          React.createElement("a", {href: loop.config.legalWebsiteUrl, target: "_blank"}, 
             mozL10n.get("terms_of_use_link_text")
           )
         ),
-        "privacy_notice_url": React.renderComponentToStaticMarkup(
-          React.DOM.a({href: loop.config.privacyWebsiteUrl, target: "_blank"}, 
+        "privacy_notice_url": React.renderToStaticMarkup(
+          React.createElement("a", {href: loop.config.privacyWebsiteUrl, target: "_blank"}, 
             mozL10n.get("privacy_notice_link_text")
           )
         ),
@@ -182,15 +182,15 @@ loop.standaloneRoomViews = (function(mozL10n) {
 
     render: function() {
       return (
-        React.DOM.footer(null, 
-          React.DOM.p({dangerouslySetInnerHTML: {__html: this._getContent()}}), 
-          React.DOM.div({className: "footer-logo"})
+        React.createElement("footer", null, 
+          React.createElement("p", {dangerouslySetInnerHTML: {__html: this._getContent()}}), 
+          React.createElement("div", {className: "footer-logo"})
         )
       );
     }
   });
 
-  var StandaloneRoomView = React.createClass({displayName: 'StandaloneRoomView',
+  var StandaloneRoomView = React.createClass({displayName: "StandaloneRoomView",
     mixins: [
       Backbone.Events,
       sharedMixins.RoomsAudioMixin
@@ -360,29 +360,29 @@ loop.standaloneRoomViews = (function(mozL10n) {
       });
 
       return (
-        React.DOM.div({className: "room-conversation-wrapper"}, 
-          React.DOM.div({className: "beta-logo"}), 
-          StandaloneRoomHeader(null), 
-          StandaloneRoomInfoArea({roomState: this.state.roomState, 
+        React.createElement("div", {className: "room-conversation-wrapper"}, 
+          React.createElement("div", {className: "beta-logo"}), 
+          React.createElement(StandaloneRoomHeader, null), 
+          React.createElement(StandaloneRoomInfoArea, {roomState: this.state.roomState, 
                                   failureReason: this.state.failureReason, 
                                   joinRoom: this.joinRoom, 
                                   helper: this.props.helper, 
                                   activeRoomStore: this.props.activeRoomStore, 
                                   feedbackStore: this.props.feedbackStore, 
                                   roomUsed: this.state.used}), 
-          React.DOM.div({className: "video-layout-wrapper"}, 
-            React.DOM.div({className: "conversation room-conversation"}, 
-              React.DOM.h2({className: "room-name"}, this.state.roomName), 
-              React.DOM.div({className: "media nested"}, 
-                React.DOM.span({className: "self-view-hidden-message"}, 
+          React.createElement("div", {className: "video-layout-wrapper"}, 
+            React.createElement("div", {className: "conversation room-conversation"}, 
+              React.createElement("h2", {className: "room-name"}, this.state.roomName), 
+              React.createElement("div", {className: "media nested"}, 
+                React.createElement("span", {className: "self-view-hidden-message"}, 
                   mozL10n.get("self_view_hidden_message")
                 ), 
-                React.DOM.div({className: "video_wrapper remote_wrapper"}, 
-                  React.DOM.div({className: "video_inner remote"})
+                React.createElement("div", {className: "video_wrapper remote_wrapper"}, 
+                  React.createElement("div", {className: "video_inner remote"})
                 ), 
-                React.DOM.div({className: localStreamClasses})
+                React.createElement("div", {className: localStreamClasses})
               ), 
-              sharedViews.ConversationToolbar({
+              React.createElement(sharedViews.ConversationToolbar, {
                 video: {enabled: !this.state.videoMuted,
                         visible: this._roomIsActive()}, 
                 audio: {enabled: !this.state.audioMuted,
@@ -393,10 +393,10 @@ loop.standaloneRoomViews = (function(mozL10n) {
                 enableHangup: this._roomIsActive()})
             )
           ), 
-          loop.fxOSMarketplaceViews.FxOSHiddenMarketplaceView({
+          React.createElement(loop.fxOSMarketplaceViews.FxOSHiddenMarketplaceView, {
             marketplaceSrc: this.state.marketplaceSrc, 
             onMarketplaceMessage: this.state.onMarketplaceMessage}), 
-          StandaloneRoomFooter(null)
+          React.createElement(StandaloneRoomFooter, null)
         )
       );
     }

browser/components/loop/standalone/content/js/standaloneRoomViews.jsx

@@ -167,12 +167,12 @@ loop.standaloneRoomViews = (function(mozL10n) {
     _getContent: function() {
       return mozL10n.get("legal_text_and_links", {
         "clientShortname": mozL10n.get("clientShortname2"),
-        "terms_of_use_url": React.renderComponentToStaticMarkup(
+        "terms_of_use_url": React.renderToStaticMarkup(
           <a href={loop.config.legalWebsiteUrl} target="_blank">
             {mozL10n.get("terms_of_use_link_text")}
           </a>
         ),
-        "privacy_notice_url": React.renderComponentToStaticMarkup(
+        "privacy_notice_url": React.renderToStaticMarkup(
           <a href={loop.config.privacyWebsiteUrl} target="_blank">
             {mozL10n.get("privacy_notice_link_text")}
           </a>

browser/components/loop/standalone/content/js/webapp.js

@@ -25,11 +25,11 @@ loop.webapp = (function($, _, OT, mozL10n) {
   /**
    * Homepage view.
    */
-  var HomeView = React.createClass({displayName: 'HomeView',
+  var HomeView = React.createClass({displayName: "HomeView",
     render: function() {
       multiplexGum.reset();
       return (
-        React.DOM.p(null, mozL10n.get("welcome", {clientShortname: mozL10n.get("clientShortname2")}))
+        React.createElement("p", null, mozL10n.get("welcome", {clientShortname: mozL10n.get("clientShortname2")}))
       );
     }
   });
@@ -37,16 +37,16 @@ loop.webapp = (function($, _, OT, mozL10n) {
   /**
    * Unsupported Browsers view.
    */
-  var UnsupportedBrowserView = React.createClass({displayName: 'UnsupportedBrowserView',
+  var UnsupportedBrowserView = React.createClass({displayName: "UnsupportedBrowserView",
     render: function() {
       return (
-        React.DOM.div({className: "expired-url-info"}, 
-          React.DOM.div({className: "info-panel"}, 
-            React.DOM.div({className: "firefox-logo"}), 
-            React.DOM.h1(null, mozL10n.get("incompatible_browser_heading")), 
-            React.DOM.h4(null, mozL10n.get("incompatible_browser_message"))
+        React.createElement("div", {className: "expired-url-info"}, 
+          React.createElement("div", {className: "info-panel"}, 
+            React.createElement("div", {className: "firefox-logo"}), 
+            React.createElement("h1", null, mozL10n.get("incompatible_browser_heading")), 
+            React.createElement("h4", null, mozL10n.get("incompatible_browser_message"))
           ), 
-          PromoteFirefoxView({helper: this.props.helper})
+          React.createElement(PromoteFirefoxView, {helper: this.props.helper})
         )
       );
     }
@@ -55,13 +55,13 @@ loop.webapp = (function($, _, OT, mozL10n) {
   /**
    * Unsupported Device view.
    */
-  var UnsupportedDeviceView = React.createClass({displayName: 'UnsupportedDeviceView',
+  var UnsupportedDeviceView = React.createClass({displayName: "UnsupportedDeviceView",
     render: function() {
       return (
-        React.DOM.div(null, 
-          React.DOM.h2(null, mozL10n.get("incompatible_device")), 
-          React.DOM.p(null, mozL10n.get("sorry_device_unsupported", {clientShortname: mozL10n.get("clientShortname2")})), 
-          React.DOM.p(null, mozL10n.get("use_firefox_windows_mac_linux", {brandShortname: mozL10n.get("brandShortname")}))
+        React.createElement("div", null, 
+          React.createElement("h2", null, mozL10n.get("incompatible_device")), 
+          React.createElement("p", null, mozL10n.get("sorry_device_unsupported", {clientShortname: mozL10n.get("clientShortname2")})), 
+          React.createElement("p", null, mozL10n.get("use_firefox_windows_mac_linux", {brandShortname: mozL10n.get("brandShortname")}))
         )
       );
     }
@@ -70,20 +70,20 @@ loop.webapp = (function($, _, OT, mozL10n) {
   /**
    * Firefox promotion interstitial. Will display only to non-Firefox users.
    */
-  var PromoteFirefoxView = React.createClass({displayName: 'PromoteFirefoxView',
+  var PromoteFirefoxView = React.createClass({displayName: "PromoteFirefoxView",
     propTypes: {
       helper: React.PropTypes.object.isRequired
     },
 
     render: function() {
       if (this.props.helper.isFirefox(navigator.userAgent)) {
-        return React.DOM.div(null);
+        return React.createElement("div", null);
       }
       return (
-        React.DOM.div({className: "promote-firefox"}, 
-          React.DOM.h3(null, mozL10n.get("promote_firefox_hello_heading", {brandShortname: mozL10n.get("brandShortname")})), 
-          React.DOM.p(null, 
-            React.DOM.a({className: "btn btn-large btn-accept", 
+        React.createElement("div", {className: "promote-firefox"}, 
+          React.createElement("h3", null, mozL10n.get("promote_firefox_hello_heading", {brandShortname: mozL10n.get("brandShortname")})), 
+          React.createElement("p", null, 
+            React.createElement("a", {className: "btn btn-large btn-accept", 
                href: loop.config.brandWebsiteUrl}, 
               mozL10n.get("get_firefox_button", {
                 brandShortname: mozL10n.get("brandShortname")
@@ -98,30 +98,30 @@ loop.webapp = (function($, _, OT, mozL10n) {
   /**
    * Expired call URL view.
    */
-  var CallUrlExpiredView = React.createClass({displayName: 'CallUrlExpiredView',
+  var CallUrlExpiredView = React.createClass({displayName: "CallUrlExpiredView",
     propTypes: {
       helper: React.PropTypes.object.isRequired
     },
 
     render: function() {
       return (
-        React.DOM.div({className: "expired-url-info"}, 
-          React.DOM.div({className: "info-panel"}, 
-            React.DOM.div({className: "firefox-logo"}), 
-            React.DOM.h1(null, mozL10n.get("call_url_unavailable_notification_heading")), 
-            React.DOM.h4(null, mozL10n.get("call_url_unavailable_notification_message2"))
+        React.createElement("div", {className: "expired-url-info"}, 
+          React.createElement("div", {className: "info-panel"}, 
+            React.createElement("div", {className: "firefox-logo"}), 
+            React.createElement("h1", null, mozL10n.get("call_url_unavailable_notification_heading")), 
+            React.createElement("h4", null, mozL10n.get("call_url_unavailable_notification_message2"))
           ), 
-          PromoteFirefoxView({helper: this.props.helper})
+          React.createElement(PromoteFirefoxView, {helper: this.props.helper})
         )
       );
     }
   });
 
-  var ConversationBranding = React.createClass({displayName: 'ConversationBranding',
+  var ConversationBranding = React.createClass({displayName: "ConversationBranding",
     render: function() {
       return (
-        React.DOM.h1({className: "standalone-header-title"}, 
-          React.DOM.strong(null, mozL10n.get("clientShortname2"))
+        React.createElement("h1", {className: "standalone-header-title"}, 
+          React.createElement("strong", null, mozL10n.get("clientShortname2"))
         )
       );
     }
@@ -195,7 +195,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
     }
   });
 
-  var ConversationHeader = React.createClass({displayName: 'ConversationHeader',
+  var ConversationHeader = React.createClass({displayName: "ConversationHeader",
     render: function() {
       var cx = React.addons.classSet;
       var conversationUrl = location.href;
@@ -212,15 +212,15 @@ loop.webapp = (function($, _, OT, mozL10n) {
       });
 
       return (
-        React.DOM.header({className: "standalone-header header-box container-box"}, 
-          ConversationBranding(null), 
-          React.DOM.div({className: "loop-logo", 
+        React.createElement("header", {className: "standalone-header header-box container-box"}, 
+          React.createElement(ConversationBranding, null), 
+          React.createElement("div", {className: "loop-logo", 
                title: mozL10n.get("client_alttext",
                                   {clientShortname: mozL10n.get("clientShortname2")})}), 
-          React.DOM.h3({className: "call-url"}, 
+          React.createElement("h3", {className: "call-url"}, 
             conversationUrl
           ), 
-          React.DOM.h4({className: urlCreationDateClasses}, 
+          React.createElement("h4", {className: urlCreationDateClasses}, 
             callUrlCreationDateString
           )
         )
@@ -228,15 +228,15 @@ loop.webapp = (function($, _, OT, mozL10n) {
     }
   });
 
-  var ConversationFooter = React.createClass({displayName: 'ConversationFooter',
+  var ConversationFooter = React.createClass({displayName: "ConversationFooter",
     render: function() {
       return (
-        React.DOM.div({className: "standalone-footer container-box"}, 
-          React.DOM.div({title: mozL10n.get("vendor_alttext",
+        React.createElement("div", {className: "standalone-footer container-box"}, 
+          React.createElement("div", {title: mozL10n.get("vendor_alttext",
                                   {vendorShortname: mozL10n.get("vendorShortname")}), 
                className: "footer-logo"}), 
-          React.DOM.div({className: "footer-external-links"}, 
-            React.DOM.a({target: "_blank", href: loop.config.generalSupportUrl}, 
+          React.createElement("div", {className: "footer-external-links"}, 
+            React.createElement("a", {target: "_blank", href: loop.config.generalSupportUrl}, 
               mozL10n.get("support_link")
             )
           )
@@ -249,7 +249,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
    * A view for when conversations are pending, displays any messages
    * and an option cancel button.
    */
-  var PendingConversationView = React.createClass({displayName: 'PendingConversationView',
+  var PendingConversationView = React.createClass({displayName: "PendingConversationView",
     propTypes: {
       callState: React.PropTypes.string.isRequired,
       // If not supplied, the cancel button is not displayed.
@@ -265,32 +265,32 @@ loop.webapp = (function($, _, OT, mozL10n) {
       });
 
       return (
-        React.DOM.div({className: "container"}, 
-          React.DOM.div({className: "container-box"}, 
-            React.DOM.header({className: "pending-header header-box"}, 
-              ConversationBranding(null)
+        React.createElement("div", {className: "container"}, 
+          React.createElement("div", {className: "container-box"}, 
+            React.createElement("header", {className: "pending-header header-box"}, 
+              React.createElement(ConversationBranding, null)
             ), 
 
-            React.DOM.div({id: "cameraPreview"}), 
+            React.createElement("div", {id: "cameraPreview"}), 
 
-            React.DOM.div({id: "messages"}), 
+            React.createElement("div", {id: "messages"}), 
 
-            React.DOM.p({className: "standalone-btn-label"}, 
+            React.createElement("p", {className: "standalone-btn-label"}, 
               this.props.callState
             ), 
 
-            React.DOM.div({className: "btn-pending-cancel-group btn-group"}, 
-              React.DOM.div({className: "flex-padding-1"}), 
-              React.DOM.button({className: cancelButtonClasses, 
+            React.createElement("div", {className: "btn-pending-cancel-group btn-group"}, 
+              React.createElement("div", {className: "flex-padding-1"}), 
+              React.createElement("button", {className: cancelButtonClasses, 
                       onClick: this.props.cancelCallback}, 
-                React.DOM.span({className: "standalone-call-btn-text"}, 
+                React.createElement("span", {className: "standalone-call-btn-text"}, 
                   mozL10n.get("initiate_call_cancel_button")
                 )
               ), 
-              React.DOM.div({className: "flex-padding-1"})
+              React.createElement("div", {className: "flex-padding-1"})
             )
           ), 
-          ConversationFooter(null)
+          React.createElement(ConversationFooter, null)
         )
       );
     }
@@ -300,7 +300,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
    * View displayed whilst the get user media prompt is being displayed. Indicates
    * to the user to accept the prompt.
    */
-  var GumPromptConversationView = React.createClass({displayName: 'GumPromptConversationView',
+  var GumPromptConversationView = React.createClass({displayName: "GumPromptConversationView",
     render: function() {
       var callState = mozL10n.get("call_progress_getting_media_description", {
         clientShortname: mozL10n.get("clientShortname2")
@@ -310,7 +310,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
         currentStatus: mozL10n.get("call_progress_getting_media_title")
       });
 
-      return PendingConversationView({callState: callState});
+      return React.createElement(PendingConversationView, {callState: callState});
     }
   });
 
@@ -318,7 +318,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
    * View displayed waiting for a call to be connected. Updates the display
    * once the websocket shows that the callee is being alerted.
    */
-  var WaitingConversationView = React.createClass({displayName: 'WaitingConversationView',
+  var WaitingConversationView = React.createClass({displayName: "WaitingConversationView",
     mixins: [sharedMixins.AudioMixin],
 
     getInitialState: function() {
@@ -356,7 +356,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
                                     currentStatus: mozL10n.get(callStateStringEntityName)});
 
       return (
-        PendingConversationView({
+        React.createElement(PendingConversationView, {
           callState: callState, 
           cancelCallback: this._cancelOutgoingCall}
         )
@@ -364,7 +364,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
     }
   });
 
-  var InitiateCallButton = React.createClass({displayName: 'InitiateCallButton',
+  var InitiateCallButton = React.createClass({displayName: "InitiateCallButton",
     mixins: [sharedMixins.DropdownMenuMixin],
 
     propTypes: {
@@ -388,25 +388,25 @@ loop.webapp = (function($, _, OT, mozL10n) {
         "disabled": this.props.disabled
       });
       return (
-        React.DOM.div({className: "standalone-btn-chevron-menu-group"}, 
-          React.DOM.div({className: "btn-group-chevron"}, 
-            React.DOM.div({className: "btn-group"}, 
-              React.DOM.button({className: "btn btn-constrained btn-large btn-accept", 
+        React.createElement("div", {className: "standalone-btn-chevron-menu-group"}, 
+          React.createElement("div", {className: "btn-group-chevron"}, 
+            React.createElement("div", {className: "btn-group"}, 
+              React.createElement("button", {className: "btn btn-constrained btn-large btn-accept", 
                       onClick: this.props.startCall("audio-video"), 
                       disabled: this.props.disabled, 
                       title: mozL10n.get("initiate_audio_video_call_tooltip2")}, 
-                React.DOM.span({className: "standalone-call-btn-text"}, 
+                React.createElement("span", {className: "standalone-call-btn-text"}, 
                   this.props.caption
                 ), 
-                React.DOM.span({className: "standalone-call-btn-video-icon"})
+                React.createElement("span", {className: "standalone-call-btn-video-icon"})
               ), 
-              React.DOM.div({className: chevronClasses, 
+              React.createElement("div", {className: chevronClasses, 
                    onClick: this.toggleDropdownMenu}
               )
             ), 
-            React.DOM.ul({className: dropdownMenuClasses}, 
-              React.DOM.li(null, 
-                React.DOM.button({className: "start-audio-only-call", 
+            React.createElement("ul", {className: dropdownMenuClasses}, 
+              React.createElement("li", null, 
+                React.createElement("button", {className: "start-audio-only-call", 
                         onClick: this.props.startCall("audio"), 
                         disabled: this.props.disabled}, 
                   mozL10n.get("initiate_audio_call_button2")
@@ -422,7 +422,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
   /**
    * Initiate conversation view.
    */
-  var InitiateConversationView = React.createClass({displayName: 'InitiateConversationView',
+  var InitiateConversationView = React.createClass({displayName: "InitiateConversationView",
     mixins: [Backbone.Events],
 
     propTypes: {
@@ -518,37 +518,37 @@ loop.webapp = (function($, _, OT, mozL10n) {
       });
 
       return (
-        React.DOM.div({className: "container"}, 
-          React.DOM.div({className: "container-box"}, 
+        React.createElement("div", {className: "container"}, 
+          React.createElement("div", {className: "container-box"}, 
 
-            ConversationHeader({
+            React.createElement(ConversationHeader, {
               urlCreationDateString: this.state.urlCreationDateString}), 
 
-            React.DOM.p({className: "standalone-btn-label"}, 
+            React.createElement("p", {className: "standalone-btn-label"}, 
               this.props.title
             ), 
 
-            React.DOM.div({id: "messages"}), 
+            React.createElement("div", {id: "messages"}), 
 
-            React.DOM.div({className: "btn-group"}, 
-              React.DOM.div({className: "flex-padding-1"}), 
-              InitiateCallButton({
+            React.createElement("div", {className: "btn-group"}, 
+              React.createElement("div", {className: "flex-padding-1"}), 
+              React.createElement(InitiateCallButton, {
                 caption: this.props.callButtonLabel, 
                 disabled: this.state.disableCallButton, 
                 startCall: this.startCall}
               ), 
-              React.DOM.div({className: "flex-padding-1"})
+              React.createElement("div", {className: "flex-padding-1"})
             ), 
 
-            React.DOM.p({className: tosClasses, 
+            React.createElement("p", {className: tosClasses, 
                dangerouslySetInnerHTML: {__html: tosHTML}})
           ), 
 
-          loop.fxOSMarketplaceViews.FxOSHiddenMarketplaceView({
+          React.createElement(loop.fxOSMarketplaceViews.FxOSHiddenMarketplaceView, {
             marketplaceSrc: this.state.marketplaceSrc, 
             onMarketplaceMessage: this.state.onMarketplaceMessage}), 
 
-          ConversationFooter(null)
+          React.createElement(ConversationFooter, null)
         )
       );
     }
@@ -557,7 +557,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
   /**
    * Ended conversation view.
    */
-  var EndedConversationView = React.createClass({displayName: 'EndedConversationView',
+  var EndedConversationView = React.createClass({displayName: "EndedConversationView",
     propTypes: {
       conversation: React.PropTypes.instanceOf(sharedModels.ConversationModel)
                          .isRequired,
@@ -571,12 +571,12 @@ loop.webapp = (function($, _, OT, mozL10n) {
                                    {clientShortname: mozL10n.get("clientShortname2"),
                                     currentStatus: mozL10n.get("status_conversation_ended")});
       return (
-        React.DOM.div({className: "ended-conversation"}, 
-          sharedViews.FeedbackView({
+        React.createElement("div", {className: "ended-conversation"}, 
+          React.createElement(sharedViews.FeedbackView, {
             feedbackStore: this.props.feedbackStore, 
             onAfterFeedbackReceived: this.props.onAfterFeedbackReceived}
           ), 
-          sharedViews.ConversationView({
+          React.createElement(sharedViews.ConversationView, {
             initiate: false, 
             sdk: this.props.sdk, 
             model: this.props.conversation, 
@@ -588,18 +588,18 @@ loop.webapp = (function($, _, OT, mozL10n) {
     }
   });
 
-  var StartConversationView = React.createClass({displayName: 'StartConversationView',
+  var StartConversationView = React.createClass({displayName: "StartConversationView",
     render: function() {
       document.title = mozL10n.get("clientShortname2");
-      return this.transferPropsTo(
-        InitiateConversationView({
-          title: mozL10n.get("initiate_call_button_label2"), 
-          callButtonLabel: mozL10n.get("initiate_audio_video_call_button2")})
+      return React.createElement(InitiateConversationView, React.__spread({}, 
+        this.props, 
+        {title: mozL10n.get("initiate_call_button_label2"), 
+        callButtonLabel: mozL10n.get("initiate_audio_video_call_button2")})
       );
     }
   });
 
-  var FailedConversationView = React.createClass({displayName: 'FailedConversationView',
+  var FailedConversationView = React.createClass({displayName: "FailedConversationView",
     mixins: [sharedMixins.AudioMixin],
 
     componentDidMount: function() {
@@ -610,11 +610,10 @@ loop.webapp = (function($, _, OT, mozL10n) {
       document.title = mozL10n.get("standalone_title_with_status",
                                    {clientShortname: mozL10n.get("clientShortname2"),
                                     currentStatus: mozL10n.get("status_error")});
-      return this.transferPropsTo(
-        InitiateConversationView({
-          title: mozL10n.get("call_failed_title"), 
-          callButtonLabel: mozL10n.get("retry_call_button")})
-      );
+      return React.createElement(InitiateConversationView, React.__spread({}, 
+        this.props, 
+        {title: mozL10n.get("call_failed_title"), 
+        callButtonLabel: mozL10n.get("retry_call_button")}));
     }
   });
 
@@ -624,7 +623,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
    *
    * At the moment, it does more than that, these parts need refactoring out.
    */
-  var OutgoingConversationView = React.createClass({displayName: 'OutgoingConversationView',
+  var OutgoingConversationView = React.createClass({displayName: "OutgoingConversationView",
     propTypes: {
       client: React.PropTypes.instanceOf(loop.StandaloneClient).isRequired,
       conversation: React.PropTypes.oneOfType([
@@ -679,7 +678,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
       switch (this.state.callStatus) {
         case "start": {
           return (
-            StartConversationView({
+            React.createElement(StartConversationView, {
               conversation: this.props.conversation, 
               notifications: this.props.notifications, 
               client: this.props.client}
@@ -688,7 +687,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
         }
         case "failure": {
           return (
-            FailedConversationView({
+            React.createElement(FailedConversationView, {
               conversation: this.props.conversation, 
               notifications: this.props.notifications, 
               client: this.props.client}
@@ -696,17 +695,17 @@ loop.webapp = (function($, _, OT, mozL10n) {
           );
         }
         case "gumPrompt": {
-          return GumPromptConversationView(null);
+          return React.createElement(GumPromptConversationView, null);
         }
         case "pending": {
-          return WaitingConversationView({websocket: this._websocket});
+          return React.createElement(WaitingConversationView, {websocket: this._websocket});
         }
         case "connected": {
           document.title = mozL10n.get("standalone_title_with_status",
                                        {clientShortname: mozL10n.get("clientShortname2"),
                                         currentStatus: mozL10n.get("status_in_conversation")});
           return (
-            sharedViews.ConversationView({
+            React.createElement(sharedViews.ConversationView, {
               initiate: true, 
               sdk: this.props.sdk, 
               model: this.props.conversation, 
@@ -716,7 +715,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
         }
         case "end": {
           return (
-            EndedConversationView({
+            React.createElement(EndedConversationView, {
               sdk: this.props.sdk, 
               conversation: this.props.conversation, 
               feedbackStore: this.props.feedbackStore, 
@@ -726,11 +725,11 @@ loop.webapp = (function($, _, OT, mozL10n) {
         }
         case "expired": {
           return (
-            CallUrlExpiredView({helper: this.props.helper})
+            React.createElement(CallUrlExpiredView, {helper: this.props.helper})
           );
         }
         default: {
-          return HomeView(null);
+          return React.createElement(HomeView, null);
         }
       }
     },
@@ -918,7 +917,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
    * Webapp Root View. This is the main, single, view that controls the display
    * of the webapp page.
    */
-  var WebappRootView = React.createClass({displayName: 'WebappRootView',
+  var WebappRootView = React.createClass({displayName: "WebappRootView",
 
     mixins: [sharedMixins.UrlHashChangeMixin,
              sharedMixins.DocumentLocationMixin,
@@ -967,14 +966,14 @@ loop.webapp = (function($, _, OT, mozL10n) {
     render: function() {
       switch (this.state.windowType) {
         case "unsupportedDevice": {
-          return UnsupportedDeviceView(null);
+          return React.createElement(UnsupportedDeviceView, null);
         }
         case "unsupportedBrowser": {
-          return UnsupportedBrowserView({helper: this.props.helper});
+          return React.createElement(UnsupportedBrowserView, {helper: this.props.helper});
         }
         case "outgoing": {
           return (
-            OutgoingConversationView({
+            React.createElement(OutgoingConversationView, {
                client: this.props.client, 
                conversation: this.props.conversation, 
                helper: this.props.helper, 
@@ -986,7 +985,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
         }
         case "room": {
           return (
-            loop.standaloneRoomViews.StandaloneRoomView({
+            React.createElement(loop.standaloneRoomViews.StandaloneRoomView, {
               activeRoomStore: this.props.activeRoomStore, 
               feedbackStore: this.props.feedbackStore, 
               dispatcher: this.props.dispatcher, 
@@ -995,7 +994,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
           );
         }
         case "home": {
-          return HomeView(null);
+          return React.createElement(HomeView, null);
         }
         default: {
           // The state hasn't been initialised yet, so don't display
@@ -1079,7 +1078,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
       dispatcher.dispatch(new sharedActions.WindowUnload());
     });
 
-    React.renderComponent(WebappRootView({
+    React.render(React.createElement(WebappRootView, {
       client: client, 
       conversation: conversation, 
       helper: helper, 

browser/components/loop/standalone/content/js/webapp.jsx

@@ -591,11 +591,11 @@ loop.webapp = (function($, _, OT, mozL10n) {
   var StartConversationView = React.createClass({
     render: function() {
       document.title = mozL10n.get("clientShortname2");
-      return this.transferPropsTo(
-        <InitiateConversationView
-          title={mozL10n.get("initiate_call_button_label2")}
-          callButtonLabel={mozL10n.get("initiate_audio_video_call_button2")} />
-      );
+      return <InitiateConversationView
+        {...this.props}
+        title={mozL10n.get("initiate_call_button_label2")}
+        callButtonLabel={mozL10n.get("initiate_audio_video_call_button2")}
+      />;
     }
   });
 
@@ -610,11 +610,10 @@ loop.webapp = (function($, _, OT, mozL10n) {
       document.title = mozL10n.get("standalone_title_with_status",
                                    {clientShortname: mozL10n.get("clientShortname2"),
                                     currentStatus: mozL10n.get("status_error")});
-      return this.transferPropsTo(
-        <InitiateConversationView
-          title={mozL10n.get("call_failed_title")}
-          callButtonLabel={mozL10n.get("retry_call_button")} />
-      );
+      return <InitiateConversationView
+        {...this.props}
+        title={mozL10n.get("call_failed_title")}
+        callButtonLabel={mozL10n.get("retry_call_button")} />;
     }
   });
 
@@ -1079,7 +1078,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
       dispatcher.dispatch(new sharedActions.WindowUnload());
     });
 
-    React.renderComponent(<WebappRootView
+    React.render(<WebappRootView
       client={client}
       conversation={conversation}
       helper={helper}

browser/components/loop/test/desktop-local/contacts_test.js

@@ -59,7 +59,8 @@ describe("loop.contacts", function() {
       };
       navigator.mozLoop.contacts = {getAll: sandbox.stub()};
 
-      listView = TestUtils.renderIntoDocument(loop.contacts.ContactsList());
+      listView = TestUtils.renderIntoDocument(
+        React.createElement(loop.contacts.ContactsList));
     });
 
     afterEach(function() {
@@ -88,46 +89,47 @@ describe("loop.contacts", function() {
   describe("ContactDetailsForm", function() {
     describe("#render", function() {
       describe("add mode", function() {
+        var view;
+
+        beforeEach(function() {
+          view = TestUtils.renderIntoDocument(
+            React.createElement(
+              loop.contacts.ContactDetailsForm, {mode: "add"}));
+        });
+
         it("should render 'add' header", function() {
-          var view = TestUtils.renderIntoDocument(
-            loop.contacts.ContactDetailsForm({mode: "add"}));
 
           var header = view.getDOMNode().querySelector("header");
           expect(header).to.not.equal(null);
           expect(header.textContent).to.eql(fakeAddContactButtonText);
         });
+
         it("should render name input", function() {
-          var view = TestUtils.renderIntoDocument(
-            loop.contacts.ContactDetailsForm({mode: "add"}));
 
           var nameInput = view.getDOMNode().querySelector("input[type='text']");
           expect(nameInput).to.not.equal(null);
         });
+
         it("should render email input", function() {
-          var view = TestUtils.renderIntoDocument(
-            loop.contacts.ContactDetailsForm({mode: "add"}));
 
           var emailInput = view.getDOMNode().querySelector("input[type='email']");
           expect(emailInput).to.not.equal(null);
         });
+
         it("should render tel input", function() {
-          var view = TestUtils.renderIntoDocument(
-            loop.contacts.ContactDetailsForm({mode: "add"}));
 
           var telInput = view.getDOMNode().querySelector("input[type='tel']");
           expect(telInput).to.not.equal(null);
         });
+
         it("should render 'add contact' button", function() {
-          var view = TestUtils.renderIntoDocument(
-            loop.contacts.ContactDetailsForm({mode: "add"}));
 
           var addButton = view.getDOMNode().querySelector(".button-accept");
           expect(addButton).to.not.equal(null);
           expect(addButton.textContent).to.eql(fakeAddContactButtonText);
         });
+
         it("should have all fields required by default", function() {
-          var view = TestUtils.renderIntoDocument(
-            loop.contacts.ContactDetailsForm({mode: "add"}));
           var nameInput = view.getDOMNode().querySelector("input[type='text']");
           var telInput = view.getDOMNode().querySelector("input[type='tel']");
           var emailInput = view.getDOMNode().querySelector("input[type='email']");
@@ -136,9 +138,8 @@ describe("loop.contacts", function() {
           expect(emailInput.required).to.equal(true);
           expect(telInput.required).to.equal(true);
         });
+
         it("should have email and tel required after a name is input", function() {
-          var view = TestUtils.renderIntoDocument(
-            loop.contacts.ContactDetailsForm({mode: "add"}));
           var nameInput = view.getDOMNode().querySelector("input[type='text']");
           TestUtils.Simulate.change(nameInput, {target: {value: "Jenny"}});
           var telInput = view.getDOMNode().querySelector("input[type='tel']");
@@ -148,9 +149,8 @@ describe("loop.contacts", function() {
           expect(emailInput.required).to.equal(true);
           expect(telInput.required).to.equal(true);
         });
+
         it("should allow a contact with only a name and a phone number", function() {
-          var view = TestUtils.renderIntoDocument(
-            loop.contacts.ContactDetailsForm({mode: "add"}));
           var nameInput = view.getDOMNode().querySelector("input[type='text']");
           TestUtils.Simulate.change(nameInput, {target: {value: "Jenny"}});
           var telInput = view.getDOMNode().querySelector("input[type='tel']");
@@ -161,9 +161,8 @@ describe("loop.contacts", function() {
           expect(emailInput.required).to.equal(false, "emailInput");
           expect(telInput.checkValidity()).to.equal(true, "telInput");
         });
+
         it("should allow a contact with only a name and email", function() {
-          var view = TestUtils.renderIntoDocument(
-            loop.contacts.ContactDetailsForm({mode: "add"}));
           var nameInput = view.getDOMNode().querySelector("input[type='text']");
           TestUtils.Simulate.change(nameInput, {target: {value: "Example"}});
           var emailInput = view.getDOMNode().querySelector("input[type='email']");
@@ -174,9 +173,8 @@ describe("loop.contacts", function() {
           expect(emailInput.checkValidity()).to.equal(true);
           expect(telInput.required).to.equal(false);
         });
+
         it("should not allow a contact with only a name", function() {
-          var view = TestUtils.renderIntoDocument(
-            loop.contacts.ContactDetailsForm({mode: "add"}));
           var nameInput = view.getDOMNode().querySelector("input[type='text']");
           TestUtils.Simulate.change(nameInput, {target: {value: "Example"}});
           var emailInput = view.getDOMNode().querySelector("input[type='email']");
@@ -186,9 +184,8 @@ describe("loop.contacts", function() {
           expect(emailInput.checkValidity()).to.equal(false);
           expect(telInput.checkValidity()).to.equal(false);
         });
+
         it("should not allow a contact without name", function() {
-          var view = TestUtils.renderIntoDocument(
-            loop.contacts.ContactDetailsForm({mode: "add"}));
           var nameInput = view.getDOMNode().querySelector("input[type='text']");
           var emailInput = view.getDOMNode().querySelector("input[type='email']");
           TestUtils.Simulate.change(emailInput, {target: {value: "test@example.com"}});
@@ -200,40 +197,38 @@ describe("loop.contacts", function() {
           expect(telInput.checkValidity()).to.equal(true);
         });
       });
-      describe("edit mode", function() {
-        it("should render 'edit' header", function() {
-          var view = TestUtils.renderIntoDocument(
-            loop.contacts.ContactDetailsForm({mode: "edit"}));
 
+      describe("edit mode", function() {
+        var view;
+
+        beforeEach(function() {
+          view = TestUtils.renderIntoDocument(
+            React.createElement(
+              loop.contacts.ContactDetailsForm, {mode: "edit"}));
+        });
+
+        it("should render 'edit' header", function() {
           var header = view.getDOMNode().querySelector("header");
           expect(header).to.not.equal(null);
           expect(header.textContent).to.eql(fakeEditContactButtonText);
         });
-        it("should render name input", function() {
-          var view = TestUtils.renderIntoDocument(
-            loop.contacts.ContactDetailsForm({mode: "edit"}));
 
+        it("should render name input", function() {
           var nameInput = view.getDOMNode().querySelector("input[type='text']");
           expect(nameInput).to.not.equal(null);
         });
-        it("should render email input", function() {
-          var view = TestUtils.renderIntoDocument(
-            loop.contacts.ContactDetailsForm({mode: "edit"}));
 
+        it("should render email input", function() {
           var emailInput = view.getDOMNode().querySelector("input[type='email']");
           expect(emailInput).to.not.equal(null);
         });
-        it("should render tel input", function() {
-          var view = TestUtils.renderIntoDocument(
-            loop.contacts.ContactDetailsForm({mode: "edit"}));
 
+        it("should render tel input", function() {
           var telInput = view.getDOMNode().querySelector("input[type='tel']");
           expect(telInput).to.not.equal(null);
         });
-        it("should render 'done' button", function() {
-          var view = TestUtils.renderIntoDocument(
-            loop.contacts.ContactDetailsForm({mode: "edit"}));
 
+        it("should render 'done' button", function() {
           var doneButton = view.getDOMNode().querySelector(".button-accept");
           expect(doneButton).to.not.equal(null);
           expect(doneButton.textContent).to.eql(fakeDoneButtonText);
@@ -248,6 +243,7 @@ describe("loop.contacts", function() {
 
       expect(obj.value).to.eql("");
     });
+
     it("should return the preferred value when the field exists", function() {
       var correctValue = "correct value";
       var fakeContact = {fakeField: [{value: "wrong value"}, {value: correctValue, pref: true}]};
@@ -265,6 +261,7 @@ describe("loop.contacts", function() {
 
           expect(contact).to.not.have.property("fakeField");
        });
+
     it("should clear the value on the object if the new value is empty," +
        " it existed before, and it is optional", function() {
           var contact = {fakeField: [{value: "foobar"}]};
@@ -272,6 +269,7 @@ describe("loop.contacts", function() {
 
           expect(contact["fakeField"][0].value).to.eql("");
        });
+
     it("should set the value on the object if the new value is empty," +
        " and it did not exist before", function() {
           var contact = {fakeField: [{value: "foobar"}]};

browser/components/loop/test/desktop-local/conversationViews_test.js

@@ -109,7 +109,7 @@ describe("loop.conversationViews", function () {
   describe("CallIdentifierView", function() {
     function mountTestComponent(props) {
       return TestUtils.renderIntoDocument(
-        loop.conversationViews.CallIdentifierView(props));
+        React.createElement(loop.conversationViews.CallIdentifierView, props));
     }
 
     it("should set display the peer identifer", function() {
@@ -170,7 +170,7 @@ describe("loop.conversationViews", function () {
   describe("ConversationDetailView", function() {
     function mountTestComponent(props) {
       return TestUtils.renderIntoDocument(
-        loop.conversationViews.ConversationDetailView(props));
+        React.createElement(loop.conversationViews.ConversationDetailView, props));
     }
 
     it("should set the document title to the calledId", function() {
@@ -192,7 +192,7 @@ describe("loop.conversationViews", function () {
   describe("PendingConversationView", function() {
     function mountTestComponent(props) {
       return TestUtils.renderIntoDocument(
-        loop.conversationViews.PendingConversationView(props));
+        React.createElement(loop.conversationViews.PendingConversationView, props));
     }
 
     it("should set display connecting string when the state is not alerting",
@@ -277,7 +277,7 @@ describe("loop.conversationViews", function () {
     function mountTestComponent(options) {
       options = options || {};
       return TestUtils.renderIntoDocument(
-        loop.conversationViews.CallFailedView({
+        React.createElement(loop.conversationViews.CallFailedView, {
           dispatcher: dispatcher,
           store: store,
           contact: options.contact
@@ -417,7 +417,7 @@ describe("loop.conversationViews", function () {
   describe("OngoingConversationView", function() {
     function mountTestComponent(props) {
       return TestUtils.renderIntoDocument(
-        loop.conversationViews.OngoingConversationView(props));
+        React.createElement(loop.conversationViews.OngoingConversationView, props));
     }
 
     it("should dispatch a setupStreamElements action when the view is created",
@@ -511,7 +511,7 @@ describe("loop.conversationViews", function () {
 
     function mountTestComponent() {
       return TestUtils.renderIntoDocument(
-        loop.conversationViews.OutgoingConversationView({
+        React.createElement(loop.conversationViews.OutgoingConversationView, {
           dispatcher: dispatcher,
           store: store,
           feedbackStore: feedbackStore
@@ -613,7 +613,7 @@ describe("loop.conversationViews", function () {
 
     function mountTestComponent() {
       return TestUtils.renderIntoDocument(
-        loop.conversationViews.IncomingConversationView({
+        React.createElement(loop.conversationViews.IncomingConversationView, {
           client: client,
           conversation: conversation,
           sdk: {},
@@ -1149,7 +1149,7 @@ describe("loop.conversationViews", function () {
       sandbox.stub(window, "Audio").returns(fakeAudio);
 
       view = TestUtils.renderIntoDocument(
-        loop.conversationViews.IncomingCallView({
+        React.createElement(loop.conversationViews.IncomingCallView, {
           model: model,
           video: true
         }));
@@ -1158,7 +1158,7 @@ describe("loop.conversationViews", function () {
     describe("default answer mode", function() {
       it("should display video as primary answer mode", function() {
         view = TestUtils.renderIntoDocument(
-          loop.conversationViews.IncomingCallView({
+          React.createElement(loop.conversationViews.IncomingCallView, {
             model: model,
             video: true
           }));
@@ -1170,7 +1170,7 @@ describe("loop.conversationViews", function () {
 
       it("should display audio as primary answer mode", function() {
         view = TestUtils.renderIntoDocument(
-          loop.conversationViews.IncomingCallView({
+          React.createElement(loop.conversationViews.IncomingCallView, {
             model: model,
             video: false
           }));
@@ -1182,7 +1182,7 @@ describe("loop.conversationViews", function () {
 
       it("should accept call with video", function() {
         view = TestUtils.renderIntoDocument(
-          loop.conversationViews.IncomingCallView({
+          React.createElement(loop.conversationViews.IncomingCallView, {
             model: model,
             video: true
           }));
@@ -1199,7 +1199,7 @@ describe("loop.conversationViews", function () {
 
       it("should accept call with audio", function() {
         view = TestUtils.renderIntoDocument(
-          loop.conversationViews.IncomingCallView({
+          React.createElement(loop.conversationViews.IncomingCallView, {
             model: model,
             video: false
           }));
@@ -1216,38 +1216,38 @@ describe("loop.conversationViews", function () {
 
       it("should accept call with video when clicking on secondary btn",
          function() {
-           view = TestUtils.renderIntoDocument(
-             loop.conversationViews.IncomingCallView({
-               model: model,
-               video: false
-             }));
-           var secondaryBtn = view.getDOMNode()
-           .querySelector('.fx-embedded-btn-video-small');
+          view = TestUtils.renderIntoDocument(
+            React.createElement(loop.conversationViews.IncomingCallView, {
+              model: model,
+              video: false
+            }));
+          var secondaryBtn = view.getDOMNode()
+          .querySelector('.fx-embedded-btn-video-small');
 
-           React.addons.TestUtils.Simulate.click(secondaryBtn);
+          React.addons.TestUtils.Simulate.click(secondaryBtn);
 
-           sinon.assert.calledOnce(model.set);
-           sinon.assert.calledWithExactly(model.set, "selectedCallType", "audio-video");
-           sinon.assert.calledOnce(model.trigger);
-           sinon.assert.calledWithExactly(model.trigger, "accept");
+          sinon.assert.calledOnce(model.set);
+          sinon.assert.calledWithExactly(model.set, "selectedCallType", "audio-video");
+          sinon.assert.calledOnce(model.trigger);
+          sinon.assert.calledWithExactly(model.trigger, "accept");
          });
 
       it("should accept call with audio when clicking on secondary btn",
          function() {
-           view = TestUtils.renderIntoDocument(
-             loop.conversationViews.IncomingCallView({
-               model: model,
-               video: true
-             }));
-           var secondaryBtn = view.getDOMNode()
-           .querySelector('.fx-embedded-btn-audio-small');
+          view = TestUtils.renderIntoDocument(
+            React.createElement(loop.conversationViews.IncomingCallView, {
+              model: model,
+              video: true
+            }));
+          var secondaryBtn = view.getDOMNode()
+          .querySelector('.fx-embedded-btn-audio-small');
 
-           React.addons.TestUtils.Simulate.click(secondaryBtn);
+          React.addons.TestUtils.Simulate.click(secondaryBtn);
 
-           sinon.assert.calledOnce(model.set);
-           sinon.assert.calledWithExactly(model.set, "selectedCallType", "audio");
-           sinon.assert.calledOnce(model.trigger);
-           sinon.assert.calledWithExactly(model.trigger, "accept");
+          sinon.assert.calledOnce(model.set);
+          sinon.assert.calledWithExactly(model.set, "selectedCallType", "audio");
+          sinon.assert.calledOnce(model.trigger);
+          sinon.assert.calledWithExactly(model.trigger, "accept");
          });
     });
 
@@ -1308,10 +1308,9 @@ describe("loop.conversationViews", function () {
       sandbox.stub(window, "Audio").returns(fakeAudio);
 
       view = TestUtils.renderIntoDocument(
-        loop.conversationViews.GenericFailureView({
+        React.createElement(loop.conversationViews.GenericFailureView, {
           cancelCall: function() {}
-        })
-      );
+        }));
     });
 
     it("should play a failure sound, once", function() {

browser/components/loop/test/desktop-local/conversation_test.js

@@ -73,7 +73,7 @@ describe("loop.conversation", function() {
 
   describe("#init", function() {
     beforeEach(function() {
-      sandbox.stub(React, "renderComponent");
+      sandbox.stub(React, "render");
       sandbox.stub(document.mozL10n, "initialize");
 
       sandbox.stub(loop.shared.models.ConversationModel.prototype,
@@ -107,10 +107,10 @@ describe("loop.conversation", function() {
     it("should create the AppControllerView", function() {
       loop.conversation.init();
 
-      sinon.assert.calledOnce(React.renderComponent);
-      sinon.assert.calledWith(React.renderComponent,
+      sinon.assert.calledOnce(React.render);
+      sinon.assert.calledWith(React.render,
         sinon.match(function(value) {
-          return TestUtils.isDescriptorOfType(value,
+          return TestUtils.isCompositeComponentElement(value,
             loop.conversation.AppControllerView);
       }));
     });
@@ -132,7 +132,7 @@ describe("loop.conversation", function() {
 
     function mountTestComponent() {
       return TestUtils.renderIntoDocument(
-        loop.conversation.AppControllerView({
+        React.createElement(loop.conversation.AppControllerView, {
           client: client,
           conversation: conversation,
           roomStore: roomStore,

browser/components/loop/test/desktop-local/index.html

@@ -23,7 +23,7 @@
 
   <!-- libs -->
   <script src="../../content/libs/l10n.js"></script>
-  <script src="../../content/shared/libs/react-0.11.2.js"></script>
+  <script src="../../content/shared/libs/react-0.12.2.js"></script>
   <script src="../../content/shared/libs/jquery-2.1.0.js"></script>
   <script src="../../content/shared/libs/lodash-2.4.1.js"></script>
   <script src="../../content/shared/libs/backbone-1.1.2.js"></script>

browser/components/loop/test/desktop-local/panel_test.js

@@ -80,7 +80,7 @@ describe("loop.panel", function() {
 
   describe("#init", function() {
     beforeEach(function() {
-      sandbox.stub(React, "renderComponent");
+      sandbox.stub(React, "render");
       sandbox.stub(document.mozL10n, "initialize");
       sandbox.stub(document.mozL10n, "get").returns("Fake title");
     });
@@ -96,10 +96,10 @@ describe("loop.panel", function() {
     it("should render the panel view", function() {
       loop.panel.init();
 
-      sinon.assert.calledOnce(React.renderComponent);
-      sinon.assert.calledWith(React.renderComponent,
+      sinon.assert.calledOnce(React.render);
+      sinon.assert.calledWith(React.render,
         sinon.match(function(value) {
-          return TestUtils.isDescriptorOfType(value,
+          return TestUtils.isCompositeComponentElement(value,
             loop.panel.PanelView);
       }));
     });
@@ -121,7 +121,8 @@ describe("loop.panel", function() {
     var view;
 
     beforeEach(function() {
-      view = TestUtils.renderIntoDocument(loop.panel.AvailabilityDropdown());
+      view = TestUtils.renderIntoDocument(
+        React.createElement(loop.panel.AvailabilityDropdown));
     });
 
     describe("doNotDisturb preference change", function() {
@@ -171,14 +172,15 @@ describe("loop.panel", function() {
     });
 
     function createTestPanelView() {
-      return TestUtils.renderIntoDocument(loop.panel.PanelView({
-        notifications: notifications,
-        client: fakeClient,
-        showTabButtons: true,
-        mozLoop: fakeMozLoop,
-        dispatcher: dispatcher,
-        roomStore: roomStore
-      }));
+      return TestUtils.renderIntoDocument(
+        React.createElement(loop.panel.PanelView, {
+          notifications: notifications,
+          client: fakeClient,
+          showTabButtons: true,
+          mozLoop: fakeMozLoop,
+          dispatcher: dispatcher,
+          roomStore: roomStore
+        }));
     }
 
     describe('TabView', function() {
@@ -267,7 +269,8 @@ describe("loop.panel", function() {
       it("should be hidden if FxA is not enabled",
         function() {
           navigator.mozLoop.fxAEnabled = false;
-          var view = TestUtils.renderIntoDocument(loop.panel.AuthLink());
+          var view = TestUtils.renderIntoDocument(
+            React.createElement(loop.panel.AuthLink));
           expect(view.getDOMNode()).to.be.null;
       });
 
@@ -290,7 +293,8 @@ describe("loop.panel", function() {
       it("should be hidden if FxA is not enabled",
         function() {
           navigator.mozLoop.fxAEnabled = false;
-          var view = TestUtils.renderIntoDocument(loop.panel.SettingsDropdown());
+          var view = TestUtils.renderIntoDocument(
+            React.createElement(loop.panel.SettingsDropdown));
           expect(view.getDOMNode()).to.be.null;
       });
 
@@ -298,7 +302,8 @@ describe("loop.panel", function() {
         function() {
           navigator.mozLoop.loggedInToFxA = false;
 
-          var view = TestUtils.renderIntoDocument(loop.panel.SettingsDropdown());
+          var view = TestUtils.renderIntoDocument(
+            React.createElement(loop.panel.SettingsDropdown));
 
           expect(view.getDOMNode().querySelectorAll(".icon-signout"))
             .to.have.length.of(0);
@@ -309,7 +314,8 @@ describe("loop.panel", function() {
       it("should show a signout entry when user is authenticated", function() {
         navigator.mozLoop.userProfile = {email: "test@example.com"};
 
-        var view = TestUtils.renderIntoDocument(loop.panel.SettingsDropdown());
+        var view = TestUtils.renderIntoDocument(
+          React.createElement(loop.panel.SettingsDropdown));
 
         expect(view.getDOMNode().querySelectorAll(".icon-signout"))
           .to.have.length.of(1);
@@ -320,7 +326,8 @@ describe("loop.panel", function() {
       it("should show an account entry when user is authenticated", function() {
         navigator.mozLoop.userProfile = {email: "test@example.com"};
 
-        var view = TestUtils.renderIntoDocument(loop.panel.SettingsDropdown());
+        var view = TestUtils.renderIntoDocument(
+          React.createElement(loop.panel.SettingsDropdown));
 
         expect(view.getDOMNode().querySelectorAll(".icon-account"))
           .to.have.length.of(1);
@@ -329,7 +336,8 @@ describe("loop.panel", function() {
       it("should open the FxA settings when the account entry is clicked", function() {
         navigator.mozLoop.userProfile = {email: "test@example.com"};
 
-        var view = TestUtils.renderIntoDocument(loop.panel.SettingsDropdown());
+        var view = TestUtils.renderIntoDocument(
+          React.createElement(loop.panel.SettingsDropdown));
 
         TestUtils.Simulate.click(
           view.getDOMNode().querySelector(".icon-account"));
@@ -341,7 +349,8 @@ describe("loop.panel", function() {
         function() {
           navigator.mozLoop.loggedInToFxA = false;
 
-          var view = TestUtils.renderIntoDocument(loop.panel.SettingsDropdown());
+          var view = TestUtils.renderIntoDocument(
+            React.createElement(loop.panel.SettingsDropdown));
 
           expect(view.getDOMNode().querySelectorAll(".icon-account"))
             .to.have.length.of(0);
@@ -349,7 +358,8 @@ describe("loop.panel", function() {
 
       it("should sign in the user on click when unauthenticated", function() {
         navigator.mozLoop.loggedInToFxA = false;
-        var view = TestUtils.renderIntoDocument(loop.panel.SettingsDropdown());
+        var view = TestUtils.renderIntoDocument(
+          React.createElement(loop.panel.SettingsDropdown));
 
         TestUtils.Simulate.click(
           view.getDOMNode().querySelector(".icon-signin"));
@@ -359,7 +369,8 @@ describe("loop.panel", function() {
 
       it("should sign out the user on click when authenticated", function() {
         navigator.mozLoop.userProfile = {email: "test@example.com"};
-        var view = TestUtils.renderIntoDocument(loop.panel.SettingsDropdown());
+        var view = TestUtils.renderIntoDocument(
+          React.createElement(loop.panel.SettingsDropdown));
 
         TestUtils.Simulate.click(
           view.getDOMNode().querySelector(".icon-signout"));
@@ -383,7 +394,8 @@ describe("loop.panel", function() {
       });
 
       it("should open a tab to the support page", function() {
-        var view = TestUtils.renderIntoDocument(loop.panel.SettingsDropdown());
+        var view = TestUtils.renderIntoDocument(
+          React.createElement(loop.panel.SettingsDropdown));
 
         TestUtils.Simulate
           .click(view.getDOMNode().querySelector(".icon-help"));
@@ -452,10 +464,11 @@ describe("loop.panel", function() {
       };
 
       sandbox.stub(notifications, "reset");
-      view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
-        notifications: notifications,
-        client: fakeClient
-      }));
+      view = TestUtils.renderIntoDocument(
+        React.createElement(loop.panel.CallUrlResult, {
+          notifications: notifications,
+          client: fakeClient
+        }));
     });
 
     describe("Rendering the component should generate a call URL", function() {
@@ -477,10 +490,11 @@ describe("loop.panel", function() {
 
       it("should make a request to requestCallUrl", function() {
         sandbox.stub(fakeClient, "requestCallUrl");
-        var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
-          notifications: notifications,
-          client: fakeClient
-        }));
+        var view = TestUtils.renderIntoDocument(
+          React.createElement(loop.panel.CallUrlResult, {
+            notifications: notifications,
+            client: fakeClient
+          }));
 
         sinon.assert.calledOnce(view.props.client.requestCallUrl);
         sinon.assert.calledWithExactly(view.props.client.requestCallUrl,
@@ -490,7 +504,8 @@ describe("loop.panel", function() {
       it("should set the call url form in a pending state", function() {
         // Cancel requestCallUrl effect to keep the state pending
         fakeClient.requestCallUrl = sandbox.stub();
-        var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
+        var view = TestUtils.renderIntoDocument(
+          React.createElement(loop.panel.CallUrlResult, {
           notifications: notifications,
           client: fakeClient
         }));
@@ -521,7 +536,8 @@ describe("loop.panel", function() {
       it("should display a share button for email", function() {
         fakeClient.requestCallUrl = sandbox.stub();
         var composeCallUrlEmail = sandbox.stub(sharedUtils, "composeCallUrlEmail");
-        var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
+        var view = TestUtils.renderIntoDocument(
+          React.createElement(loop.panel.CallUrlResult, {
           notifications: notifications,
           client: fakeClient
         }));
@@ -536,7 +552,8 @@ describe("loop.panel", function() {
 
       it("should feature a copy button capable of copying the call url when clicked", function() {
         fakeClient.requestCallUrl = sandbox.stub();
-        var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
+        var view = TestUtils.renderIntoDocument(
+          React.createElement(loop.panel.CallUrlResult, {
           notifications: notifications,
           client: fakeClient
         }));
@@ -556,7 +573,8 @@ describe("loop.panel", function() {
 
       it("should note the call url expiry when the url is copied via button",
         function() {
-          var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
+          var view = TestUtils.renderIntoDocument(
+            React.createElement(loop.panel.CallUrlResult, {
             notifications: notifications,
             client: fakeClient
           }));
@@ -576,7 +594,8 @@ describe("loop.panel", function() {
 
       it("should call mozLoop.telemetryAdd when the url is copied via button",
         function() {
-          var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
+          var view = TestUtils.renderIntoDocument(
+            React.createElement(loop.panel.CallUrlResult, {
             notifications: notifications,
             client: fakeClient
           }));
@@ -599,7 +618,8 @@ describe("loop.panel", function() {
 
       it("should note the call url expiry when the url is emailed",
         function() {
-          var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
+          var view = TestUtils.renderIntoDocument(
+            React.createElement(loop.panel.CallUrlResult, {
             notifications: notifications,
             client: fakeClient
           }));
@@ -619,7 +639,8 @@ describe("loop.panel", function() {
 
       it("should call mozLoop.telemetryAdd when the url is emailed",
         function() {
-          var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
+          var view = TestUtils.renderIntoDocument(
+            React.createElement(loop.panel.CallUrlResult, {
             notifications: notifications,
             client: fakeClient
           }));
@@ -642,7 +663,8 @@ describe("loop.panel", function() {
 
       it("should note the call url expiry when the url is copied manually",
         function() {
-          var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
+          var view = TestUtils.renderIntoDocument(
+            React.createElement(loop.panel.CallUrlResult, {
             notifications: notifications,
             client: fakeClient
           }));
@@ -663,7 +685,8 @@ describe("loop.panel", function() {
 
       it("should call mozLoop.telemetryAdd when the url is copied manually",
         function() {
-          var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
+          var view = TestUtils.renderIntoDocument(
+            React.createElement(loop.panel.CallUrlResult, {
             notifications: notifications,
             client: fakeClient
           }));
@@ -690,10 +713,11 @@ describe("loop.panel", function() {
           cb("fake error");
         };
         sandbox.stub(notifications, "errorL10n");
-        TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
-          notifications: notifications,
-          client: fakeClient
-        }));
+        TestUtils.renderIntoDocument(
+          React.createElement(loop.panel.CallUrlResult, {
+            notifications: notifications,
+            client: fakeClient
+          }));
 
         sinon.assert.calledOnce(notifications.errorL10n);
         sinon.assert.calledWithExactly(notifications.errorL10n,
@@ -723,7 +747,8 @@ describe("loop.panel", function() {
     });
 
     function mountRoomEntry(props) {
-      return TestUtils.renderIntoDocument(loop.panel.RoomEntry(props));
+      return TestUtils.renderIntoDocument(
+        React.createElement(loop.panel.RoomEntry, props));
     }
 
     describe("Edit room name", function() {
@@ -918,11 +943,12 @@ describe("loop.panel", function() {
     });
 
     function createTestComponent() {
-      return TestUtils.renderIntoDocument(loop.panel.RoomList({
-        store: roomStore,
-        dispatcher: dispatcher,
-        userDisplayName: fakeEmail
-      }));
+      return TestUtils.renderIntoDocument(
+        React.createElement(loop.panel.RoomList, {
+          store: roomStore,
+          dispatcher: dispatcher,
+          userDisplayName: fakeEmail
+        }));
     }
 
     it("should dispatch a GetAllRooms action on mount", function() {
@@ -990,7 +1016,8 @@ describe("loop.panel", function() {
         }[key];
       };
 
-      var view = TestUtils.renderIntoDocument(loop.panel.ToSView());
+      var view = TestUtils.renderIntoDocument(
+        React.createElement(loop.panel.ToSView));
 
       TestUtils.findRenderedDOMComponentWithClass(view, "terms-service");
     });
@@ -1019,7 +1046,8 @@ describe("loop.panel", function() {
              "seenToS": "seen"
            }[key];
          };
-         var view = TestUtils.renderIntoDocument(loop.panel.ToSView());
+         var view = TestUtils.renderIntoDocument(
+           React.createElement(loop.panel.ToSView));
 
          TestUtils.findRenderedDOMComponentWithClass(view, "terms-service");
        });

browser/components/loop/test/desktop-local/roomViews_test.js

@@ -55,9 +55,10 @@ describe("loop.roomViews", function () {
         render: function() { return React.DOM.div(); }
       });
 
-      var testView = TestUtils.renderIntoDocument(TestView({
-        roomStore: roomStore
-      }));
+      var testView = TestUtils.renderIntoDocument(
+        React.createElement(TestView, {
+          roomStore: roomStore
+        }));
 
       expect(testView.state).eql({
         roomState: ROOM_STATES.INIT,
@@ -74,9 +75,10 @@ describe("loop.roomViews", function () {
         mixins: [loop.roomViews.ActiveRoomStoreMixin],
         render: function() { return React.DOM.div(); }
       });
-      var testView = TestUtils.renderIntoDocument(TestView({
-        roomStore: roomStore
-      }));
+      var testView = TestUtils.renderIntoDocument(
+        React.createElement(TestView, {
+          roomStore: roomStore
+        }));
 
       activeRoomStore.setStoreState({roomState: ROOM_STATES.READY});
 
@@ -97,10 +99,11 @@ describe("loop.roomViews", function () {
 
     function mountTestComponent() {
       return TestUtils.renderIntoDocument(
-        new loop.roomViews.DesktopRoomInvitationView({
-          dispatcher: dispatcher,
-          roomStore: roomStore
-        }));
+        React.createElement(
+          loop.roomViews.DesktopRoomInvitationView, {
+            dispatcher: dispatcher,
+            roomStore: roomStore
+          }));
     }
 
     it("should dispatch an EmailRoomUrl action when the email button is " +
@@ -202,7 +205,7 @@ describe("loop.roomViews", function () {
 
     function mountTestComponent() {
       return TestUtils.renderIntoDocument(
-        new loop.roomViews.DesktopRoomConversationView({
+        React.createElement(loop.roomViews.DesktopRoomConversationView, {
           dispatcher: dispatcher,
           roomStore: roomStore,
           feedbackStore: new loop.store.FeedbackStore(dispatcher, {

browser/components/loop/test/shared/feedbackViews_test.js

@@ -25,9 +25,10 @@ describe("loop.shared.views.FeedbackView", function() {
     feedbackStore = new loop.store.FeedbackStore(dispatcher, {
       feedbackClient: fakeFeedbackClient
     });
-    comp = TestUtils.renderIntoDocument(sharedViews.FeedbackView({
-      feedbackStore: feedbackStore
-    }));
+    comp = TestUtils.renderIntoDocument(
+      React.createElement(sharedViews.FeedbackView, {
+        feedbackStore: feedbackStore
+      }));
   });
 
   afterEach(function() {

browser/components/loop/test/shared/index.html

@@ -22,7 +22,7 @@
   </script>
 
   <!-- libs -->
-  <script src="../../content/shared/libs/react-0.11.2.js"></script>
+  <script src="../../content/shared/libs/react-0.12.2.js"></script>
   <script src="../../content/shared/libs/jquery-2.1.0.js"></script>
   <script src="../../content/shared/libs/lodash-2.4.1.js"></script>
   <script src="../../content/shared/libs/backbone-1.1.2.js"></script>

browser/components/loop/test/shared/mixins_test.js

@@ -31,7 +31,7 @@ describe("loop.shared.mixins", function() {
           return React.DOM.div();
         }
       });
-      return new TestComp();
+      return new React.createElement(TestComp);
     }
 
     it("should watch for hashchange event", function() {
@@ -83,7 +83,7 @@ describe("loop.shared.mixins", function() {
     });
 
     it("should call window.location.reload", function() {
-      var comp = TestUtils.renderIntoDocument(TestComp());
+      var comp = TestUtils.renderIntoDocument(React.createElement(TestComp));
 
       comp.locationReload();
 
@@ -109,7 +109,7 @@ describe("loop.shared.mixins", function() {
     });
 
     it("should set window.document.title", function() {
-      var comp = TestUtils.renderIntoDocument(TestComp());
+      var comp = TestUtils.renderIntoDocument(React.createElement(TestComp));
 
       comp.setTitle("It's a Fake!");
 
@@ -136,7 +136,7 @@ describe("loop.shared.mixins", function() {
     });
 
     it("should call window.close", function() {
-      var comp = TestUtils.renderIntoDocument(TestComp());
+      var comp = TestUtils.renderIntoDocument(React.createElement(TestComp));
 
       comp.closeWindow();
 
@@ -181,7 +181,7 @@ describe("loop.shared.mixins", function() {
       function() {
         setupFakeVisibilityEventDispatcher({target: {hidden: false}});
 
-        comp = TestUtils.renderIntoDocument(TestComp());
+        comp = TestUtils.renderIntoDocument(React.createElement(TestComp));
 
         sinon.assert.calledOnce(onDocumentVisibleStub);
       });
@@ -190,7 +190,7 @@ describe("loop.shared.mixins", function() {
       function() {
         setupFakeVisibilityEventDispatcher({target: {hidden: true}});
 
-        comp = TestUtils.renderIntoDocument(TestComp());
+        comp = TestUtils.renderIntoDocument(React.createElement(TestComp));
 
         sinon.assert.calledOnce(onDocumentHiddenStub);
       });
@@ -227,14 +227,14 @@ describe("loop.shared.mixins", function() {
     });
 
     it("should not play a failure sound when doNotDisturb true", function() {
-      view = TestUtils.renderIntoDocument(TestComp());
+      view = TestUtils.renderIntoDocument(React.createElement(TestComp));
       sinon.assert.notCalled(navigator.mozLoop.getAudioBlob);
       sinon.assert.notCalled(fakeAudio.play);
     });
 
     it("should play a failure sound, once", function() {
       navigator.mozLoop.doNotDisturb = false;
-      view = TestUtils.renderIntoDocument(TestComp());
+      view = TestUtils.renderIntoDocument(React.createElement(TestComp));
       sinon.assert.calledOnce(navigator.mozLoop.getAudioBlob);
       sinon.assert.calledWithExactly(navigator.mozLoop.getAudioBlob,
                                      "failure", sinon.match.func);
@@ -258,7 +258,8 @@ describe("loop.shared.mixins", function() {
         }
       });
 
-      var renderedComp = TestUtils.renderIntoDocument(TestComp());
+      var renderedComp = TestUtils.renderIntoDocument(
+        React.createElement(TestComp));
       sandbox.stub(renderedComp, "play");
       return renderedComp;
     }

browser/components/loop/test/shared/views_test.js

@@ -44,45 +44,49 @@ describe("loop.shared.views", function() {
 
   describe("MediaControlButton", function() {
     it("should render an enabled local audio button", function() {
-      var comp = TestUtils.renderIntoDocument(sharedViews.MediaControlButton({
-        scope: "local",
-        type: "audio",
-        action: function(){},
-        enabled: true
-      }));
+      var comp = TestUtils.renderIntoDocument(
+        React.createElement(sharedViews.MediaControlButton, {
+          scope: "local",
+          type: "audio",
+          action: function(){},
+          enabled: true
+        }));
 
       expect(comp.getDOMNode().classList.contains("muted")).eql(false);
     });
 
     it("should render a muted local audio button", function() {
-      var comp = TestUtils.renderIntoDocument(sharedViews.MediaControlButton({
-        scope: "local",
-        type: "audio",
-        action: function(){},
-        enabled: false
-      }));
+      var comp = TestUtils.renderIntoDocument(
+          React.createElement(sharedViews.MediaControlButton, {
+          scope: "local",
+          type: "audio",
+          action: function(){},
+          enabled: false
+        }));
 
       expect(comp.getDOMNode().classList.contains("muted")).eql(true);
     });
 
     it("should render an enabled local video button", function() {
-      var comp = TestUtils.renderIntoDocument(sharedViews.MediaControlButton({
-        scope: "local",
-        type: "video",
-        action: function(){},
-        enabled: true
-      }));
+      var comp = TestUtils.renderIntoDocument(
+          React.createElement(sharedViews.MediaControlButton, {
+          scope: "local",
+          type: "video",
+          action: function(){},
+          enabled: true
+        }));
 
       expect(comp.getDOMNode().classList.contains("muted")).eql(false);
     });
 
     it("should render a muted local video button", function() {
-      var comp = TestUtils.renderIntoDocument(sharedViews.MediaControlButton({
-        scope: "local",
-        type: "video",
-        action: function(){},
-        enabled: false
-      }));
+      var comp = TestUtils.renderIntoDocument(
+        React.createElement(sharedViews.MediaControlButton, {
+          scope: "local",
+          type: "video",
+          action: function(){},
+          enabled: false
+        }));
 
       expect(comp.getDOMNode().classList.contains("muted")).eql(true);
     });
@@ -93,7 +97,7 @@ describe("loop.shared.views", function() {
 
     function mountTestComponent(props) {
       return TestUtils.renderIntoDocument(
-        sharedViews.ConversationToolbar(props));
+        React.createElement(sharedViews.ConversationToolbar, props));
     }
 
     beforeEach(function() {
@@ -198,7 +202,8 @@ describe("loop.shared.views", function() {
     var fakeSDK, fakeSessionData, fakeSession, fakePublisher, model, fakeAudio;
 
     function mountTestComponent(props) {
-      return TestUtils.renderIntoDocument(sharedViews.ConversationView(props));
+      return TestUtils.renderIntoDocument(
+        React.createElement(sharedViews.ConversationView, props));
     }
 
     beforeEach(function() {
@@ -530,7 +535,8 @@ describe("loop.shared.views", function() {
     var coll, view, testNotif;
 
     function mountTestComponent(props) {
-      return TestUtils.renderIntoDocument(sharedViews.NotificationListView(props));
+      return TestUtils.renderIntoDocument(
+        React.createElement(sharedViews.NotificationListView, props));
     }
 
     beforeEach(function() {

browser/components/loop/test/standalone/index.html

@@ -23,7 +23,7 @@
   </script>
 
   <!-- libs -->
-  <script src="../../content/shared/libs/react-0.11.2.js"></script>
+  <script src="../../content/shared/libs/react-0.12.2.js"></script>
   <script src="../../content/shared/libs/jquery-2.1.0.js"></script>
   <script src="../../content/shared/libs/lodash-2.4.1.js"></script>
   <script src="../../content/shared/libs/backbone-1.1.2.js"></script>

browser/components/loop/test/standalone/standaloneRoomViews_test.js

@@ -40,12 +40,13 @@ describe("loop.standaloneRoomViews", function() {
   describe("StandaloneRoomView", function() {
     function mountTestComponent() {
       return TestUtils.renderIntoDocument(
-        loop.standaloneRoomViews.StandaloneRoomView({
-          dispatcher: dispatcher,
-          activeRoomStore: activeRoomStore,
-          feedbackStore: feedbackStore,
-          helper: new loop.shared.utils.Helper()
-        }));
+        React.createElement(
+          loop.standaloneRoomViews.StandaloneRoomView, {
+            dispatcher: dispatcher,
+            activeRoomStore: activeRoomStore,
+            feedbackStore: feedbackStore,
+            helper: new loop.shared.utils.Helper()
+          }));
     }
 
     function expectActionDispatched(view) {

browser/components/loop/test/standalone/webapp_test.js

@@ -53,7 +53,7 @@ describe("loop.webapp", function() {
 
   describe("#init", function() {
     beforeEach(function() {
-      sandbox.stub(React, "renderComponent");
+      sandbox.stub(React, "render");
       loop.config.feedbackApiUrl = "http://fake.invalid";
       sandbox.stub(loop.Dispatcher.prototype, "dispatch");
     });
@@ -61,10 +61,10 @@ describe("loop.webapp", function() {
     it("should create the WebappRootView", function() {
       loop.webapp.init();
 
-      sinon.assert.calledOnce(React.renderComponent);
-      sinon.assert.calledWith(React.renderComponent,
+      sinon.assert.calledOnce(React.render);
+      sinon.assert.calledWith(React.render,
         sinon.match(function(value) {
-          return TestUtils.isDescriptorOfType(value,
+          return TestUtils.isCompositeComponentElement(value,
             loop.webapp.WebappRootView);
       }));
     });
@@ -106,7 +106,8 @@ describe("loop.webapp", function() {
 
     function mountTestComponent(props) {
       return TestUtils.renderIntoDocument(
-        loop.webapp.OutgoingConversationView(props));
+        React.createElement(
+          loop.webapp.OutgoingConversationView, props));
     }
 
     beforeEach(function() {
@@ -620,11 +621,12 @@ describe("loop.webapp", function() {
 
         sandbox.stub(client, "requestCallUrlInfo");
         view = React.addons.TestUtils.renderIntoDocument(
-          loop.webapp.FailedConversationView({
-            conversation: conversation,
-            client: client,
-            notifications: notifications
-          }));
+          React.createElement(
+            loop.webapp.FailedConversationView, {
+              conversation: conversation,
+              client: client,
+              notifications: notifications
+            }));
       });
 
       it("should play a failure sound, once", function() {
@@ -645,16 +647,17 @@ describe("loop.webapp", function() {
 
     function mountTestComponent() {
       return TestUtils.renderIntoDocument(
-        loop.webapp.WebappRootView({
-          client: client,
-          helper: helper,
-          notifications: notifications,
-          sdk: sdk,
-          conversation: conversationModel,
-          standaloneAppStore: standaloneAppStore,
-          activeRoomStore: activeRoomStore,
-          feedbackStore: feedbackStore
-        }));
+        React.createElement(
+          loop.webapp.WebappRootView, {
+            client: client,
+            helper: helper,
+            notifications: notifications,
+            sdk: sdk,
+            conversation: conversationModel,
+            standaloneAppStore: standaloneAppStore,
+            activeRoomStore: activeRoomStore,
+            feedbackStore: feedbackStore
+          }));
     }
 
     beforeEach(function() {
@@ -739,7 +742,8 @@ describe("loop.webapp", function() {
       standaloneMedia.setSingleton(multiplexGum);
       sandbox.stub(standaloneMedia._MultiplexGum.prototype, "reset");
 
-      TestUtils.renderIntoDocument(loop.webapp.HomeView());
+      TestUtils.renderIntoDocument(
+        React.createElement(loop.webapp.HomeView));
 
       sinon.assert.calledOnce(multiplexGum.reset);
       sinon.assert.calledWithExactly(multiplexGum.reset);
@@ -766,9 +770,10 @@ describe("loop.webapp", function() {
       sandbox.stub(window, "XMLHttpRequest").returns(fakeAudioXHR);
 
       view = React.addons.TestUtils.renderIntoDocument(
-        loop.webapp.WaitingConversationView({
-          websocket: websocket
-        })
+        React.createElement(
+          loop.webapp.WaitingConversationView, {
+            websocket: websocket
+          })
       );
     });
 
@@ -849,12 +854,12 @@ describe("loop.webapp", function() {
         };
 
         view = React.addons.TestUtils.renderIntoDocument(
-            loop.webapp.StartConversationView({
+          React.createElement(
+            loop.webapp.StartConversationView, {
               conversation: conversation,
               notifications: notifications,
               client: standaloneClientStub
-            })
-        );
+            }));
       });
 
       it("should start the audio-video conversation establishment process",
@@ -945,12 +950,12 @@ describe("loop.webapp", function() {
         requestCallUrlInfo = sandbox.stub();
 
         view = React.addons.TestUtils.renderIntoDocument(
-            loop.webapp.StartConversationView({
-              conversation: conversation,
-              notifications: notifications,
-              client: {requestCallUrlInfo: requestCallUrlInfo}
-            })
-          );
+            React.createElement(
+              loop.webapp.StartConversationView, {
+                conversation: conversation,
+                notifications: notifications,
+                client: {requestCallUrlInfo: requestCallUrlInfo}
+              }));
 
         loop.config.marketplaceUrl = "http://market/";
       });
@@ -1030,12 +1035,12 @@ describe("loop.webapp", function() {
         var tos;
 
         view = React.addons.TestUtils.renderIntoDocument(
-          loop.webapp.StartConversationView({
-            conversation: conversation,
-            notifications: notifications,
-            client: {requestCallUrlInfo: requestCallUrlInfo}
-          })
-        );
+          React.createElement(
+            loop.webapp.StartConversationView, {
+              conversation: conversation,
+              notifications: notifications,
+              client: {requestCallUrlInfo: requestCallUrlInfo}
+            }));
         tos = view.getDOMNode().querySelector(".terms-service");
 
         expect(tos.classList.contains("hide")).to.equal(false);
@@ -1046,12 +1051,12 @@ describe("loop.webapp", function() {
 
         localStorage.setItem("has-seen-tos", "true");
         view = React.addons.TestUtils.renderIntoDocument(
-          loop.webapp.StartConversationView({
-            conversation: conversation,
-            notifications: notifications,
-            client: {requestCallUrlInfo: requestCallUrlInfo}
-          })
-        );
+          React.createElement(
+            loop.webapp.StartConversationView, {
+              conversation: conversation,
+              notifications: notifications,
+              client: {requestCallUrlInfo: requestCallUrlInfo}
+            }));
         tos = view.getDOMNode().querySelector(".terms-service");
 
         expect(tos.classList.contains("hide")).to.equal(true);
@@ -1075,13 +1080,13 @@ describe("loop.webapp", function() {
       });
       sandbox.stub(window, "XMLHttpRequest").returns(fakeAudioXHR);
       view = React.addons.TestUtils.renderIntoDocument(
-        loop.webapp.EndedConversationView({
-          conversation: conversation,
-          sdk: {},
-          feedbackStore: feedbackStore,
-          onAfterFeedbackReceived: function(){}
-        })
-      );
+        React.createElement(
+          loop.webapp.EndedConversationView, {
+            conversation: conversation,
+            sdk: {},
+            feedbackStore: feedbackStore,
+            onAfterFeedbackReceived: function(){}
+          }));
     });
 
     it("should render a ConversationView", function() {
@@ -1096,17 +1101,20 @@ describe("loop.webapp", function() {
   describe("PromoteFirefoxView", function() {
     describe("#render", function() {
       it("should not render when using Firefox", function() {
-        var comp = TestUtils.renderIntoDocument(loop.webapp.PromoteFirefoxView({
-          helper: {isFirefox: function() { return true; }}
-        }));
+        var comp = TestUtils.renderIntoDocument(
+          React.createElement(loop.webapp.PromoteFirefoxView, {
+            helper: {isFirefox: function() { return true; }}
+          }));
 
         expect(comp.getDOMNode().querySelectorAll("h3").length).eql(0);
       });
 
       it("should render when not using Firefox", function() {
-        var comp = TestUtils.renderIntoDocument(loop.webapp.PromoteFirefoxView({
-          helper: {isFirefox: function() { return false; }}
-        }));
+        var comp = TestUtils.renderIntoDocument(
+          React.createElement(
+            loop.webapp.PromoteFirefoxView, {
+              helper: {isFirefox: function() { return false; }}
+            }));
 
         expect(comp.getDOMNode().querySelectorAll("h3").length).eql(1);
       });
@@ -1144,12 +1152,12 @@ describe("loop.webapp", function() {
         };
 
         view = React.addons.TestUtils.renderIntoDocument(
-            loop.webapp.StartConversationView({
+          React.createElement(
+            loop.webapp.StartConversationView, {
               conversation: conversation,
               notifications: notifications,
               client: standaloneClientStub
-            })
-        );
+            }));
 
         // default to succeeding with a null local media object
         stubGetPermsAndCacheMedia.callsArgWith(1, {});
@@ -1292,12 +1300,12 @@ describe("loop.webapp", function() {
 
         before(function() {
           view = React.addons.TestUtils.renderIntoDocument(
-            loop.webapp.StartConversationView({
-              conversation: model,
-              notifications: notifications,
-              client: {requestCallUrlInfo: sandbox.stub()}
-            })
-          );
+            React.createElement(
+              loop.webapp.StartConversationView, {
+                conversation: model,
+                notifications: notifications,
+                client: {requestCallUrlInfo: sandbox.stub()}
+              }));
         });
 
         beforeEach(function() {

browser/components/loop/ui/index.html

@@ -28,7 +28,7 @@
     </script>
     <script src="../content/js/multiplexGum.js"></script>
     <script src="../content/shared/libs/sdk.js"></script>
-    <script src="../content/shared/libs/react-0.11.2.js"></script>
+    <script src="../content/shared/libs/react-0.12.2.js"></script>
     <script src="../content/shared/libs/jquery-2.1.0.js"></script>
     <script src="../content/shared/libs/lodash-2.4.1.js"></script>
     <script src="../content/shared/libs/backbone-1.1.2.js"></script>

browser/components/loop/ui/ui-showcase.js

@@ -117,17 +117,17 @@
     detailsButtonLabel: "Retry",
   });
 
-  var SVGIcon = React.createClass({displayName: 'SVGIcon',
+  var SVGIcon = React.createClass({displayName: "SVGIcon",
     render: function() {
       return (
-        React.DOM.span({className: "svg-icon", style: {
+        React.createElement("span", {className: "svg-icon", style: {
           "background-image": "url(/content/shared/img/icons-16x16.svg#" + this.props.shapeId + ")"
         }})
       );
     }
   });
 
-  var SVGIcons = React.createClass({displayName: 'SVGIcons',
+  var SVGIcons = React.createClass({displayName: "SVGIcons",
     shapes: [
       "audio", "audio-hover", "audio-active", "block",
       "block-red", "block-hover", "block-active", "contacts", "contacts-hover",
@@ -140,11 +140,11 @@
 
     render: function() {
       return (
-        React.DOM.div({className: "svg-icon-list"}, 
+        React.createElement("div", {className: "svg-icon-list"}, 
           this.shapes.map(function(shapeId, i) {
-            return React.DOM.div({key: i, className: "svg-icon-entry"}, 
-              React.DOM.p(null, SVGIcon({shapeId: shapeId})), 
-              React.DOM.p(null, shapeId)
+            return React.createElement("div", {key: i, className: "svg-icon-entry"}, 
+              React.createElement("p", null, React.createElement(SVGIcon, {shapeId: shapeId})), 
+              React.createElement("p", null, shapeId)
             );
           }, this)
         )
@@ -152,7 +152,7 @@
     }
   });
 
-  var Example = React.createClass({displayName: 'Example',
+  var Example = React.createClass({displayName: "Example",
     makeId: function(prefix) {
       return (prefix || "") + this.props.summary.toLowerCase().replace(/\s/g, "-");
     },
@@ -160,12 +160,12 @@
     render: function() {
       var cx = React.addons.classSet;
       return (
-        React.DOM.div({className: "example"}, 
-          React.DOM.h3({id: this.makeId()}, 
+        React.createElement("div", {className: "example"}, 
+          React.createElement("h3", {id: this.makeId()}, 
             this.props.summary, 
-            React.DOM.a({href: this.makeId("#")}, " ¶")
+            React.createElement("a", {href: this.makeId("#")}, " ¶")
           ), 
-          React.DOM.div({className: cx({comp: true, dashed: this.props.dashed}), 
+          React.createElement("div", {className: cx({comp: true, dashed: this.props.dashed}), 
                style: this.props.style || {}}, 
             this.props.children
           )
@@ -174,27 +174,27 @@
     }
   });
 
-  var Section = React.createClass({displayName: 'Section',
+  var Section = React.createClass({displayName: "Section",
     render: function() {
       return (
-        React.DOM.section({id: this.props.name}, 
-          React.DOM.h1(null, this.props.name), 
+        React.createElement("section", {id: this.props.name}, 
+          React.createElement("h1", null, this.props.name), 
           this.props.children
         )
       );
     }
   });
 
-  var ShowCase = React.createClass({displayName: 'ShowCase',
+  var ShowCase = React.createClass({displayName: "ShowCase",
     render: function() {
       return (
-        React.DOM.div({className: "showcase"}, 
-          React.DOM.header(null, 
-            React.DOM.h1(null, "Loop UI Components Showcase"), 
-            React.DOM.nav({className: "showcase-menu"}, 
+        React.createElement("div", {className: "showcase"}, 
+          React.createElement("header", null, 
+            React.createElement("h1", null, "Loop UI Components Showcase"), 
+            React.createElement("nav", {className: "showcase-menu"}, 
               React.Children.map(this.props.children, function(section) {
                 return (
-                  React.DOM.a({className: "btn btn-info", href: "#" + section.props.name}, 
+                  React.createElement("a", {className: "btn btn-info", href: "#" + section.props.name}, 
                     section.props.name
                   )
                 );
@@ -207,57 +207,57 @@
     }
   });
 
-  var App = React.createClass({displayName: 'App',
+  var App = React.createClass({displayName: "App",
     render: function() {
       return (
-        ShowCase(null, 
-          Section({name: "PanelView"}, 
-            React.DOM.p({className: "note"}, 
-              React.DOM.strong(null, "Note:"), " 332px wide."
+        React.createElement(ShowCase, null, 
+          React.createElement(Section, {name: "PanelView"}, 
+            React.createElement("p", {className: "note"}, 
+              React.createElement("strong", null, "Note:"), " 332px wide."
             ), 
-            Example({summary: "Call URL retrieved", dashed: "true", style: {width: "332px"}}, 
-              PanelView({client: mockClient, notifications: notifications, 
+            React.createElement(Example, {summary: "Call URL retrieved", dashed: "true", style: {width: "332px"}}, 
+              React.createElement(PanelView, {client: mockClient, notifications: notifications, 
                          callUrl: "http://invalid.example.url/", 
                          mozLoop: navigator.mozLoop, 
                          dispatcher: dispatcher, 
                          roomStore: roomStore})
             ), 
-            Example({summary: "Call URL retrieved - authenticated", dashed: "true", style: {width: "332px"}}, 
-              PanelView({client: mockClient, notifications: notifications, 
+            React.createElement(Example, {summary: "Call URL retrieved - authenticated", dashed: "true", style: {width: "332px"}}, 
+              React.createElement(PanelView, {client: mockClient, notifications: notifications, 
                          callUrl: "http://invalid.example.url/", 
                          userProfile: {email: "test@example.com"}, 
                          mozLoop: navigator.mozLoop, 
                          dispatcher: dispatcher, 
                          roomStore: roomStore})
             ), 
-            Example({summary: "Pending call url retrieval", dashed: "true", style: {width: "332px"}}, 
-              PanelView({client: mockClient, notifications: notifications, 
+            React.createElement(Example, {summary: "Pending call url retrieval", dashed: "true", style: {width: "332px"}}, 
+              React.createElement(PanelView, {client: mockClient, notifications: notifications, 
                          mozLoop: navigator.mozLoop, 
                          dispatcher: dispatcher, 
                          roomStore: roomStore})
             ), 
-            Example({summary: "Pending call url retrieval - authenticated", dashed: "true", style: {width: "332px"}}, 
-              PanelView({client: mockClient, notifications: notifications, 
+            React.createElement(Example, {summary: "Pending call url retrieval - authenticated", dashed: "true", style: {width: "332px"}}, 
+              React.createElement(PanelView, {client: mockClient, notifications: notifications, 
                          userProfile: {email: "test@example.com"}, 
                          mozLoop: navigator.mozLoop, 
                          dispatcher: dispatcher, 
                          roomStore: roomStore})
             ), 
-            Example({summary: "Error Notification", dashed: "true", style: {width: "332px"}}, 
-              PanelView({client: mockClient, notifications: errNotifications, 
+            React.createElement(Example, {summary: "Error Notification", dashed: "true", style: {width: "332px"}}, 
+              React.createElement(PanelView, {client: mockClient, notifications: errNotifications, 
                          mozLoop: navigator.mozLoop, 
                          dispatcher: dispatcher, 
                          roomStore: roomStore})
             ), 
-            Example({summary: "Error Notification - authenticated", dashed: "true", style: {width: "332px"}}, 
-              PanelView({client: mockClient, notifications: errNotifications, 
+            React.createElement(Example, {summary: "Error Notification - authenticated", dashed: "true", style: {width: "332px"}}, 
+              React.createElement(PanelView, {client: mockClient, notifications: errNotifications, 
                          userProfile: {email: "test@example.com"}, 
                          mozLoop: navigator.mozLoop, 
                          dispatcher: dispatcher, 
                          roomStore: roomStore})
             ), 
-            Example({summary: "Room list tab", dashed: "true", style: {width: "332px"}}, 
-              PanelView({client: mockClient, notifications: notifications, 
+            React.createElement(Example, {summary: "Room list tab", dashed: "true", style: {width: "332px"}}, 
+              React.createElement(PanelView, {client: mockClient, notifications: notifications, 
                          userProfile: {email: "test@example.com"}, 
                          mozLoop: mockMozLoopRooms, 
                          dispatcher: dispatcher, 
@@ -266,70 +266,70 @@
             )
           ), 
 
-          Section({name: "IncomingCallView"}, 
-            Example({summary: "Default / incoming video call", dashed: "true", style: {width: "260px", height: "254px"}}, 
-              React.DOM.div({className: "fx-embedded"}, 
-                IncomingCallView({model: mockConversationModel, 
+          React.createElement(Section, {name: "IncomingCallView"}, 
+            React.createElement(Example, {summary: "Default / incoming video call", dashed: "true", style: {width: "260px", height: "254px"}}, 
+              React.createElement("div", {className: "fx-embedded"}, 
+                React.createElement(IncomingCallView, {model: mockConversationModel, 
                                   video: true})
               )
             ), 
 
-            Example({summary: "Default / incoming audio only call", dashed: "true", style: {width: "260px", height: "254px"}}, 
-              React.DOM.div({className: "fx-embedded"}, 
-                IncomingCallView({model: mockConversationModel, 
+            React.createElement(Example, {summary: "Default / incoming audio only call", dashed: "true", style: {width: "260px", height: "254px"}}, 
+              React.createElement("div", {className: "fx-embedded"}, 
+                React.createElement(IncomingCallView, {model: mockConversationModel, 
                                   video: false})
               )
             )
           ), 
 
-          Section({name: "IncomingCallView-ActiveState"}, 
-            Example({summary: "Default", dashed: "true", style: {width: "260px", height: "254px"}}, 
-              React.DOM.div({className: "fx-embedded"}, 
-                IncomingCallView({model: mockConversationModel, 
+          React.createElement(Section, {name: "IncomingCallView-ActiveState"}, 
+            React.createElement(Example, {summary: "Default", dashed: "true", style: {width: "260px", height: "254px"}}, 
+              React.createElement("div", {className: "fx-embedded"}, 
+                React.createElement(IncomingCallView, {model: mockConversationModel, 
                                    showMenu: true})
               )
             )
           ), 
 
-          Section({name: "ConversationToolbar"}, 
-            React.DOM.h2(null, "Desktop Conversation Window"), 
-            React.DOM.div({className: "fx-embedded override-position"}, 
-              Example({summary: "Default (260x265)", dashed: "true"}, 
-                ConversationToolbar({video: {enabled: true}, 
+          React.createElement(Section, {name: "ConversationToolbar"}, 
+            React.createElement("h2", null, "Desktop Conversation Window"), 
+            React.createElement("div", {className: "fx-embedded override-position"}, 
+              React.createElement(Example, {summary: "Default (260x265)", dashed: "true"}, 
+                React.createElement(ConversationToolbar, {video: {enabled: true}, 
                                      audio: {enabled: true}, 
                                      hangup: noop, 
                                      publishStream: noop})
               ), 
-              Example({summary: "Video muted"}, 
-                ConversationToolbar({video: {enabled: false}, 
+              React.createElement(Example, {summary: "Video muted"}, 
+                React.createElement(ConversationToolbar, {video: {enabled: false}, 
                                      audio: {enabled: true}, 
                                      hangup: noop, 
                                      publishStream: noop})
               ), 
-              Example({summary: "Audio muted"}, 
-                ConversationToolbar({video: {enabled: true}, 
+              React.createElement(Example, {summary: "Audio muted"}, 
+                React.createElement(ConversationToolbar, {video: {enabled: true}, 
                                      audio: {enabled: false}, 
                                      hangup: noop, 
                                      publishStream: noop})
               )
             ), 
 
-            React.DOM.h2(null, "Standalone"), 
-            React.DOM.div({className: "standalone override-position"}, 
-              Example({summary: "Default"}, 
-                ConversationToolbar({video: {enabled: true}, 
+            React.createElement("h2", null, "Standalone"), 
+            React.createElement("div", {className: "standalone override-position"}, 
+              React.createElement(Example, {summary: "Default"}, 
+                React.createElement(ConversationToolbar, {video: {enabled: true}, 
                                      audio: {enabled: true}, 
                                      hangup: noop, 
                                      publishStream: noop})
               ), 
-              Example({summary: "Video muted"}, 
-                ConversationToolbar({video: {enabled: false}, 
+              React.createElement(Example, {summary: "Video muted"}, 
+                React.createElement(ConversationToolbar, {video: {enabled: false}, 
                                      audio: {enabled: true}, 
                                      hangup: noop, 
                                      publishStream: noop})
               ), 
-              Example({summary: "Audio muted"}, 
-                ConversationToolbar({video: {enabled: true}, 
+              React.createElement(Example, {summary: "Audio muted"}, 
+                React.createElement(ConversationToolbar, {video: {enabled: true}, 
                                      audio: {enabled: false}, 
                                      hangup: noop, 
                                      publishStream: noop})
@@ -337,92 +337,92 @@
             )
           ), 
 
-          Section({name: "GumPromptConversationView"}, 
-            Example({summary: "Gum Prompt conversation view", dashed: "true"}, 
-              React.DOM.div({className: "standalone"}, 
-                GumPromptConversationView(null)
+          React.createElement(Section, {name: "GumPromptConversationView"}, 
+            React.createElement(Example, {summary: "Gum Prompt conversation view", dashed: "true"}, 
+              React.createElement("div", {className: "standalone"}, 
+                React.createElement(GumPromptConversationView, null)
               )
             )
           ), 
 
-          Section({name: "WaitingConversationView"}, 
-            Example({summary: "Waiting conversation view (connecting)", dashed: "true"}, 
-              React.DOM.div({className: "standalone"}, 
-                WaitingConversationView({websocket: mockWebSocket, 
+          React.createElement(Section, {name: "WaitingConversationView"}, 
+            React.createElement(Example, {summary: "Waiting conversation view (connecting)", dashed: "true"}, 
+              React.createElement("div", {className: "standalone"}, 
+                React.createElement(WaitingConversationView, {websocket: mockWebSocket, 
                                          dispatcher: dispatcher})
               )
             ), 
-            Example({summary: "Waiting conversation view (ringing)", dashed: "true"}, 
-              React.DOM.div({className: "standalone"}, 
-                WaitingConversationView({websocket: mockWebSocket, 
+            React.createElement(Example, {summary: "Waiting conversation view (ringing)", dashed: "true"}, 
+              React.createElement("div", {className: "standalone"}, 
+                React.createElement(WaitingConversationView, {websocket: mockWebSocket, 
                                          dispatcher: dispatcher, 
                                          callState: "ringing"})
               )
             )
           ), 
 
-          Section({name: "PendingConversationView (Desktop)"}, 
-            Example({summary: "Connecting", dashed: "true", 
+          React.createElement(Section, {name: "PendingConversationView (Desktop)"}, 
+            React.createElement(Example, {summary: "Connecting", dashed: "true", 
                      style: {width: "260px", height: "265px"}}, 
-              React.DOM.div({className: "fx-embedded"}, 
-                DesktopPendingConversationView({callState: "gather", 
+              React.createElement("div", {className: "fx-embedded"}, 
+                React.createElement(DesktopPendingConversationView, {callState: "gather", 
                                                 contact: mockContact, 
                                                 dispatcher: dispatcher})
               )
             )
           ), 
 
-          Section({name: "CallFailedView"}, 
-            Example({summary: "Call Failed", dashed: "true", 
+          React.createElement(Section, {name: "CallFailedView"}, 
+            React.createElement(Example, {summary: "Call Failed", dashed: "true", 
                      style: {width: "260px", height: "265px"}}, 
-              React.DOM.div({className: "fx-embedded"}, 
-                CallFailedView({dispatcher: dispatcher})
+              React.createElement("div", {className: "fx-embedded"}, 
+                React.createElement(CallFailedView, {dispatcher: dispatcher})
               )
             ), 
-            Example({summary: "Call Failed — with call URL error", dashed: "true", 
+            React.createElement(Example, {summary: "Call Failed — with call URL error", dashed: "true", 
                      style: {width: "260px", height: "265px"}}, 
-              React.DOM.div({className: "fx-embedded"}, 
-                CallFailedView({dispatcher: dispatcher, emailLinkError: true})
+              React.createElement("div", {className: "fx-embedded"}, 
+                React.createElement(CallFailedView, {dispatcher: dispatcher, emailLinkError: true})
               )
             )
           ), 
 
-          Section({name: "StartConversationView"}, 
-            Example({summary: "Start conversation view", dashed: "true"}, 
-              React.DOM.div({className: "standalone"}, 
-                StartConversationView({conversation: mockConversationModel, 
+          React.createElement(Section, {name: "StartConversationView"}, 
+            React.createElement(Example, {summary: "Start conversation view", dashed: "true"}, 
+              React.createElement("div", {className: "standalone"}, 
+                React.createElement(StartConversationView, {conversation: mockConversationModel, 
                                        client: mockClient, 
                                        notifications: notifications})
               )
             )
           ), 
 
-          Section({name: "FailedConversationView"}, 
-            Example({summary: "Failed conversation view", dashed: "true"}, 
-              React.DOM.div({className: "standalone"}, 
-                FailedConversationView({conversation: mockConversationModel, 
+          React.createElement(Section, {name: "FailedConversationView"}, 
+            React.createElement(Example, {summary: "Failed conversation view", dashed: "true"}, 
+              React.createElement("div", {className: "standalone"}, 
+                React.createElement(FailedConversationView, {conversation: mockConversationModel, 
                                         client: mockClient, 
                                         notifications: notifications})
               )
             )
           ), 
 
-          Section({name: "ConversationView"}, 
-            Example({summary: "Desktop conversation window", dashed: "true", 
+          React.createElement(Section, {name: "ConversationView"}, 
+            React.createElement(Example, {summary: "Desktop conversation window", dashed: "true", 
                      style: {width: "260px", height: "265px"}}, 
-              React.DOM.div({className: "fx-embedded"}, 
-                ConversationView({sdk: mockSDK, 
+              React.createElement("div", {className: "fx-embedded"}, 
+                React.createElement(ConversationView, {sdk: mockSDK, 
                                   model: mockConversationModel, 
                                   video: {enabled: true}, 
                                   audio: {enabled: true}})
               )
             ), 
 
-            Example({summary: "Desktop conversation window large", dashed: "true"}, 
-              React.DOM.div({className: "breakpoint", 'data-breakpoint-width': "800px", 
-                'data-breakpoint-height': "600px"}, 
-                React.DOM.div({className: "fx-embedded"}, 
-                  ConversationView({sdk: mockSDK, 
+            React.createElement(Example, {summary: "Desktop conversation window large", dashed: "true"}, 
+              React.createElement("div", {className: "breakpoint", "data-breakpoint-width": "800px", 
+                "data-breakpoint-height": "600px"}, 
+                React.createElement("div", {className: "fx-embedded"}, 
+                  React.createElement(ConversationView, {sdk: mockSDK, 
                     video: {enabled: true}, 
                     audio: {enabled: true}, 
                     model: mockConversationModel})
@@ -430,19 +430,19 @@
               )
             ), 
 
-            Example({summary: "Desktop conversation window local audio stream", 
+            React.createElement(Example, {summary: "Desktop conversation window local audio stream", 
                      dashed: "true", style: {width: "260px", height: "265px"}}, 
-              React.DOM.div({className: "fx-embedded"}, 
-                ConversationView({sdk: mockSDK, 
+              React.createElement("div", {className: "fx-embedded"}, 
+                React.createElement(ConversationView, {sdk: mockSDK, 
                                   video: {enabled: false}, 
                                   audio: {enabled: true}, 
                                   model: mockConversationModel})
               )
             ), 
 
-            Example({summary: "Standalone version"}, 
-              React.DOM.div({className: "standalone"}, 
-                ConversationView({sdk: mockSDK, 
+            React.createElement(Example, {summary: "Standalone version"}, 
+              React.createElement("div", {className: "standalone"}, 
+                React.createElement(ConversationView, {sdk: mockSDK, 
                                   video: {enabled: true}, 
                                   audio: {enabled: true}, 
                                   model: mockConversationModel})
@@ -450,14 +450,14 @@
             )
           ), 
 
-          Section({name: "ConversationView-640"}, 
-            Example({summary: "640px breakpoint for conversation view"}, 
-              React.DOM.div({className: "breakpoint", 
+          React.createElement(Section, {name: "ConversationView-640"}, 
+            React.createElement(Example, {summary: "640px breakpoint for conversation view"}, 
+              React.createElement("div", {className: "breakpoint", 
                    style: {"text-align":"center"}, 
-                   'data-breakpoint-width': "400px", 
-                   'data-breakpoint-height': "780px"}, 
-                React.DOM.div({className: "standalone"}, 
-                  ConversationView({sdk: mockSDK, 
+                   "data-breakpoint-width": "400px", 
+                   "data-breakpoint-height": "780px"}, 
+                React.createElement("div", {className: "standalone"}, 
+                  React.createElement(ConversationView, {sdk: mockSDK, 
                                     video: {enabled: true}, 
                                     audio: {enabled: true}, 
                                     model: mockConversationModel})
@@ -466,10 +466,10 @@
             )
           ), 
 
-          Section({name: "ConversationView-LocalAudio"}, 
-            Example({summary: "Local stream is audio only"}, 
-              React.DOM.div({className: "standalone"}, 
-                ConversationView({sdk: mockSDK, 
+          React.createElement(Section, {name: "ConversationView-LocalAudio"}, 
+            React.createElement(Example, {summary: "Local stream is audio only"}, 
+              React.createElement("div", {className: "standalone"}, 
+                React.createElement(ConversationView, {sdk: mockSDK, 
                                   video: {enabled: false}, 
                                   audio: {enabled: true}, 
                                   model: mockConversationModel})
@@ -477,35 +477,35 @@
             )
           ), 
 
-          Section({name: "FeedbackView"}, 
-            React.DOM.p({className: "note"}, 
-              React.DOM.strong(null, "Note:"), " For the useable demo, you can access submitted data at ", 
-              React.DOM.a({href: "https://input.allizom.org/"}, "input.allizom.org"), "."
+          React.createElement(Section, {name: "FeedbackView"}, 
+            React.createElement("p", {className: "note"}, 
+              React.createElement("strong", null, "Note:"), " For the useable demo, you can access submitted data at ", 
+              React.createElement("a", {href: "https://input.allizom.org/"}, "input.allizom.org"), "."
             ), 
-            Example({summary: "Default (useable demo)", dashed: "true", style: {width: "260px"}}, 
-              FeedbackView({feedbackStore: feedbackStore})
+            React.createElement(Example, {summary: "Default (useable demo)", dashed: "true", style: {width: "260px"}}, 
+              React.createElement(FeedbackView, {feedbackStore: feedbackStore})
             ), 
-            Example({summary: "Detailed form", dashed: "true", style: {width: "260px"}}, 
-              FeedbackView({feedbackStore: feedbackStore, feedbackState: FEEDBACK_STATES.DETAILS})
+            React.createElement(Example, {summary: "Detailed form", dashed: "true", style: {width: "260px"}}, 
+              React.createElement(FeedbackView, {feedbackStore: feedbackStore, feedbackState: FEEDBACK_STATES.DETAILS})
             ), 
-            Example({summary: "Thank you!", dashed: "true", style: {width: "260px"}}, 
-              FeedbackView({feedbackStore: feedbackStore, feedbackState: FEEDBACK_STATES.SENT})
+            React.createElement(Example, {summary: "Thank you!", dashed: "true", style: {width: "260px"}}, 
+              React.createElement(FeedbackView, {feedbackStore: feedbackStore, feedbackState: FEEDBACK_STATES.SENT})
             )
           ), 
 
-          Section({name: "CallUrlExpiredView"}, 
-            Example({summary: "Firefox User"}, 
-              CallUrlExpiredView({helper: {isFirefox: returnTrue}})
+          React.createElement(Section, {name: "CallUrlExpiredView"}, 
+            React.createElement(Example, {summary: "Firefox User"}, 
+              React.createElement(CallUrlExpiredView, {helper: {isFirefox: returnTrue}})
             ), 
-            Example({summary: "Non-Firefox User"}, 
-              CallUrlExpiredView({helper: {isFirefox: returnFalse}})
+            React.createElement(Example, {summary: "Non-Firefox User"}, 
+              React.createElement(CallUrlExpiredView, {helper: {isFirefox: returnFalse}})
             )
           ), 
 
-          Section({name: "EndedConversationView"}, 
-            Example({summary: "Displays the feedback form"}, 
-              React.DOM.div({className: "standalone"}, 
-                EndedConversationView({sdk: mockSDK, 
+          React.createElement(Section, {name: "EndedConversationView"}, 
+            React.createElement(Example, {summary: "Displays the feedback form"}, 
+              React.createElement("div", {className: "standalone"}, 
+                React.createElement(EndedConversationView, {sdk: mockSDK, 
                                        video: {enabled: true}, 
                                        audio: {enabled: true}, 
                                        conversation: mockConversationModel, 
@@ -515,64 +515,64 @@
             )
           ), 
 
-          Section({name: "AlertMessages"}, 
-            Example({summary: "Various alerts"}, 
-              React.DOM.div({className: "alert alert-warning"}, 
-                React.DOM.button({className: "close"}), 
-                React.DOM.p({className: "message"}, 
+          React.createElement(Section, {name: "AlertMessages"}, 
+            React.createElement(Example, {summary: "Various alerts"}, 
+              React.createElement("div", {className: "alert alert-warning"}, 
+                React.createElement("button", {className: "close"}), 
+                React.createElement("p", {className: "message"}, 
                   "The person you were calling has ended the conversation."
                 )
               ), 
-              React.DOM.br(null), 
-              React.DOM.div({className: "alert alert-error"}, 
-                React.DOM.button({className: "close"}), 
-                React.DOM.p({className: "message"}, 
+              React.createElement("br", null), 
+              React.createElement("div", {className: "alert alert-error"}, 
+                React.createElement("button", {className: "close"}), 
+                React.createElement("p", {className: "message"}, 
                   "The person you were calling has ended the conversation."
                 )
               )
             )
           ), 
 
-          Section({name: "HomeView"}, 
-            Example({summary: "Standalone Home View"}, 
-              React.DOM.div({className: "standalone"}, 
-                HomeView(null)
+          React.createElement(Section, {name: "HomeView"}, 
+            React.createElement(Example, {summary: "Standalone Home View"}, 
+              React.createElement("div", {className: "standalone"}, 
+                React.createElement(HomeView, null)
               )
             )
           ), 
 
 
-          Section({name: "UnsupportedBrowserView"}, 
-            Example({summary: "Standalone Unsupported Browser"}, 
-              React.DOM.div({className: "standalone"}, 
-                UnsupportedBrowserView({helper: {isFirefox: returnFalse}})
+          React.createElement(Section, {name: "UnsupportedBrowserView"}, 
+            React.createElement(Example, {summary: "Standalone Unsupported Browser"}, 
+              React.createElement("div", {className: "standalone"}, 
+                React.createElement(UnsupportedBrowserView, {helper: {isFirefox: returnFalse}})
               )
             )
           ), 
 
-          Section({name: "UnsupportedDeviceView"}, 
-            Example({summary: "Standalone Unsupported Device"}, 
-              React.DOM.div({className: "standalone"}, 
-                UnsupportedDeviceView(null)
+          React.createElement(Section, {name: "UnsupportedDeviceView"}, 
+            React.createElement(Example, {summary: "Standalone Unsupported Device"}, 
+              React.createElement("div", {className: "standalone"}, 
+                React.createElement(UnsupportedDeviceView, null)
               )
             )
           ), 
 
-          Section({name: "DesktopRoomConversationView"}, 
-            Example({summary: "Desktop room conversation (invitation)", dashed: "true", 
+          React.createElement(Section, {name: "DesktopRoomConversationView"}, 
+            React.createElement(Example, {summary: "Desktop room conversation (invitation)", dashed: "true", 
                      style: {width: "260px", height: "265px"}}, 
-              React.DOM.div({className: "fx-embedded"}, 
-                DesktopRoomConversationView({
+              React.createElement("div", {className: "fx-embedded"}, 
+                React.createElement(DesktopRoomConversationView, {
                   roomStore: roomStore, 
                   dispatcher: dispatcher, 
                   roomState: ROOM_STATES.INIT})
               )
             ), 
 
-            Example({summary: "Desktop room conversation", dashed: "true", 
+            React.createElement(Example, {summary: "Desktop room conversation", dashed: "true", 
                      style: {width: "260px", height: "265px"}}, 
-              React.DOM.div({className: "fx-embedded"}, 
-                DesktopRoomConversationView({
+              React.createElement("div", {className: "fx-embedded"}, 
+                React.createElement(DesktopRoomConversationView, {
                   roomStore: roomStore, 
                   dispatcher: dispatcher, 
                   roomState: ROOM_STATES.HAS_PARTICIPANTS})
@@ -580,10 +580,10 @@
             )
           ), 
 
-          Section({name: "StandaloneRoomView"}, 
-            Example({summary: "Standalone room conversation (ready)"}, 
-              React.DOM.div({className: "standalone"}, 
-                StandaloneRoomView({
+          React.createElement(Section, {name: "StandaloneRoomView"}, 
+            React.createElement(Example, {summary: "Standalone room conversation (ready)"}, 
+              React.createElement("div", {className: "standalone"}, 
+                React.createElement(StandaloneRoomView, {
                   dispatcher: dispatcher, 
                   activeRoomStore: activeRoomStore, 
                   roomState: ROOM_STATES.READY, 
@@ -591,9 +591,9 @@
               )
             ), 
 
-            Example({summary: "Standalone room conversation (joined)"}, 
-              React.DOM.div({className: "standalone"}, 
-                StandaloneRoomView({
+            React.createElement(Example, {summary: "Standalone room conversation (joined)"}, 
+              React.createElement("div", {className: "standalone"}, 
+                React.createElement(StandaloneRoomView, {
                   dispatcher: dispatcher, 
                   activeRoomStore: activeRoomStore, 
                   roomState: ROOM_STATES.JOINED, 
@@ -601,9 +601,9 @@
               )
             ), 
 
-            Example({summary: "Standalone room conversation (has-participants)"}, 
-              React.DOM.div({className: "standalone"}, 
-                StandaloneRoomView({
+            React.createElement(Example, {summary: "Standalone room conversation (has-participants)"}, 
+              React.createElement("div", {className: "standalone"}, 
+                React.createElement(StandaloneRoomView, {
                   dispatcher: dispatcher, 
                   activeRoomStore: activeRoomStore, 
                   roomState: ROOM_STATES.HAS_PARTICIPANTS, 
@@ -611,9 +611,9 @@
               )
             ), 
 
-            Example({summary: "Standalone room conversation (full - FFx user)"}, 
-              React.DOM.div({className: "standalone"}, 
-                StandaloneRoomView({
+            React.createElement(Example, {summary: "Standalone room conversation (full - FFx user)"}, 
+              React.createElement("div", {className: "standalone"}, 
+                React.createElement(StandaloneRoomView, {
                   dispatcher: dispatcher, 
                   activeRoomStore: activeRoomStore, 
                   roomState: ROOM_STATES.FULL, 
@@ -621,9 +621,9 @@
               )
             ), 
 
-            Example({summary: "Standalone room conversation (full - non FFx user)"}, 
-              React.DOM.div({className: "standalone"}, 
-                StandaloneRoomView({
+            React.createElement(Example, {summary: "Standalone room conversation (full - non FFx user)"}, 
+              React.createElement("div", {className: "standalone"}, 
+                React.createElement(StandaloneRoomView, {
                   dispatcher: dispatcher, 
                   activeRoomStore: activeRoomStore, 
                   roomState: ROOM_STATES.FULL, 
@@ -631,9 +631,9 @@
               )
             ), 
 
-            Example({summary: "Standalone room conversation (feedback)"}, 
-              React.DOM.div({className: "standalone"}, 
-                StandaloneRoomView({
+            React.createElement(Example, {summary: "Standalone room conversation (feedback)"}, 
+              React.createElement("div", {className: "standalone"}, 
+                React.createElement(StandaloneRoomView, {
                   dispatcher: dispatcher, 
                   activeRoomStore: activeRoomStore, 
                   feedbackStore: feedbackStore, 
@@ -642,9 +642,9 @@
               )
             ), 
 
-            Example({summary: "Standalone room conversation (failed)"}, 
-              React.DOM.div({className: "standalone"}, 
-                StandaloneRoomView({
+            React.createElement(Example, {summary: "Standalone room conversation (failed)"}, 
+              React.createElement("div", {className: "standalone"}, 
+                React.createElement(StandaloneRoomView, {
                   dispatcher: dispatcher, 
                   activeRoomStore: activeRoomStore, 
                   roomState: ROOM_STATES.FAILED, 
@@ -653,9 +653,9 @@
             )
           ), 
 
-          Section({name: "SVG icons preview"}, 
-            Example({summary: "16x16"}, 
-              SVGIcons(null)
+          React.createElement(Section, {name: "SVG icons preview"}, 
+            React.createElement(Example, {summary: "16x16"}, 
+              React.createElement(SVGIcons, null)
             )
           )
 
@@ -705,7 +705,7 @@
 
   window.addEventListener("DOMContentLoaded", function() {
     try {
-      React.renderComponent(App(null), document.body);
+      React.render(React.createElement(App, null), document.body);
     } catch(err) {
       console.log(err);
     }

browser/components/loop/ui/ui-showcase.jsx

@@ -705,7 +705,7 @@
 
   window.addEventListener("DOMContentLoaded", function() {
     try {
-      React.renderComponent(<App />, document.body);
+      React.render(<App />, document.body);
     } catch(err) {
       console.log(err);
     }