Using ReactJS with AngularJS

Question

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.

Maybe fix your code samples? The formatting is hard to read

Simon Smith
– Simon Smith

2014-01-06 16:54:33 +00:00
Commented Jan 6, 2014 at 16:54 — Simon Smith
– Simon Smith, Commented Jan 6, 2014 at 16:54

Pratik Gadoya · Accepted Answer · 2018-01-31 14:27:04Z

20

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

edited Jan 31, 2018 at 14:27

Pratik Gadoya

1,4771 gold badge17 silver badges28 bronze badges

answered Jan 6, 2014 at 18:11

Tasnim Reza

6,0603 gold badges27 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yogesh Mangaj Over a year ago

I have forked the plunker and modified it so that the Hello component is contained within the directive: plnkr.co/edit/3ImY8G7X1VfvOeKrC8DY?p=preview @Reza does this make much sense?

Tasnim Reza Over a year ago

Technically this is not a problem but Separation of Concern (SoC) and test-ability perspective it is better to place your react classes into different files.

GraphicsMuncher · Accepted Answer · 2014-03-01 19:06:55Z

12

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

edited Mar 1, 2014 at 19:06

GraphicsMuncher

4,6514 gold badges38 silver badges50 bronze badges

answered Mar 1, 2014 at 18:42

Marques Woodson

4975 silver badges9 bronze badges

1 Comment

Nathan Reese Over a year ago

How would data binding work the other way? Say your react component has an input and you want to update the angular scope when the input changes. Is this possible with the react-component directive from ngReact.

ruffin · Accepted Answer · 2021-04-07 16:35:22Z

9

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

edited Apr 7, 2021 at 16:35

ruffin

17.8k11 gold badges99 silver badges155 bronze badges

answered Feb 5, 2015 at 15:35

TGH

39.4k13 gold badges106 silver badges140 bronze badges

3 Comments

taco Over a year ago

Can you explain why I was getting this error when using this code? Cannot read property '__reactAutoBindMap' of undefined at ReactClass.createClass.Constructor I had to instead use React.createFactory to create a greetingFactory variable and pass the greetingFactory variable into React.render instead of React.renderComponent.

Damian Green Over a year ago

@taco In the latest version of react (v0.14.x), you need to do ReactDOM.render(React.createElement(GreetingSection, null), elem[0]); to avoid this error. See link

taco Over a year ago

@DamianGreen maybe that will help somebody else. Thanks

hakuna · Accepted Answer · 2015-08-03 19:43:12Z

3

Instead try using ngReact angular module rather than using ReactJs directly. This provides seamless integration with angularJs as well. Check the samples/examples @ https://github.com/davidchang/ngReact

answered Aug 3, 2015 at 19:43

hakuna

6,74111 gold badges57 silver badges79 bronze badges

Comments

Simon Smith · Accepted Answer · 2014-01-06 16:54:17Z

2

renderComponent expects a DOM element as a second argument to inject the component. It seems that is what the error is complaining about.

answered Jan 6, 2014 at 16:54

Simon Smith

8,0442 gold badges32 silver badges40 bronze badges

Collectives™ on Stack Overflow

Using ReactJS with AngularJS

5 Answers 5

2 Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related