What needs to be done to call third party Reactjs component from Anguarjs 1 using ngReact?

Question

I have an existing Angularjs application, and I would like to start using Reactjs.

I tried ngReact, I can create my own Reactjs component using React.createClass and reactDirective, and Angular is able call this directive successfully. I am only using bower to add dependencies for angular, react, and ngReact, I am not using any other tools like gulp, grunt, webpack, etc.

The main reason that I would like to use Reactjs is to invoke third party Reactjs components, which is created using Reactjs, not created using ngReact. I could not find an example that is doing this. What do I need to do to make the Angular application to find the Reactjs components and invoke it?

score 0 · Answer 1 · answered Feb 16 '18 at 19:24

My angularjs 1.4 app was also not using common UI build tools like webpack. I wanted to introduce some react components, and this was my approach.

I created a file, angularModuleOfReactComponents.js. It imports react components, then makes an angular module (reactComponentsModule) to hold them:

import MyComponent from './MyComponent.js';
import AnotherComponent from './AnotherComponent.js';

(function(){
    var m = angular.module('reactComponentsModule', []);
    m.value('reactMyComponent', MyComponent);
    m.value('reactAnotherComponent', AnotherComponent);
})();

You should be able to do something similar by importing third party libraries. You could also write a react class that uses a third party library and import your wrapper class.

I then used Babel to convert my jsx react components and my angularModuleOfReactComponents.js to CommonJS, and then I used browserify to convert to something the browser understands. (Although I used build tools, they do not involve my angular app. And, this isn't my permanent mechanism. This is a two step process that doesn't allow auto recompiling when source is changed. I was just trying to get something to work for proof of concept, and I'll be improving this process soon.)

In my angular app, I load angular library files, then react libraries, then ng-react, then my browserified angularModuleOfReactComponents.js and then my app's angular code (controllers, directives, services, etc.).

To use a react component, I declare a dependency on 'react' (from ng-react) and 'reactComponentsModule':

var myModule = angular.module('myModule', ['react', 'reactComponentsModule']);

And then I can inject whichever component(s) I need:

myModule.controller('myController', ['$scope', '$log', 'reactMyComponent', function($scope, $log, reactMyComponent) {
$scope.myprops = {name:'Jack'};
}]);

In html, ng-react's react-component directive is used like:

<react-component name="reactMyComponent" props="myprops" watch-depth="reference" />

score 0 · Answer 2 · answered Feb 16 '18 at 21:32

To add on @user3141592 answer, I've done a blog post recently on how you can migrate your angular app to React using webpack and ngReact:

https://www.devpanda.me/2018/02/16/Simple-Angular-and-React-Hybrid-App/

I've posted a github repo as well :

https://github.com/danielcondemarin/angular-react-hybrid

What needs to be done to call third party Reactjs component from Anguarjs 1 using ngReact?

2 Answers2