how to use react component in angular js

Question

I made two apps one is for angularjs and one is to react. Now the problem is I include the react build in angularjs app and try to initialize the '' component but when I run the code it says Test is not defined.

Can someone help me with this or give me any idea how I can get out of this problem.

React Component:

import React from 'react';
import ReactDOM from 'react-dom';


  class Test extends React.Component {
    render() {
        return (
          <div>
            Hello
          </div>
        );
      }
   }

angular Js Code:

<!DOCTYPE html>
  <html>
   <head>
    <title></title>
   </head>
    <body ng-app="angular-app">

    <div id="root"></div>

    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>

    <script src="react/dist/build.js"></script>

    <script>
        ReactDOM.render(<Test/>, document.getElementById('root'));
    </script>
   </body>
</html>

Momen Zalabany · Accepted Answer · 2020-08-26 08:26:47Z

1

Thing is, you cannot use jsx inside browser, jsx is usually transpiled using Babel into JavaScript function calls.

So 1. <Test /> will never work inside browser, you need to Babel that.

You need to expose react to you angularjs, best way I can think of is

// In react, instead of exporting component, export a function that mount component in given HTML


Export default (elm) => ReactDOM.render(<Test/>, elm)

answered Aug 26, 2020 at 8:26

Momen Zalabany

9,03616 gold badges81 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Omid Nikrah · Accepted Answer · 2019-06-08 06:30:48Z

1

You should write the following code in your react app and then load your bundle file in angularJS app.

ReactDOM.render(<Test/>, document.getElementById('root'));

answered Jun 8, 2019 at 6:30

Omid Nikrah

2,4803 gold badges17 silver badges31 bronze badges

3 Comments

Ravinder Kumar Over a year ago

Is their any way to render from AngularJS app?

Paul Bota Over a year ago

You can use an iframe element

Ravinder Kumar Over a year ago

without iframe any other way?

Collectives™ on Stack Overflow

how to use react component in angular js

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related