Can we integrate react component into Aurelia project?

Question

I have created one react component and build it using webpack and deployed on server. I want to integrate this component into Aurelia Project.

I tried using below npm module: https://www.npmjs.com/package/aurelia-react-loader

In above module mentioned, component name need pass into html file. like in example my-react-component.js is passing into html file.

But my React Component is loading into root in html tag using below code:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    ReactDOM.render((
      <App/>
    ), document.getElementById('root'));

and after running webpack module, it is creating one JavaScript file that is called index_bundle.js file. Here imported App module is main js component. It is rendering into index.html on root element via ReactDOM.

So I am not sure, How I am going to integrate React component link or url into Aurelia application?

Please let me know if you have any doubts in question. I can do explain in detail.

Thanks in advance. Harish

Answer 1

Yeah, it's really easy to integrate a react component in to an Aurelia app. Check out my project where I do just that here: https://github.com/ashleygrant/aurelia-loves-react

I'm not even using the loader plugin you mentioned.

Here's how to wrap a third-party react component in an Aurelia custom element:

import React from 'react';
import ReactDOM from 'react-dom';
import ReactDatePicker from 'react-datepicker';
import { noView, bindable, inject } from 'aurelia-framework';

@noView(['react-datepicker/react-datepicker.css'])
@inject(Element)
export class DatePicker {
  @bindable selectedDate;
  @bindable onChange;

  constructor(element) {
    this.element = element;
  }

  selectedDateChanged() {
    this.render();
  }

  render() {
    ReactDOM.render(
      <ReactDatePicker
        selected={this.selectedDate}
        onChange={date => this.onChange({ date: date })}
      />,
      this.element
    );
  }

  // How to use native DOM events to pass the changed date
  /*render() {
    ReactDOM.render(
      <ReactDatePicker
        selected={this.selectedDate}
        onChange={date => {
          let event = new CustomEvent('change', { 'detail': date });
          // Dispatch the event.
          this.element.dispatchEvent(event);
        }
        }
      />,
      this.element
    );
  }*/
}

And here's how to do it while using a custom react component that is part of the Aurelia project:

import React from 'react';
import ReactDOM from 'react-dom';
import { noView, bindable, inject } from 'aurelia-framework';
import FormattedDate from '../react-components/formatted-date';

@noView()
@inject(Element)
export class ReactDate {
  @bindable date;
  @bindable format = 'dddd, MMMM D, YYYY';

  constructor(element) {
    this.element = element;
  }

  dateChanged() {
    this.render();
  }

  formatChanged() {
    this.render();
  }

  render() {
    ReactDOM.render(
      <FormattedDate 
        date={this.date}
        format={this.format}
      />,
      this.element
    );
  }
}

As you can see, it's pretty simple. I like doing it by hand rather than using the loader as I can set up databinding for each property so it works in a more "Aurelia-ey" way.