Menu
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.
839
Yes you can, as @Edward Knowles stated, you should use directives to make use of React. Although you can use ngReact, you also can create directives easily to make use of React.
Because of its virtual DOM implementation and rendering optimizations, React outperforms Angular. It's also simple to switch between React versions; unlike Angular, you don't have to install updates one by one. Finally, using React, developers have access to a wide range of pre-built solutions.
The supported version of React is 15.3. 2. Server-side rendering is not supported. To be able to use the GoodData React Components in your Angular 2+ environment, wrap each component into an Angular component, and then render the React component using ReactDom.
The simplest way to start a new React project is to use create-react-app, which sets up a React development environment with everything you need to start writing code. With Angular, the Angular CLI is a great tool that helps you create a new Angular app, as well as letting you run, build, test and upgrade your app.
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
104
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
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
