React In Modern Web Applications: Part 2

As mentioned in part 1 of this series, React is an excellent Javascript library for writing highly dynamic client-side components. However, React is not meant to be a complete MVC framework. Its strength is the View part of the Model-View-Controller pattern. AngularJS is one of the best known and most powerful Javascript MVC frameworks. One of the goals of the course was to show how to integrate React with AngularJS.

Integrating React with AngularJS

Developers can create reusable components in AngularJS by using directives. Directives are very powerful but complex, and the code quickly tends to becomes messy and hard to maintain. Therefore, replacing the directive content in your AngularJS application with React components is an excellent use-case for React. In the course, we created a Timesheet component in React. To use it with AngularJS, create a directive that loads the WeekEntryComponent:
[javascript]
angular.module(‘timesheet’)
.directive(‘weekEntry’, function () {
return {
restrict: ‘A’,
link: function (scope, element) {
React.renderComponent(new WeekEntryComponent({
scope.companies,
scope.model}), element.find(‘#weekEntry’)[0]);
}
};
});
[/javascript]
as you can see, a simple bit of code. Since this is AngularJS code, I prefer not to use JSX, and write the React specific code in plain Javascript. However, if you prefer you could use JSX syntax (do not forget to add the directive at the top of the file!). We are basically creating a component and rendering it on the element with id weekentry. We pass two values from the directive scope to the WeekEntryComponent as properties. The component will render based on the values passed in.

Reacting to changes in AngularJS

However, the code as shown above has one fatal flaw: the component will not re-render when the companies or model values change in the scope of the directive. The reason is simple: React does not know these values are dynamic, and the component gets rendered once when the directive is initialised. React re-renders a component in only two situations:

• If the value of a property changes: this allows parent components to force re-rendering of child components
• If the state object of a component changes: a component can create a state object and modify it

State should be kept to a minimum, and preferably be located in only one component. Most components should be stateless. This makes for simpler, easier to maintain code.
To make the interaction between AngularJS and React dynamic, the WeekEntryComponent must be re-rendered explicitly by AngularJS whenever a value changes in the scope. AngularJS provides the watch function for this:
[javascript]
angular.module(‘timesheet’)
.directive(‘weekEntry’, function () {
return {
restrict: ‘A’,
link: function (scope, element) {
scope.$watchCollection(‘[clients, model]’, function (newData) {
if (newData[0] !== undefined && newData[1] !== undefined) {
React.renderComponent(new WeekEntryComponent({
rows: newData[1].companies,
clients: newData[0]
}
), element.find(‘#weekEntry’)[0]);
}
});
}
};
});
[/javascript]
In this code, AngularJS watches two values in the scope, clients and model, and when one of the values is changed by an user action the function gets called, re-rendering the React component only when both values are defined. If most of the scope is needed from AngularJS, it is better to pass in the complete scope as property, and put a watch on the scope itself. Remember, React is very smart about re-rendering to the browser. Only if a change in the scope properties leads to a real change in the DOM will the browser be updated!

Accessing AngularJS code from React

When your component needs to use functionality defined in AngularJS you need to use a function callback. For example, in our code, saving the timesheet is handled by AngularJS, while the save button is managed by React. We solved this by creating a saveTimesheet function, and adding it to the scope of directive. In the WeekEntryComponent we added a new property: saveMethod:
[javascript]
angular.module(‘timesheet’)
.directive(‘weekEntry’, function () {
return {
restrict: ‘A’,
link: function (scope, element) {
scope.$watchCollection(‘[clients, model]’, function (newData) {
if (newData[0] !== undefined && newData[1] !== undefined) {
React.renderComponent(WeekEntryComponent({
rows: newData[1].companies,
clients: newData[0],
saveMethod: scope.saveTimesheet
}), element.find(‘#weekEntry’)[0]);
}
});
}
};
});
[/javascript]
Since this function is not going to be changed it does not need to be watched. Whenever the save button in the TimeSheetComponent is clicked, the saveTimesheet function is called and the new state of the timesheet saved.

What’s next

In the next part we will look at how to deal with state in your components and how to avoid passing callbacks through your entire component hierarchy when changing state