Как импортировать реагирующий компонент? - PullRequest
Новая
       6

Как импортировать реагирующий компонент?

0 голосов
/ 28 октября 2019

У меня есть файл Main.js, который пытается импортировать Head.js: import Head from './Head.js';

Я уже пытался заключить его в квадратные скобки: import { Head } from... и все возможные способы обращения к ./Head.js, удаляя .js или ./.

В файле Head.js есть класс Head, и он экспортируется в соответствии с тем, что каждый сайт сообщает: export default Head;.

Но, когда я удаляю import Head from './Head.js'; и вставляю код Head.js поверх него, он работает, поэтому это должна быть не ошибка в коде, а ошибка при экспорте / импорте.

Дляболее подробно, я использую Xampp для запуска сайта в Windows 10. В папке моего проекта я запустил команды, которые ReactJs велит мне делать: 

npm init -y
npm install babel-cli@6 babel-preset-react-app@3
npx babel --watch src --out-dir . --presets react-app/prod

с папкой / src, гдея пишу код JavaScript.

Мой браузер выдает мне эту ошибку в консоли: 

SyntaxError: import declarations may only appear at top level of a module Main.js:9

Мой HTML-код (index.php): 

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="utf-8">
        <title>TestFlix</title>
        <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
        <link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>
        <link rel="stylesheet" href="css/styles.css"/>
    </head>
    <body>
        <div id="root"></div>
        <script src="Main.js"></script>
    </body>
</html>

МойMain.js: 

import Head from './Head.js';

class Main extends React.Component {
    render() {
        return(
            <div>
                <h1>teste</h1>
                <Head />
            </div>
        );
    }
}

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

My Head.js: 

class Head extends React.Component {
    render() {
        return(
            <h1>TEste</h1>
        );
    }
}

export default Head;
...