React for Angular Developers (part 1)

This article is intended for developers who are familiar with Angular 1.x and want to learn more about React. We will look at different approaches to build a Rich Web Application.

After reading this article, I hope you can understand the problems React aims to solve, as well as apply existing knowledge to start applying React to your projects.

Frameworks and Libraries

Angular is a framework, while React is a library that focuses on solving problems in view layers. This is what I want to emphasize, in the process of working as well as talking with some people I still come across some cases comparing Angular and React, the truth is that the comparison is very lame.

There are different benefits as well as disadvantages when you use a framework or use a discrete set of libraries:

• Frameworks strive to come up with a comprehensive solution that can help developers organize and manage their code through patterns and conventions if you are on a large team. However, having too many APIs is also a pain when you have to write code while spending a lot of time to be able to read all the document as well as remember the patterns, especially it will be extremely difficult when you are new and still have to learn to perfect your knowledge.
• Using a discrete set of libraries means less API, easier to learn, easier to master. But this means that when you have a problem, you will need to solve it with more code or import more external libraries. This often leads to you having to write a framework of yourself to deal with.

Out of the box

Angular gives you a set of features for building Web applications, such as:

• HTML templates with dynamic expressions use {{ }}.
• Built-in directives such as ng-model, ng-repeat, and ng-class support in HTML.
• Controllers assist in centralizing code logic and passing data to the view.
• Services for sharing business logic.
• Two-way binding, as the simplest way to keep the controller and view always sync with each other.
• Provide modules to support the communication between the client and the server.
• Support routing on the client-side.
• Custom directives can be used to customize HTML syntax.
• Use dependency injection to limit object explosion.
• Filters to support formatting data on views.

Meanwhile React gives you:

• JSX syntax for templates with Javascript expresion uses {}.
• Components are very similar to the Angular elements directives.

React encourages the use of regular Javascript APIs rather than abstraction frameworks. Instead of providing a wrapper like $http in Angular for communicating with the server, you can use fetch (). You can feel comfortable using constructs like service or filter, but React doesn’t provide those. You can put them in the Javascript modules and require them in the component if you really need to.

In short, so while Angular gives you dozens of abstractions of common tasks, React intentionally contradicts this to get you to write standard Javascript and use external dependencies for other things. Or to put it simply, Angular promotes the inclusion of Javascript in HTML, while React promotes embedding HTML in Javascript.

Installation (Bootstrapping)

To install the Angular app, we need the required module, a list of dependencies, and the root element.

let app = angular.module('app', [])
let root = document.querySelector('#root');
angular.element(root).ready(function() {
  angular.bootstrap(root, ['app']);
});

For React, the simple installation is to render a component to the root node, it is still possible to have multiple root components.

let root = document.querySelector('#root');
ReactDOM.render(<App />, root)

Templates

The structure of an Angular view can be said to be extremely complex and has many responsibilities on one view. The HTML template file will usually contain a set of directives and expressions mixed with the purpose of connecting views and controllers. Data flow will be exchanged across different contexts by $scope.

In React it’s another story, it’s called all the way down, meaning the data flow will have only one direction from top to bottom. JSX is a syntax used to describe components, writing with a structure similar to XML placed inside Javascript. When run, it will be compiled into nested function calls. For example:

const App = React.createClass({
  render: function() {
    return (
      <Component>
        <div>{ 10 + 1 }</div>
        <Component prop="value" />
        <Component time={ new Date().getTime() }>
          <Component />
        </Component>
      </Component>
    )
  }
})

When the code is compiled it looks like this:

var App = React.createClass({
  render: function render() {
    return React.createElement(
      Component,
      null,
      React.createElement("div", null, 10 + 1),
      React.createElement(Component, { prop: "value" }),
      React.createElement(
        Component,
        { time: new Date().getTime() },
        React.createElement(Component, null)
      )
    );
  }
});

Directives

React doesn’t have a template since it’s all written in JSX in the render () function.

class MyComponent extends React.Component {
  render() {
    return (
      // JSX lives here
    )
  }
}

Let’s see how some Angular directives are written in React:

ng-repeat

// Angular:
<ul>
  <li ng-repeat="word in words">{ word }</li>
</ul>
//React:
<ul>
  { words.map((word)=> <li>{ word }</li> )}
</ul>

ng-class

// Angular:
<form ng-class="{ active: active, error: error }">
</form>
// React:
<form className={ classNames({active: active, error: error}) }>
</form>
// We have to set properties of Node like this:
formNode.className = "active error";

ng-if

// Angular:
<div>
  <p ng-if="enabled">Enable</p>
</div>

Since JSX is the sugar syntax used to call function and initialize the object, the if-else statement won’t run inside the JSX. The simplest way is to use the ternary operator or move the logical condition out of JSX.

// ternary operator
<div>
  { enabled ? <p>Enabled</p> : null }
</div>

// if/else outside of JSX
let node = null;
if (enabled) {
  node = <p>Enabled</p>;
}
<div>{ node }</div>

Above are some basic examples, you can apply many things to solve a problem such as ng-show / ng-hide using both if and className.