Импортировать компонент ReactJS из другого файла?

Я новичок в React. Хотите разработать приложение, используя небольшие компоненты в отдельных файлах и импортировать их в App.js

Я попытался, но не смог понять, что я делаю неправильно.

Вот мой 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>

Это мой App.js: (из каталога js/)

import MyComp from 'components/MyComp';

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

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

И это мой MyComp.js (из каталога js/components/)

class MyComp extends React.Component{

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

}

export default MyComp;

Если я попробую таким образом, я ничего не вижу. Если я создаю класс MyComp в App.js, он работает как шарм.

Любое предложение, что я делаю неправильно?

Ответ 1

По большей части, то, что у вас есть, должно работать, но я не совсем уверен, почему это не так. Я бы порекомендовал добавить "./" к месту импорта, но если это неверно, произойдет ошибка и он не исчезнет.

Позвольте мне опубликовать еще более простую версию, которая, как я знаю, работает:

./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;

Это должно быть все необходимое, чтобы это работало.

Если вы хотите сократить вышеупомянутое еще больше, удалив строку export в нижней части, менее традиционный подход будет определять класс как этот...

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

Ответ 2

Рекомендуемый способ разработки приложений React - использовать node, npm и create-react-app.

create-react-app сделает первоначальную настройку вашего проекта всем необходимым и готовым к работе. И, кроме всего прочего, импорт компонентов из других модулей будет работать как можно скорее.

Ответ 3

Вы должны добавить: импортировать React из 'Reaction'; к классу Application распространяется React.Component {...