Import ReactJS component from another file?

For the most part, what you have should work, but I'm not quite sure why it doesn't. I would recommend adding "./" to the import location, but if that was incorrect, it would error out and not silently go away.

Allow me to post an even simpler version which I know does work:

./index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import Application from './components/Application'

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

./components/Application :

import React from 'react';

class Application extends React.Component {
  render() {
    return (
      <div className="App">
        My Application!
      </div>
    );
  }
}

export default Application;

This should be everything needed to make it work.

If you want to shorten the above even more, by removing the export line at the bottom, a less traditional approach would be defining the class like this...

export default class Application extends React.Component {...}

Try with

./components/MyComp

if you are using visual studio code, you could explore your components from any .js file by start typing ./ like this: