Can angular and react play together?

Question

I really am coming to love angular, but react is getting a lot of attention. Are they really opposing forces?

Is it a good idea to use react and angular together? Could I? Should I?

What are the pros and cons of mixing them?

React is for UI, but angular can handle the controller and the view...but is react better at handling the view? Can we make a better app by relegating angular to the controller only?

Any good resources for doing these things?

One thing I do like about angular that seems to be less true with react is that angular really allows you to have separation of concerns, whereas react starts to confuse this a little. It seems to be contrary to the angular-way, at least.

Answer 1

Are they really opposing forces?

In some sense they are, and in some other sense they aren't. People are definitely using React inside Angular directives, but they mostly do that to get a performance boost and not because they think React is awesome. And if you're only looking into React for better performance, you're really missing out on the value proposition with React.

I would say that they are opposing forces in that they solve the same problems. Even though the argument that React is just the V in MVC and Angular is a "full blown framework" gets thrown around a lot, Angular and React are very comparable.

Angular has controllers and directives (as well as services and factories), whereas React only has components. And because of this, it's easy to interpret that as Angular being a more complete framework. But let's dissect this.

Controllers

React doesn't contain anything called a Controller, but there's a concept in the React world called a "view controller", which maps pretty well to Angular controllers. A react "view controller" is defined as any other React component, but it does minimal rendering. Its concern is data/state management, and then passing that state down to view components which then renders that data/state.

A simple example would be:

var ViewComponent = React.createClass({   render() {     return (       <ul>         {this.props.items.map(item => <li>{item.text}</li>)}       </ul>     );   } });  var ViewController = React.createClass({   getInitialState() {     return {       items: []     };   },   componentDidMount() {     SomeStore.getItems()       .then(items => this.setState({items: items}));   },   render() {     return <ViewComponent items={this.state.items} />;   } }); 

So the ViewComponent here is concerned about the specifics of rendering HTML, and the ViewController is concerned about getting and managing data which it passes to the ViewComponent.

Directives

I don't think anyone argues that the concept of Angular directives maps pretty well to React view components.

Services and factories

This is something that exists in Angular just because it has the concept of Dependency Injection, and basically the only argument for "Angular is a more complete framework than React". You could argue for days if Angulars way of DI is a good fit in a language like Javascript, and if Javascript really needs something like it since it's so dynamic, but let's not do that.

Instead of creating its own module system like Angular does (and I think we can all agree that Angular modules in themselves add very little value), React allows you to use any module system you like. Transpiled ES6, CommonJS, AMD, plain old globals, etc. The community have pretty much agreed on ES6 and CommonJS, which is a good thing (and Angular is moving in that direction with Angular 2).

So if DI is your thing, it's very easy to implement together with a good module system. And there's even a really interesting approach of a completely new take on DI in React from Pete Hunt: http://jsfiddle.net/cjL6h/

Is it a good idea to use react and angular together? Could I? Should I?

I would only do it if you're planning to move to React down the line. Your application will be harder to understand and more complex, since you have to know both Angular and React. That said, a lot of people seem to be using React inside Angular, so this is just my opinion.

React is for UI, but angular can handle the controller and the view...but is react better at handling the view? Can we make a better app by relegating angular to the controller only?

Like I said before, this is a common misconception. Angular and React solves the same problems, but in different ways. A benefit of not tying your business logic layer to the Angular module system is that it's easier to migrate to something else. A lof of people use a Flux architecture together with React, but there's nothing React specific with Flux. You can use the Flux ideas with any framework.

One thing I do like about angular that seems to be less true with react is that angular really allows you to have separation of concerns, whereas react starts to confuse this a little. It seems to be contrary to the angular-way, at least.

I very much disagree with this. I find my React applications to have better separation of concerns than my Angular applications (and I've used Angular a lot). You just have to understand the React way of thinking, and it's also a good idea to learn what Flux is all about. I'm not saying that you can't write great apps in Angular, it's just my experience that it's easier to "fall into the pit of success" with React than with Angular.

Angular has a two-step learning curve. At first, you create a controller with a scope, add an array to the scope and print that out with an ng-repeat and you're awestruck by how simple that was. You add a directive, which is a little more difficult to grasp, but you copy and paste it and it works. Yeay! Then as you dig deeper, you hit the second step in your learning curve where you have to start to really understand the internals of Angular. You have to know that scopes inherit from each other with prototypal inheritance and the consequences of that (need a dot in all ng-model expressions, etc). And what's up with directive controllers? What are they and how do they compare to regular controllers? And what's transclusion? And someone told me that I need to perform this and that in the compile step of my directive, what's that?

With React, the initial learning curve is a bit steeper. But once you're over it, there's no second step. Learning Flux could be considered a second step, but learning Flux gives you new knowledge that carries over to other Javascript frameworks as well, something the "compile step in a Angular directive" does not.

Another big advantage that React has over Angular is that it's mostly just Javascript. Properties on React elements are just Javascript objects/functions instead of magic strings like in Angular attributes. This also means that your regular linter can tell you if there's an error on your callback attribute expression. In Angular, you have to run the code to see if it works.

And since Javascript already has block scope, you don't need to worry about prefixing your element names with something that makes them unique.

So am I saying that Angular is worthless and that you should move to React? No, I'm not. A lot of companies have invested a lot in Angular. But if you ask me, there are more quirks and oddities in Angular that you really have to know about if you're going to build a maintainable application. You should also think about the fact that Angular 2 is a complete rewrite, and it has taken a lot of inspiration from React (which is great!).

Answer 2

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.

In Angular, directives are the best way to integrate "View Oriented" components to your angular application, and React is one framework much oriented to presentation/view layer.

Since React uses selectors to append and render portions of your page, you may create a directive that works within angular in a way like this:

1. You gather data and manipulate it in your angular logic through services and controllers (Service and Data Layer)
2. Then, the directive receives and may manipulate that data (Kind of Model layer)
3. Then the directive calls React and passes it the information to render properly your info as you want using React handy functions. (View Layer)

Here is a great and rather short video on the integration of Angular + React + D3 for creating a basic chart.