Implementing ReactJS into Angular App

Question

I am working on a website and tried to include a ReactJS component and I'm doing it like so:

import React from "react";
import ReactDOM from "react-dom";
import Layout from "Layout.jsx";

const app = angular.module('myApp');

const reactDirective = app.directive('reactDirective', function() {

  return {
      template: '<div id="reactapp"></div>',
      link: function(scope, el, attrs){
          ReactDOM.render(<Layout/>, document.getElementById('reactapp'));
        }
    }
});

and the Layout.jsx

import React from 'react';
export default class Layout extends React.Component {
    constructor(props){
      super(props);
    }
    render() {
        return (
            <div>
                This is ReactJS
            </div>
        );
   }
}

However whenever it compiles, it gives me
ERROR in ./react-app.js Module not found: Error: Cannot resolve module 'layout.jsx'
Can anyone tell me what's wrong with my code?

Andy Ray · Accepted Answer · 2017-12-27 17:23:01Z

1

Imports of local files that don't live in node_modules have to be relative paths.

import Layout from "./Layout.jsx";

answered Dec 27, 2017 at 17:23

Andy Ray

32.3k16 gold badges114 silver badges151 bronze badges

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

Collectives™ on Stack Overflow

Implementing ReactJS into Angular App

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related