Can angular and react together?

I really love to love angular, but the reaction gets a lot of attention. Are they really opposed to forces?

Is it good to use reaction and angular together? Can I? Should I?

What are the pros and cons of mixing them?

It responds to the user interface, but angular can handle the controller and the view ... but is it better at handling the view? Can we make a better application by taking angular to the controller only?

Any good resources for this?

One thing that I like about angular, which seems to be less true, reacts to the fact that angular really allows you to share problems, while the reaction starts to confuse this a bit. This seems to contradict angular -way, at least.

+16
angularjs reactjs
source share
6 answers
Do they really confront forces?

In a sense, they are, but in some other sense this is not so. People definitely use React inside Angular directives, but basically they do it to improve performance, and not because they think React is awesome. And if you are just learning React for better performance, you are really losing the value of the proposal with React.

I would say that they oppose forces in that they solve the same problems. Despite the fact that the argument that React is just V in MVC and Angular is a "full blown infrastructure" that is often thrown away, Angular and React are very comparable.

Angular has controllers and directives (as well as services and factories), while React has only components. Because of this, it is easy to understand that Angular is a more complete structure. But allow it.

Controllers

React does not contain anything called a controller, but there is a concept in the React world called a "view controller" that renders Angular controllers pretty well. A reactive “view controller” is defined as any other React component, but it does minimal rendering. Its task is to manage the data / state and then pass that state down to view the components that then display the 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, ViewComponent is concerned about the specifics of HTML rendering, and ViewController concerned about receiving and managing the data that it passes to the ViewComponent .

directives

I don't think anyone claims that the concept of Angular directives displays React view components very well.

Services and plants

This is what exists in Angular just because it has the concept of Dependency Injection, and basically the only argument for "Angular is a more complete structure than React." You can argue for a few days if DI Angular is a good fit for a language such as Javascript, and if Javascript really needs something like that, since it is so dynamic, but don't allow it.

Instead of creating our own modular system, such as Angular (and I think we can all agree that Angular modules themselves add very little value), React allows you to use any module system you like. Transpiled ES6, CommonJS, AMD, simple old globals, etc. The community has largely agreed with ES6 and CommonJS, which is good (and Angular is moving in that direction with Angular 2).

So, if DI is your thing, it is very easy to implement along with a good modular system. And even a really interesting approach of a completely new approach to DI in Response with Pete Hunt: http://jsfiddle.net/cjL6h/

Is it good to use reaction and Angular together? Can I? Should I?

I would only do this if you plan to go to Responsive on line. Your application will be harder to understand and complicate, since you need to know both Angular and React. However, many people seem to be using React inside Angular, so this is just my opinion.

A reaction to the interface, but Angular can handle the controller and look ... but is it more responsive to processing the view? Can we make a better application by rejecting Angular only on the controller?

As I said, this is a common misconception. Angular and React solve the same problems, but in different ways. The advantage of not linking your business logic level with the Angular modular system is that it’s easier to port to something else. Many people use the Flux architecture with React, but there is nothing specific to Flux. You can use Flux ideas with any frames.

One thing I like about Angular that seems less true is that Angular really allows you to share, and the reaction is starting to get a little confused. It seems contrary to angular -way, at least.

I really disagree with that. I find that my React apps share problems better than my Angular apps (and I often used Angular). You just need to understand React's way of thinking, as well as a good idea to know what Flux is. I'm not saying that you cannot write great applications in Angular, it's just my experience that it’s easier to “get into the pit of success” with React than with Angular.

Angular has a two-step learning curve. First, you create a controller with a scope, add an array to the scope, and print it with ng-repeat , and you are surprised how simple it was. You add a directive that is a little harder to understand, but you copy and paste it and it works. Yeah! Then, when you dig deeper, you will click the second step in your learning curve, where you need to begin to understand the internal elements of Angular. You should know that regions inherit prototypal inheritance from each other and the consequences of this (you need a dot in all ng-model expressions, etc.). And what about the controllers? What are they and how do they compare to conventional controllers? And what is switching? And someone told me that I need to do this and this is at the stage of compiling my directive, what is it?

With React, the initial learning curve is a little steeper. But once you are done, there is no second step. Learning Flux can be considered the second step, but learning Flux gives you new knowledge that is transferred to other JavaScript structures, something like the “compilation phase of the Angular directive”.

Another big advantage that React has over Angular is that it is basically just Javascript. The properties of React elements are simply Javascript objects or functions instead of magic lines, such as in Angular attributes. It also means that your regular linter can tell you if there is an error in your callback attribute expression. In Angular, you need to run the code to find out if it works.

And since Javascript already has a blocking area, you don’t have to worry about prefixing your element names with something that makes them unique.

So, I say that Angular is useless and that you should go to React? Not. Many companies have invested a lot in Angular. But if you ask me, there are more quirks and oddities in Angular that you really need to know about if you are going to create a supported application. You should also think that Angular 2 is a complete rewrite, and that has inspired a lot of inspiration from React (this is great!).

+29
source share

Yes, you can, as @Edward Knowles said, use directives to use React. Although you can use ngReact, you can also easily create directives to use React.

In Angular, directives are the best way to integrate View Oriented components into your angular application, and React is one structure that is very view / presentation oriented.

Since React uses selectors to add and render parts of your page, you can create a directive that works in angular as follows:

  • You collect data and process it in angular logic through services and controllers (level of service and data)
  • Then directive receives and can manipulate this data (model layer type).
  • directive then calls React and passes it the information to properly process your information as you want, using the useful React functions. (View layer)

Here's a great and fairly short video on integrating angular + React + D3 to create a basic diagram.

+3
source share

Yes you can use the ngReact directive. There are some use cases in which you can do this, however with this summer, Angular 2, I would try to implement it yet.

Regarding speed, you should watch this great conversation during ng-conf earlier this year.

+1
source share

If you find yourself using Angular and React together, https://github.com/bcherny/ngimport is a really good bridge between them. It allows you to exchange services / suppliers / factories / values ​​/ constants between Angular and the outside world import / require , like any other code. Hope this helps!

+1
source share

Extjs is a modern, if not direct replacement for React and Angular. One tangential answer is to take a look at ExtReact. ExtReact is an attempt by ExtJs to play well with React. Which has the advantage of being able to reuse React components in Extjs Applications.

0
source share

Just a thought: yes, we can use both in one project, but this is good for educational purposes, but the same project is difficult to maintain and the cost is more in accordance with the current situation

0
source share

All Articles