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