React.renderComponent -> React.render

zpao · zpao · commit f53854bd9321 · 2014-10-23T20:51:11.000-07:00
This covers most everything. The perf suite still needs work for the
Element updates. And the server rendering example needs to be done
wholesale.
diff --git a/README.md b/README.md
@@ -19,7 +19,7 @@ var HelloMessage = React.createClass({
   }
 });
 
-React.renderComponent(
+React.render(
   <HelloMessage name="John" />,
   document.getElementById('container')
 );
diff --git a/docs/_js/examples/hello.js b/docs/_js/examples/hello.js
@@ -5,10 +5,10 @@ var HelloMessage = React.createClass({\n\
   }\n\
 });\n\
 \n\
-React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
+React.render(<HelloMessage name=\"John\" />, mountNode);\
 ";
 
-React.renderComponent(
+React.render(
   <ReactPlayground codeText={HELLO_COMPONENT} />,
   document.getElementById('helloExample')
 );
diff --git a/docs/_js/examples/markdown.js b/docs/_js/examples/markdown.js
@@ -28,10 +28,10 @@ var MarkdownEditor = React.createClass({\n\
   }\n\
 });\n\
 \n\
-React.renderComponent(<MarkdownEditor />, mountNode);\
+React.render(<MarkdownEditor />, mountNode);\
 ";
 
-React.renderComponent(
+React.render(
   <ReactPlayground codeText={MARKDOWN_COMPONENT} />,
   document.getElementById('markdownExample')
 );
diff --git a/docs/_js/examples/timer.js b/docs/_js/examples/timer.js
@@ -19,10 +19,10 @@ var Timer = React.createClass({\n\
   }\n\
 });\n\
 \n\
-React.renderComponent(<Timer />, mountNode);\
+React.render(<Timer />, mountNode);\
 ";
 
-React.renderComponent(
+React.render(
   <ReactPlayground codeText={TIMER_COMPONENT} />,
   document.getElementById('timerExample')
 );
diff --git a/docs/_js/examples/todo.js b/docs/_js/examples/todo.js
@@ -33,10 +33,10 @@ var TodoApp = React.createClass({\n\
     );\n\
   }\n\
 });\n\
-React.renderComponent(<TodoApp />, mountNode);\
+React.render(<TodoApp />, mountNode);\
 ";
 
-React.renderComponent(
+React.render(
   <ReactPlayground codeText={TODO_COMPONENT} />,
   document.getElementById('todoExample')
 );
diff --git a/docs/_js/html-jsx.js b/docs/_js/html-jsx.js
@@ -78,5 +78,5 @@ var HELLO_COMPONENT = "\
     }
   });
 
-  React.renderComponent(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
+  React.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
 }());
diff --git a/docs/_js/jsx-compiler.js b/docs/_js/jsx-compiler.js
@@ -5,7 +5,7 @@ var HelloMessage = React.createClass({\n\
   }\n\
 });\n\
 \n\
-React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
+React.render(<HelloMessage name=\"John\" />, mountNode);\
 ";
 
 function transformer(harmony, code) {
@@ -39,7 +39,7 @@ var CompilerPlayground = React.createClass({
     );
   },
 });
-React.renderComponent(
+React.render(
   <CompilerPlayground />,
   document.getElementById('jsxCompiler')
 );
diff --git a/docs/_js/live_editor.js b/docs/_js/live_editor.js
@@ -190,7 +190,7 @@ var ReactPlayground = React.createClass({
     try {
       var compiledCode = this.compileCode();
       if (this.props.renderCode) {
-        React.renderComponent(
+        React.render(
           <CodeMirrorEditor codeText={compiledCode} readOnly={true} />,
           mountNode
         );
@@ -199,7 +199,7 @@ var ReactPlayground = React.createClass({
       }
     } catch (err) {
       this.setTimeout(function() {
-        React.renderComponent(
+        React.render(
           <div className="playgroundError">{err.toString()}</div>,
           mountNode
         );
diff --git a/examples/ballmer-peak/example.js b/examples/ballmer-peak/example.js
@@ -38,7 +38,7 @@ var BallmerPeakCalculator = React.createClass({
   }
 });
 
-React.renderComponent(
+React.render(
   <BallmerPeakCalculator />,
   document.getElementById('container')
 );
diff --git a/examples/basic-commonjs/index.js b/examples/basic-commonjs/index.js
@@ -18,7 +18,7 @@ var ExampleApplication = React.createClass({
 var start = new Date().getTime();
 
 setInterval(function() {
-  React.renderComponent(
+  React.render(
     <ExampleApplication elapsed={new Date().getTime() - start} />,
     document.getElementById('container')
   );
diff --git a/examples/basic-jsx-external/example.js b/examples/basic-jsx-external/example.js
@@ -15,7 +15,7 @@ var ExampleApplication = React.createClass({
 var start = new Date().getTime();
 
 setInterval(function() {
-  React.renderComponent(
+  React.render(
     <ExampleApplication elapsed={new Date().getTime() - start} />,
     document.getElementById('container')
   );
diff --git a/examples/basic-jsx-harmony/index.html b/examples/basic-jsx-harmony/index.html
@@ -41,7 +41,7 @@ <h4>Example Details</h4>
       });
       var start = new Date().getTime();
       setInterval(() => {
-        React.renderComponent(
+        React.render(
           <ExampleApplication elapsed={new Date().getTime() - start} />,
           document.getElementById('container')
         );
diff --git a/examples/basic-jsx-precompile/example.js b/examples/basic-jsx-precompile/example.js
@@ -15,7 +15,7 @@ var ExampleApplication = React.createClass({
 var start = new Date().getTime();
 
 setInterval(function() {
-  React.renderComponent(
+  React.render(
     <ExampleApplication elapsed={new Date().getTime() - start} />,
     document.getElementById('container')
   );
diff --git a/examples/basic-jsx/index.html b/examples/basic-jsx/index.html
@@ -44,7 +44,7 @@ <h4>Example Details</h4>
       });
       var start = new Date().getTime();
       setInterval(function() {
-        React.renderComponent(
+        React.render(
           <ExampleApplication elapsed={new Date().getTime() - start} />,
           document.getElementById('container')
         );
diff --git a/examples/basic/index.html b/examples/basic/index.html
@@ -39,12 +39,12 @@ <h4>Example Details</h4>
         }
       });
 
-      // Call React.createFactory instead of directly call ExampleApplication({...}) in React.renderComponent
+      // Call React.createFactory instead of directly call ExampleApplication({...}) in React.render
       var ExampleApplicationFactory = React.createFactory(ExampleApplication);
 
       var start = new Date().getTime();
       setInterval(function() {
-        React.renderComponent(
+        React.render(
           ExampleApplicationFactory({elapsed: new Date().getTime() - start}),
           document.getElementById('container')
         );
diff --git a/examples/jquery-bootstrap/js/app.js b/examples/jquery-bootstrap/js/app.js
@@ -125,4 +125,4 @@ var Example = React.createClass({
   }
 });
 
-React.renderComponent(<Example />, document.getElementById('jqueryexample'));
+React.render(<Example />, document.getElementById('jqueryexample'));
diff --git a/examples/jquery-mobile/js/app.js b/examples/jquery-mobile/js/app.js
@@ -175,4 +175,4 @@ var PagePopUpContent = React.createClass({
 });
 
 // Render application.
-React.renderComponent(App(null), document.getElementById('content'));
+React.render(App(null), document.getElementById('content'));
diff --git a/examples/transitions/index.html b/examples/transitions/index.html
@@ -75,7 +75,7 @@ <h4>Example Details</h4>
         }
       });
 
-      React.renderComponent(
+      React.render(
         <AnimateDemo />,
         document.getElementById('container')
       );
diff --git a/perf/index.html b/perf/index.html
@@ -42,7 +42,7 @@
 window.onload = function(){
   window.isDone = false;
 
-  React.renderComponent(
+  React.render(
     BrowserPerfRunnerApp({
       headless: perfRunner.getQueryParamArrayOrDefault('headless', [false])[0],
       react: perfRunner.getQueryParamArrayOrDefault('react', reactVersions),
diff --git a/perf/lib/BrowserPerfRunnerContext.react.js b/perf/lib/BrowserPerfRunnerContext.react.js
@@ -7,38 +7,38 @@ var BenchmarkQueue = React.createClass({
     onCompleteEach: React.PropTypes.func,
     onError: React.PropTypes.func
   },
-  
+
   getDefaultProps: function(){
     return {
       maxTime: 5
     };
   },
-  
+
   getInitialState: function(){
     return {
       queue: this.props.initialQueue.slice()
     };
   },
-  
+
   setItemState: function(state){
     state.test = this.state.queue[0].test;
     state.react = this.state.queue[0].react;
     this.props.onChange(state);
   },
-  
+
   handleContextReady: function(window){
     var benchmark = window.Benchmark(window.exports);
     benchmark.options.maxTime = this.props.maxTime; //DEBUG
 
     var itemState = {
       testRunnerURL: window.location.href,
-      
+
       name: window.exports.name,
       platform: window.Benchmark.platform.description,
       reactVersion: window.React.version,
-      
+
       isMinified: (function(){
-        var code = window.React.renderComponent.toString();
+        var code = window.React.render.toString();
         return code.indexOf(',') - code.indexOf('(') <= 2;
       }())
     };
@@ -66,11 +66,11 @@ var BenchmarkQueue = React.createClass({
     });
     benchmark.run({async:true});
   },
-  
+
   shouldComponentUpdate: function(nextProps, nextState){
     return nextState.queue.length < this.state.queue.length;
   },
-  
+
   render: function(){
     if (!(this.state.queue && this.state.queue.length > 0)){
       return React.DOM.div({style:{display:'none'}});
@@ -110,11 +110,11 @@ var BrowserPerfRunnerContext = React.createClass({
   // _handleFrameError: function(error){
   //   console.error('BrowserPerfRunnerContext', error);
   // },
-  // 
+  //
   // _handleFrameLoad: function(event){
   //   console.log('BrowserPerfRunnerContext', event);
   // },
-  // 
+  //
   _handleMessage: function(event){
     if (location.href.indexOf(event.origin) !== 0)
       return console.debug('BrowserPerfRunnerContext#_handleMessage ignored message from ' + event.origin);
@@ -191,5 +191,5 @@ var BrowserPerfRunnerContext = React.createClass({
     right: '100%',
     bottom: '100%'
   }
-  
+
 });
diff --git a/perf/lib/todolist.html b/perf/lib/todolist.html
@@ -10,7 +10,7 @@
 <script>
 function main(){
   var app = todolist.App({ fakeDataCount:333 });
-  React.renderComponent(app, document.body);
+  React.render(app, document.body);
 }
 window.onload = main;
 </script>
diff --git a/perf/tests/basic-unmount.js b/perf/tests/basic-unmount.js
@@ -15,7 +15,7 @@ exports.setup = function(){
   /*global*/_rootNode = document.createElement('div');
   document.body.appendChild(_rootNode);
   var _firstChild = React.DOM.div(null, 'lol, perf testing ', this.count);
-  React.renderComponent(_firstChild, _rootNode);
+  React.render(_firstChild, _rootNode);
 };
 exports.fn = function(){
   if (React.unmountAndReleaseReactRootNode) React.unmountAndReleaseReactRootNode(_rootNode);
diff --git a/perf/tests/propTypes.js b/perf/tests/propTypes.js
@@ -70,7 +70,7 @@ exports.fn = function(){
     }));
   };
 
-  React.renderComponent(List({
+  React.render(List({
     array: [11, 12, 13, 14, 15, 16, 17, 18, 19, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
     bool: false,
     number: Math.random(),
diff --git a/perf/tests/renderComponent-basic.js b/perf/tests/renderComponent-basic.js
@@ -9,14 +9,14 @@ if (typeof exports == 'undefined') exports = {};
 
 /*http://benchmarkjs.com/docs#options*/
 
-exports.name = 'React.renderComponent single div';
+exports.name = 'React.render single div';
 
 exports.setup = function(){
   /*global*/_rootNode = document.createElement('div');
   document.body.appendChild(_rootNode);
 };
 exports.fn = function(){
-  React.renderComponent(React.DOM.div(null, 'lol, perf testing ', this.count), _rootNode);
+  React.render(React.DOM.div(null, 'lol, perf testing ', this.count), _rootNode);
 };
 exports.teardown = function(){
   if (React.unmountAndReleaseReactRootNode) React.unmountAndReleaseReactRootNode(_rootNode);
diff --git a/perf/tests/setState-callback-5.js b/perf/tests/setState-callback-5.js
@@ -21,7 +21,7 @@ exports.setup = function(){
     }
   });
 
-  React.renderComponent(AwesomeComponent(null), _rootNode);
+  React.render(AwesomeComponent(null), _rootNode);
 };
 exports.fn = function(deferred){
   setState({random: Date.now() + Math.random()}, function(){
diff --git a/perf/tests/setState-callback.js b/perf/tests/setState-callback.js
@@ -21,7 +21,7 @@ exports.setup = function(){
     }
   });
 
-  React.renderComponent(AwesomeComponent(null), _rootNode);
+  React.render(AwesomeComponent(null), _rootNode);
 };
 exports.fn = function(deferred){
   setState({random: Date.now() + Math.random()}, function(){
diff --git a/perf/tests/shouldComponentUpdate.js b/perf/tests/shouldComponentUpdate.js
@@ -18,7 +18,7 @@ exports.setup = function(){
   document.body.appendChild(_rootNode);
 };
 exports.fn = function(){
-  React.renderComponent(AwesomeComponent(null), _rootNode);
+  React.render(AwesomeComponent(null), _rootNode);
 };
 exports.teardown = function(){
   React.unmountComponentAtNode(_rootNode);
diff --git a/perf/tests/todolist-add.js b/perf/tests/todolist-add.js
@@ -10,7 +10,7 @@ exports.setup = function(){
   /*global*/_rootNode = document.createElement('div');
   document.body.appendChild(_rootNode);
   var appDescriptor = todolist.App({ fakeDataCount: 333 });
-  /*global*/_app = React.renderComponent(appDescriptor, _rootNode);
+  /*global*/_app = React.render(appDescriptor, _rootNode);
 };
 exports.fn = function(deferred){
   var liCount = document.getElementsByTagName('li').length;
diff --git a/perf/tests/todolist-do-stuff.js b/perf/tests/todolist-do-stuff.js
@@ -12,7 +12,7 @@ exports.setup = function(){
   /*global*/_rootNode = document.createElement('div');
   document.body.appendChild(_rootNode);
   var appDescriptor = todolist.App({ fakeDataCount: 333 });
-  /*global*/_app = React.renderComponent(appDescriptor, _rootNode);
+  /*global*/_app = React.render(appDescriptor, _rootNode);
 };
 
 exports.fn = function(deferred){
diff --git a/perf/tests/todolist-edit.js b/perf/tests/todolist-edit.js
@@ -10,7 +10,7 @@ exports.setup = function(){
   /*global*/_rootNode = document.createElement('div');
   document.body.appendChild(_rootNode);
   var appDescriptor = todolist.App({ fakeDataCount: 333 });
-  /*global*/_app = React.renderComponent(appDescriptor, _rootNode);
+  /*global*/_app = React.render(appDescriptor, _rootNode);
   /*global*/_todo1 = _app.addItem("Howdy 1!");
   /*global*/_todo2 = _app.addItem("Howdy 2!");
   /*global*/_todo3 = _app.addItem("Howdy 3!");
diff --git a/perf/tests/todolist-mount.js b/perf/tests/todolist-mount.js
@@ -13,7 +13,7 @@ exports.setup = function(){
 };
 
 exports.fn = function(deferred){
-  React.renderComponent(todolist.App({ fakeDataCount: 333 }), _rootNode, function(){ deferred.resolve(); });
+  React.render(todolist.App({ fakeDataCount: 333 }), _rootNode, function(){ deferred.resolve(); });
 };
 
 exports.teardown = function(){

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ var HelloMessage = React.createClass({`
`19`	`19`	`}`
`20`	`20`	`});`
`21`	`21`
`22`		`-React.renderComponent(`
	`22`	`+React.render(`
`23`	`23`	`<HelloMessage name="John" />,`
`24`	`24`	`document.getElementById('container')`
`25`	`25`	`);`
Original file line number	Diff line number	Diff line change
`@@ -78,5 +78,5 @@ var HELLO_COMPONENT = "\`
`78`	`78`	`}`
`79`	`79`	`});`
`80`	`80`
`81`		`- React.renderComponent(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));`
	`81`	`+ React.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));`
`82`	`82`	`}());`
Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ var BallmerPeakCalculator = React.createClass({`
`38`	`38`	`}`
`39`	`39`	`});`
`40`	`40`
`41`		`-React.renderComponent(`
	`41`	`+React.render(`
`42`	`42`	`<BallmerPeakCalculator />,`
`43`	`43`	`document.getElementById('container')`
`44`	`44`	`);`