React inside Aurelia

Libception. Learn how to use React inside of your Aurelia applications.

Aurelia's design embraces flexibility and interoperability, making it well-suited for integration with other libraries and frameworks. One common scenario is incorporating React components into an Aurelia application. This integration showcases Aurelia's adaptability and how it can leverage the strengths of other ecosystems. Below, we provide a detailed guide and code examples to integrate a React component seamlessly into an Aurelia 2 application.

Install Dependencies

First, ensure that your Aurelia project has the necessary dependencies to use React. You'll need React and ReactDOM, along with any types of TypeScript support if needed.

npm install react react-dom
npm install --save-dev @types/react @types/react-dom

Create a React Component

For this example, let's create a simple React component. You can replace this with any React component you need.

// src/components/MyReactComponent.jsx
import React from 'react';

const MyReactComponent = () => {
  return <div>Hello from React!</div>;
};

export default MyReactComponent;

Create an Aurelia Wrapper Component

To integrate the React component into Aurelia, create a wrapper Aurelia component that will render the React component.

// src/resources/elements/react-wrapper.ts
import { customElement, bindable, INode, resolve } from 'aurelia';
import { createElement } from 'react';
import { createRoot } from 'react-dom/client';

@customElement({ name: 'react-wrapper', template: '<template><div ref="container"></div></template>' })
export class ReactWrapper {
  @bindable public reactComponent;
  private container!: HTMLDivElement;
  private root: ReactDOM.Root | null = null;

  public binding(): void {
    this.root = createRoot(this.container);
    this.root.render(createElement(this.reactComponent));
  }

  public unbinding(): void {
    this.root?.unmount();
  }
}

This wrapper takes a React component as a bindable property and uses ReactDOM to render it inside the Aurelia component's DOM node.

Register the Wrapper Component and Use It

Now, you must register the wrapper component with Aurelia and then use it in your application.

// src/main.ts
import { Aurelia } from 'aurelia';
import { ReactWrapper } from './resources/elements/react-wrapper';

Aurelia
  .register(ReactWrapper)
  .app(MyApp)
  .start();

Then, use it in a view:

<!-- src/my-view.html -->
<template>
  <react-wrapper react-component.bind="myReactComponent"></react-wrapper>
</template>

Ensure you import and make the React component available in your Aurelia component:

// src/my-view.ts
import MyReactComponent from './components/MyReactComponent';

export class MyView {
  public myReactComponent = MyReactComponent;
}

Following these steps, you can integrate React components into your Aurelia 2 application. This process highlights the flexibility of Aurelia, allowing you to take advantage of React's component library while enjoying the benefits of Aurelia's powerful features.