Using React components in your Ember app
Tags: ember, javascript, react
Published: 2018-03-26 19:59:20

---
title: Using React components in your Ember app
published: true
tags: ember,emberjs,javascript,react
canonical_url: https://medium.com/@sivakumar_k/using-react-components-in-your-ember-app-8f7805d409b0
---

![](https://cdn-images-1.medium.com/max/1024/1*BSs196_7DmG5oPDW_RL4Ug.png)

> _Disclaimer:_ I’m a member of the ember.js learning team. This isn’t a react vs ember article. They’re both awesome.

What if a team working with Ember wants to reuse an internal component built by a React team? Or maybe you know and appreciate multiple front end tool sets? This article for them and for you, oh open-minded developer!

This is based on my team’s experience when working with an enterprise client who has these changes in production for about six months now. The only factor to watch out for is the bundle size by ensuring that duplicates of React libraries aren’t included the app.

Let’s start off by making our Ember project aware of JSX syntax and give it the power to compile JSX code. Run the following command in your Ember project:

```
npm install --save-dev babel-plugin-transform-class-properties babel-plugin-transform-react-jsx
```

In your ember-cli-build.js file, make the following changes:

{% gist https://gist.github.com/sivakumar-kailasam/c0229132c62cd37eb1eb64f2f7150907 %}

Next, we’ll need to enable [eslint](https://eslint.org/) to identify JSX code. Run the following command in your ember project:

```
npm install --save-dev eslint-plugin-babel eslint-plugin-react babel-eslint;
```

Make the following changes to your .eslintrc.js file,

{% gist https://gist.github.com/sivakumar-kailasam/94bfc592ee4ec0ab6834fb76bf27cfb8 %}

Add React & React DOM to our project by running,

```
npm install --save react react-dom
```

Then add the following changes to the ember-cli-build.js file:

{% gist https://gist.github.com/sivakumar-kailasam/3c52be125df3f294ad3c99f35d7dbd6a %}

Adding these imports will add React and ReactDOM global objects to our app. This is important because any React library we’ll import going forward will be expecting these globals to be available for their usage.

Let’s create vendor shims so that we can use es6 import syntax for these libraries. We’re doing this instead of using the amd transformation on the imports because the global objects aren’t created when you use the transformation.

Run the following commands & replace the contents of the generated files with the ones from the gist shown below. Then import them in the ember-cli-build.js file.

```
ember generate vendor-shim react ember generate vendor-shim react-dom
```

{% gist https://gist.github.com/sivakumar-kailasam/392b8a81a3a281b7a035ce16cd62e390 %}

Let’s create a base class that we can use to create our React component wrappers. The idea behind this is to render one React component inside one Ember component. Doing so will help keep these components [simple](https://www.infoq.com/presentations/Simple-Made-Easy). Create a file app/react-component.js with the following content.

{% gist https://gist.github.com/sivakumar-kailasam/2ac9867db9e6057fe83db0fbce3df651 %}

First let’s create the obligatory ‘_hello world’_ component by running ember g component hello-world with the content below,

{% gist https://gist.github.com/sivakumar-kailasam/365fc0e80e8187eb0a244081aa28951f %}

That was easy 🙂. Notice how we’re passing the value “React” to the React component on line 8, this could be an Ember component property. Now moving on to a more complex sample.

Let’s add [react-aria-modal](https://github.com/davidtheclark/react-aria-modal) to our app. Run npm install --save @sivakumar-kailasam/react-aria-modal and then make the following changes to the ember-cli-build.js file:

{% gist https://gist.github.com/sivakumar-kailasam/68f93facae07ebea8f3044e743b648ac %}

Now that we have it available to our app, let’s create the wrapper component.

ember g component aria-modal

{% gist https://gist.github.com/sivakumar-kailasam/8998f5f2e27f8aa42231da4a7996d4fa %}

This sample shows a way to bind methods between the React & Ember components. We’re updating the title that’s passed to the React component from within the Ember component’s methods & rerendering the react component on updates.

Notice in the recording below how the updates are immediately rerendered. That’s because these are incremental updates applied to the already rendered React component. Try the demo site linked at the end of this article to see for yourself.

![](https://cdn-images-1.medium.com/max/700/1*4qtG2MeHXMUl2JvfFp670Q.gif)

All of this might’ve made it look easy for you to set out to do this on your own. But there’s an important factor I haven’t mentioned so far 😅.

The React components that you want to import need to be available as UMD modules. You can learn about UMD and other module formats by reading [https://medium.freecodecamp.org/javascript-modules-a-beginner-s-guide-783f7d7a5fcc](https://medium.freecodecamp.org/javascript-modules-a-beginner-s-guide-783f7d7a5fcc)

I had to setup [rollup.js](https://rollupjs.org/guide/en) on a fork of react-aria-modal for this demo app to work. You can refer to [https://github.com/davidtheclark/react-aria-modal/compare/master...sivakumar-kailasam:master](https://github.com/davidtheclark/react-aria-modal/compare/master...sivakumar-kailasam:master) to find out what it might take to do so with rollup.

If your React component project uses [webpack](https://webpack.js.org/), you can refer to [https://github.com/bvaughn/react-virtualized](https://github.com/bvaughn/react-virtualized) for the webpack setup you’d need to generate multiple module formats as output.

You can see the deployed app at [https://sivakumar-kailasam.github.io/react-integration-sample/](https://sivakumar-kailasam.github.io/react-integration-sample/) & view the code shown in this blog at the repo below. Try viewing the app in both the Ember inspector & React dev tools for fun! 😎

[sivakumar-kailasam/react-integration-sample](https://github.com/sivakumar-kailasam/react-integration-sample)

_EDIT:_ [_Alex LaFroscia_](https://medium.com/u/60acf8b09399) _published an experimental addon_ [https://github.com/alexlafroscia/ember-cli-react](https://github.com/alexlafroscia/ember-cli-react) based on this article. This is why I ❤️the ember community!

If you like this article, follow me on twitter [@sivakumar\_k](https://twitter.com/sivakumar_k/)