Use ReactID.ATTR_NAME as the React-specific ID attribute name.

Another step in the plan towards making `ReactID.ATTR_NAME` the central
source of truth regarding the React-specific ID attribute name.

src/core/ReactID.js

@@ -120,6 +120,7 @@ function purgeEntireCache() {
   nodeCache = {};
 }
 
+exports.ATTR_NAME = ATTR_NAME;
 exports.getID = getID;
 exports.setID = setID;
 exports.getNode = getNode;

src/core/ReactMount.js

@@ -55,6 +55,7 @@ function getReactRootID(container) {
  *
  *   ReactMount.renderComponent(component, $('container'));
  *
+ *   TODO Update this comment when ReactID.ATTR_NAME changes.
  *   <div id="container">         <-- Supplied `container`.
  *     <div id=".reactRoot[3]">   <-- Rendered reactRoot of React component.
  *       // ...

src/core/ReactNativeComponent.js

@@ -24,6 +24,7 @@ var DOMPropertyOperations = require('DOMPropertyOperations');
 var ReactComponent = require('ReactComponent');
 var ReactEventEmitter = require('ReactEventEmitter');
 var ReactMultiChild = require('ReactMultiChild');
+var ReactID = require('ReactID');
 
 var escapeTextForBrowser = require('escapeTextForBrowser');
 var flattenChildren = require('flattenChildren');
@@ -138,7 +139,7 @@ ReactNativeComponent.Mixin = {
       }
     }
 
-    return ret + ' id="' + this._rootNodeID + '">';
+    return ret + ' ' + ReactID.ATTR_NAME + '="' + this._rootNodeID + '">';
   },
 
   /**

src/core/ReactTextComponent.js

@@ -20,6 +20,7 @@
 "use strict";
 
 var ReactComponent = require('ReactComponent');
+var ReactID = require('ReactID');
 
 var escapeTextForBrowser = require('escapeTextForBrowser');
 var mixInto = require('mixInto');
@@ -57,7 +58,7 @@ mixInto(ReactTextComponent, {
   mountComponent: function(rootID) {
     ReactComponent.Mixin.mountComponent.call(this, rootID);
     return (
-      '<span id="' + rootID + '">' +
+      '<span ' + ReactID.ATTR_NAME + '="' + rootID + '">' +
         escapeTextForBrowser(this.props.text) +
       '</span>'
     );

src/environment/__tests__/ReactServerRendering-test.js

@@ -24,10 +24,12 @@
 require('mock-modules')
   .dontMock('ExecutionEnvironment')
   .dontMock('React')
+  .dontMock('ReactID')
   .dontMock('ReactServerRendering')
   .dontMock('ReactTestUtils');
 
 var React;
+var ReactID;
 var ReactTestUtils;
 var ReactServerRendering;
 var ExecutionEnvironment;
@@ -36,6 +38,7 @@ describe('ReactServerRendering', function() {
   beforeEach(function() {
     require('mock-modules').dumpCache();
     React = require('React');
+    ReactID = require('ReactID');
     ReactTestUtils = require('ReactTestUtils');
     ExecutionEnvironment = require('ExecutionEnvironment');
     ExecutionEnvironment.canUseDOM = false;
@@ -51,7 +54,7 @@ describe('ReactServerRendering', function() {
       }
     );
     expect(response).toMatch(
-      '<span  id="[^"]+">hello world</span>'
+      '<span  ' + ReactID.ATTR_NAME + '="[^"]+">hello world</span>'
     );
   });
 
@@ -74,8 +77,12 @@ describe('ReactServerRendering', function() {
       }
     );
     expect(response).toMatch(
-      '<div  id="[^"]+"><span  id="[^"]+"><span id="[^"]+">My name is </span>' +
-        '<span id="[^"]+">child</span></span></div>'
+      '<div  ' + ReactID.ATTR_NAME + '="[^"]+">' +
+        '<span  ' + ReactID.ATTR_NAME + '="[^"]+">' +
+          '<span ' + ReactID.ATTR_NAME + '="[^"]+">My name is </span>' +
+          '<span ' + ReactID.ATTR_NAME + '="[^"]+">child</span>' +
+        '</span>' +
+      '</div>'
     );
   });
 
@@ -123,8 +130,10 @@ describe('ReactServerRendering', function() {
     );
 
     expect(response).toMatch(
-      '<span  id="[^"]+"><span id="[^"]+">Component name: </span>' +
-        '<span id="[^"]+">TestComponent</span></span>'
+      '<span  ' + ReactID.ATTR_NAME + '="[^"]+">' +
+        '<span ' + ReactID.ATTR_NAME + '="[^"]+">Component name: </span>' +
+        '<span ' + ReactID.ATTR_NAME + '="[^"]+">TestComponent</span>' +
+      '</span>'
     );
     expect(lifecycle).toEqual(
       ['getInitialState', 'componentWillMount', 'render']