Import ReactJS component from another file?

Question

I'm new to React. Want to develop an app using little components in separate files and import them to my App.js

I tried but not be able to figure out what I'm doing wrong.

Here is my html:

<!DOCTYPE html>
<html>
<head>
    <title>App</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>

<script type="text/babel" src="js/App.js"></script>

</body>
</html>

This is my App.js: (From js/ directory)

import MyComp from 'components/MyComp';

class App extends React.Component {
    render() {
        return (
            <MyComp />
        )
    }
}

ReactDOM.render(
    <App />,
    document.body
);

And this is my MyComp.js (From js/components/ directory)

class MyComp extends React.Component{

    render() {
        return (
            <div>
                Hello World!
            </div>
        )
    }

}

export default MyComp;

If I try this way I see nothing. Whereas if I create MyComp class in App.js it works like a charm.

Any suggestion what am I doing wrong?

HoldOffHunger · Accepted Answer · 2018-08-23 17:11:40Z

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 {...}

blacktiago · Accepted Answer · 2020-02-15 23:46:38Z

1

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:

answered Feb 15, 2020 at 23:46

blacktiago

4033 silver badges15 bronze badges

Comments

Pinidbest · Accepted Answer · 2018-12-11 12:25:11Z

0

you should add: import React from 'react'; to the class Application extends React.Component {...

answered Dec 11, 2018 at 12:25

Pinidbest

4,3865 gold badges18 silver badges18 bronze badges

Comments

Mickey · Accepted Answer · 2022-12-16 11:22:06Z

0

Also, if you want to import components from another directory, use "../" Example: import Navigation from "../MainPage/Navigation";

answered Dec 16, 2022 at 11:22

Mickey

1

Comments

RichardB · Accepted Answer · 2024-01-23 02:51:16Z

I found an answer to this from Nhum here - Unable to import JS files with a project using CDN links (react, reactDOM)

If you're using CDN links to get React you have to define the modules you want to import in the head of the html and use data-plugins="transform-es2015-modules-umd" in all the script elements with react code. Applied here:

<!DOCTYPE html>
<html>
<head>
    <title>App</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script type="text/babel" src="js/components/MyComp.js" data-plugins="transform-es2015-modules-umd"></script>
</head>
<body>

<script type="text/babel" src="js/App.js" data-plugins="transform-es2015-modules-umd"></script>

</body>
</html>

Then the React code should run successfully.

Collectives™ on Stack Overflow

Import ReactJS component from another file?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related