CODEWITHSUNDEEP
javascriptreactjs
Omer
Omer

Reputation: 1796

Import ReactJS component from another file?

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?

Upvotes: 33

Views: 96909

Answers (5)

RichardB
RichardB

Reputation: 11

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.

Upvotes: 0

Mickey
Mickey

Reputation: 1

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

Upvotes: 0

blacktiago
blacktiago

Reputation: 393

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:

enter image description here

Upvotes: 1

Pinidbest
Pinidbest

Reputation: 4306

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

Upvotes: 0

HoldOffHunger
HoldOffHunger

Reputation: 20861

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

Upvotes: 28

Related Questions