ngReact is an Angular module that allows React components to be used in AngularJS applications.

I had to work on enhancing an Angular-based application and wanted to provide the additionnal functionnality as an isolated component that I could develop and test without messing with a large Angular controller that several other people were working on.

Here is my Angular+React "Hello World", with a couple gotchas that were not underlined in the documentation and took me some time to figure out.

To set things up, just run:

$ mkdir angulareacthello && cd angulareacthello
$ npm init && npm install --save angular ngreact react react-dom

Then write into index.html:

<!doctype html>
             <title>my angular react demo</title>
     <body ng-app="app" ng-controller="helloController">
                     <input type="text" ng-model="person.name" placeholder="Enter a name here">
                     <h1><react-component name="HelloComponent" props="person" /></h1>
     <script src="node_modules/angular/angular.js"></script>
     <script src="node_modules/react/dist/react.js"></script>
     <script src="node_modules/react-dom/dist/react-dom.js"></script>
     <script src="node_modules/ngreact/ngReact.js"></script>
     // include the ngReact module as a dependency for this Angular app
     var app = angular.module('app', ['react']);

     // define a controller that has the name attribute
     app.controller('helloController', function($scope) {
             $scope.person = { name: 'you' };

     // define a React component that displays "Hello {name}"
     var HelloComponent = React.createClass({
             render: function() {
                     return React.DOM.span(null, "Hello "+this.props.name);

     // tell Angular about this React component
     app.value('HelloComponent', HelloComponent);


I took me time to get a couple things clear in my mind.

<react-component> is not a React component, but an Angular directive that delegates to a React component. Therefore, you should not expect the interface of this tag to be the same as the one of a React component. More precisely, you can only use the props attribute and can not set your react properties by adding more attributes to this tag. If you want to be able to write something like <react-component firstname="person.firstname" lastname="person.lastname"> you will have to use reactDirective to create a specific Angular directive.

You have to set an object as the props attribute of the react-component tag, because it will be used as the value of this.props in the code of your React class. For example if you set the props attribute to a string (person.name instead of person in the above example) , you will have trouble using it on the React side because you will get an object built from the enumeration of the string. Therefore, the above example can not be made simpler. If we had written $scope.name = 'you' we could not have passed it correctly to the react component.

The above was tested with angular@1.5.8, ngreact@0.3.0, react@15.3.0 and react-dom@15.3.0.

All in all, it worked well. Thank you to all the developers and contributors of these projects.

blog entry of