DEV Community

Cover image for Rendering React in AngularJS
Derek N. Davis
Derek N. Davis

Posted on • Updated on • Originally published at

Rendering React in AngularJS

When migrating an AngularJS app to React we need a way to use React components in an AngularJS template. That’s where react2angular comes in. While the name sounds like the opposite of what we’re trying to accomplish, its purpose is to help bring React into an Angular app.

Here’s an example of what defining a component is like.

import { react2angular } from 'react2angular';

function TextComponent({ text }) {
  return <div>{text}</div>;

  .component('reactText', react2angular(TextComponent, ['text']]));
Enter fullscreen mode Exit fullscreen mode

And when we use it in a template, it looks just like an AngularJS component.

<react-text text="'hello world'"></react-text>
Enter fullscreen mode Exit fullscreen mode

One particularly helpful thing to do here is with the naming. By prefixing your react2angular components with “react”, it helps developers to know what components have been converted when looking at the Angular templates.

In Summary

  • Rendering React in AngularJS is straight forward with react2angular
  • Prefix react2angular component names with "react" to help your team easily tell what has been converted

Discussion (0)