React vs. Angular components / Boyan Mihaylov

As an IT consultant I have the opportunity to experiment with different libraries and frameworks. Every time I should solve a particular (architectural) problem, I start thinking what kind of tools I know and how they could help me in that particular situation. I have had great experience both with Angular and React for building dynamic front-end application. In this series of posts I want to do a simple comparison between them in terms of how they help developers define and use components. Please note that I am not going to draw a conclusion about which of them is better. I really do think that both have their strong sides, so it is a matter of approach (and preference sometimes) which one you would use.

Components in React

React has by design a component-oriented approach to building JavaScript applications. Everything is bundled together – the HTML template and the code that manages it (called sometimes controller-view). The following demonstrates a very simple React component.

var Hello = React.createClass({
  render: function () {
    return <h1>Hello by React</h1>;
  }
});
React.render(<Hello />, containerDomNode);

var Hello = React.createClass({

render: function () {

return <h1>Hello by React</h1>;

}

});

React.render(<Hello />, containerDomNode);

Hey, you are missing the quotes around the HTML! Well, you are right, if we try to execute this as regular JavaScript code, we will indeed get an error. However, React provides an interesting feature, called JSX. It allows you to embed HTML in your JavaScript code, which is all then transformed (yes, you need a small tool for this) into regular JavaScript code. You are not required to write React code in this way, though. You can still write traditional JavaScript (this is basically what you get as an output from the JSX transformer), if you prefer to.

Components in Angular

Components in Angular are called directives. While the HTML template is built in the React component definition, Angular provides more freedom about this. One can choose either to embed the HTML or provide an external URL to be called at compilation. The following is the same simple component, defined in Angular.

angular.module('app', []).directive('hello', function() {
  return {
    template: '<h1>Hello by Angular</h1>'
  };
});

angular.module('app', []).directive('hello', function() {

return {

template: '<h1>Hello by Angular</h1>'

};

});

<hello></hello>

1	<hello></hello>

Another difference is how the component is rendered. In React we have to do it with JavaScript code by calling

React.render()

1	React.render()

, while in Angular we can use a custom HTML tag directly, which is then transformed after bootstrapping the application.

Note that this post is about Angular 1.x. Version 2 is expected to come this year, where the structure will be different. In my future posts I will try to give you some information about it.

Compare and contrast

Now I am going to show you some side-by-side comparison between React and Angular, i.e. how certain aspects could be achieved by either of them. Note that sometimes a particular aspect could be implemented in more than one way. I will try to keep it simple and give you just one example, though. As I said earlier, I am not going to declare a winner, bur rather give you a decent overview.

Rendering

As we saw earlier, one renders a React component by calling

React.render()

1	React.render()

. React components are by default defined as custom HTML tags. Note that React introduces the concept of a Virtual DOM, so these custom HTML tags are actually virtual ones. Angular, on the contrary, provides four different ways to render a component: as a custom (real) HTML tag, as an attribute to an existing HTML element, as a class, or as a comment. This is regulated by defining a restrict field to the directive object. The best practices suggest that one uses either HTML tags or attributes.

Assigning properties

It is common that one would need to pass some properties to the components. In React this is pretty standard, while Angular gives a few options, one of which is using the scope.

React

var Hello = React.createClass({
  propTypes: {
    by: React.PropTypes.string
  },

  render: function () {
    return <h1>Hello by {this.props.by}</h1>;
  }
});
React.render(<Hello by="React" />, containerDomNode);

var Hello = React.createClass({

propTypes: {

by: React.PropTypes.string

render: function () {

return <h1>Hello by {this.props.by}</h1>;

}

});

React.render(<Hello by="React" />, containerDomNode);

Angular

angular.module('app', []).directive('hello', function() {
  return {
    template: '<h1>Hello by {{by}}</h1>',
    scope: {
    	by: '@'
    }
  };
});

angular.module('app', []).directive('hello', function() {

return {

template: '<h1>Hello by {{by}}</h1>',

scope: {

by: '@'

}

};

});

<hello by="Angular"></hello>

1	<hello by="Angular"></hello>

React provides (optionally) a way to define all properties a component could expect together with a type (f.x., string, number, array). This gives really good overview over what your component depends on and allows React to validate it for you. Angular’s scope allows only three different property types, each defined by a special symbol: strings (@), functions (&), and a general object (=).

Conclusion

This was Part 1 of my series about comparison between React and Angular. In the next post I will continue discussing different aspects of both of them, so stay tuned 🙂