javascript - 无法导入 react js组件

Question

我试图将一个 react 组件导入 jsx 文件，但它抛出了这个异常:

这是我的主要代码:

import React, { Component } from "react";
import Sidebar from "./Sidebar";

class App extends Component{
    render(){
        return (
            <Sidebar/>
        );
    }
}

ReactDOM.render(
    <App />, 
    document.getElementById("root")
);

这是我的侧边栏组件:

import React, { Component } from "react";

export default class Sidebar extends Component{
    render(){
        return (
            <h1>Hello Sidebar</h1>
        );
    }
}

我的文件夹结构:

Answer 1

我发布了我知道确实有效的更简单的版本:

./index.js :

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

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

./组件/应用程序:

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