How do I integrate React with a non-trivial AngularJS app and existing grunt configurations?

I'm currently working on creating a new React component that needs to integrate with an existing Angular 1.x application, which itself already has its own build process centered around Grunt. At some point the app may be migrated to React entirely, but for now just this one component will be done in React.

The Angular app has an extensive build process built up around it using grunt, so any build of the new component has to be able to go through grunt as well.

So far, another developer has started developing the React component using a React starter kit which includes React, Webpack, Babel, a dev server that it can spin up, and various other bells and whistles.

This is where my initial stabs of research got me, as well as current roadblocks:

• It looks like ngReact will be a good tool to integrate a React component into the application.
• The current React setup can either spin up a dev server with an embedded build of the React app (with no real usable build file), or create a "production" build that's minified and ready to ship. This doesn't quite work, as I need it to create something consumable by the current app and ngReact.
• The React app is being bundled using Webpack. There is a grunt tool that can run webpack configs.

How can I put all these moving pieces together, to bundle the React components into the existing Angular app, while preserving as much of the existing configurations as possible?

Here are the steps that were needed to solve this problem (component/file names changed to protect the innocent):

1. Get Webpack to output a build that I could use later with ngReact. In webpack.config.js, I had to change output:{ path: 'build' } to build_react so that it wouldn't be later overwritten by the Angular build process. Also, in module.loaders, I had add the presets line seen below, in order to get it to output non-ES6, valid JavaScript:

   //Process JS with Babel.
   {
     test: /\.(js|jsx)$/,
     include: paths.appSrc,
     loader: 'babel-loader',
     query: {
       presets: ['env', 'react'],
     }
   }
   

2. Install grunt-webpack using npm, and configure it using a link to the webpack config file. This file gets pulled in to the grunt initConfig with all other similar configurations.

   //webpackConfig.js
   module.exports.name = 'webpack';
   const webpackConfig = require('../webpack.config.dev.js');
   
   /**
    * Pull in our react webpack build
    */
   module.exports.getConfiguration = function(grunt) {
       return {
           options: {
               stats: !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
           },
           prod: webpackConfig,
           dev: webpackConfig
       };
   };
   

3. Include react.js, react-dom.js, ng-react.min.js, and the bundle built in #1 in our index.html file. (These would later be concatenated into one file for a production build.) Crucially, the bundle has to get included after all the Angular files including all application .js files, so that the React component will have access to the angular object for the next step.

4. Add this line to the React component, so that ngReact will work: angular.module('angularModule').value('MyComponent', MyComponent);
5. Add the following to the Angular template where the React component will be included: <react-component name="MyComponent"></react-component>

After all these steps, it finally worked! Hopefully this will help someone put these steps together if anyone runs across this problem in the future.