Using ReactJS with AngularJS

Already @Simon Smith mentioned why the error occour React.renderComponent expect second argument but the way you play DOM manipulation inside controller is not appropriate. In AngularJs DOM manipulation should be in directive. Lets see how it could be

From Facebook's React vs AngularJS: A Closer Look blog

React components are far more powerful than Angular templates; they should be compared with Angular's directives instead.

Bottom of this blog Using React and AngularJS together section you can see how angular and react can play together.

From react website

React components implement a render() method that takes input data and returns what to display.

In angularjs components are rendered by directive

See this plunker where I integrate angularjs and react.

In react-example.js I have created virtual dom element

var Hello = React.createClass({  render: function() {    return React.DOM.div({}, 'Hello ' + this.props.name);  }});

And myMessage directive render the virtual dom

React.renderComponent(Hello({name: scope.myModel.message}), document.getElementById('example'));

Where virtual dom's name property will bind with scope.myModel.message

To use React in my controller, i do this

 myApp.controller(function($scope){        $scope.myComponent = {};        $scope.myComponent.setState({data: "something"});    });

and in my React component:

window.myComponent = React.createClass({    getInitialState: function(){        return {           data:''        }    },    componentWillMount: function(){       var scope = this.props.scope;           scope.myComponent = this;    },    render:func .....});

I'm using the ngReact directive from David Chang, which passes the $scope as a property into a component. So now you can call setState from your controller, forcing the react component to re-render :)

I have a bigger example of above in my React-Sandbox

I would consider doing the integration via a directive as that is often the recommended approach for integrating non angular code with angular.

Here is an example:

angular.module('app').directive('greeting',[function(){    return {        restrict:'AE',        scope:{name:'@'},        link: function (scope, elem, attrs){            var GreetingSection = React.createClass({displayName: 'Greeting',                render: function() {                    var message = "Good morning " + this.props.data.name + ", how are you?";                    return React.createElement('div', {className: "greeting"},message);                }            });            React.renderComponent(GreetingSection({data:scope}), elem[0]);        }    };}]);

More info here (link died; points to archive.org copy):
http://www.syntaxsuccess.com/viewarticle/547bbd04fa0710440b45e41c