Using ReactJS with AngularJS

angularjs, reactjs

Solution

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`

Problem

I am trying to use ReactJS with AngularJS but it is not working out. Could anyone please direct me on how to gel them together? Or please point out what am missing here? My index.html is as follows: ``` <!DOCTYPE html> <html data-ng-app="MyApp"> <head> <title>My Test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body data-ng-controller="Ctrl1"> <div id="myDiv"> <button id="btn1" data-ng-click="clickMe()">Click Me</button> </div> <script src="http://fb.me/react-0.8.0.js"></script> <script src="http://fb.me/JSXTransformer-0.8.0.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script> <script type="text/jsx" src="reactExample.js"></script> <script src="angularExample.js"></script> </body> </html> ``` Here is how my reactExample.js has been written: ``` /** * @jsx React.DOM */ var testMy = React.createClass({ render: function(){ return ( <p>Hello</p>) } }); ``` And my angularExample.js is as follows: ``` var myapp = angular.module('MyApp',[]); myapp.controller('Ctrl1',['$scope',function($scope){ $scope.clickMe = function(){ alert("Clicked!"); React.renderComponent(testMy, elem[0]); } }]); ``` It does not display anything (other than the alert). Am expecting to see 'Hello' printed there but it throws the following error in the console: ``` Error: Invariant Violation: prepareEnvironmentForDOM(...): Target container is not a DOM element ``` Any help would be much appreciated.

Original source