组件未定义 // React 和 Webpack

Question

I'm building a React App that will pull from Opendota's api and display the heroes to me. This is my first time working with API's. I build the App from scratch, so I didn't use CRA (create-react-app).

This is my App.js

import React from 'react';
import {hot} from "react-hot-loader";
import Heroes from "./components/Heroes"

class App extends Component {
    render() {
        return (
            <Heroes heroes={this.state.heroes} />
        )
    }

    state = {
        heroes: []
    };

    componentDidMount() {
        fetch('https://api.opendota.com/api/heroes')
            .then(res => res.json())
            .then((data) => {
                this.setState({ heroes: data })
            })
            .catch(console.log)
    }
}


export default hot(module)(App);

Heroes.js

import React from 'react'

const Heroes = ({heroes}) => {
    return (
        <div>
            <h1>Hero List</h1>
            {heroes.map((hero) => (
                <div>
                    <div>
                        <h5>{hero.name}</h5>
                        <h6>{hero.id}</h6>

                    </div>
                </div>
            ))}
        </div>
    )
};

export default Heroes

Just looking for an answer that will point me in the right direction.

Answer 1

You have not imported Component from react.So yo must have to import Component from 'react' .so your code will be looks like

import React,{Component} from 'react';
import {hot} from "react-hot-loader";
import Heroes from "./components/Heroes"

class App extends Component {
   render() {
      return (
          <Heroes heroes={this.state.heroes} />
      )
   }

   state = {
      heroes: []
   };

   componentDidMount() {
      fetch('https://api.opendota.com/api/heroes')
        .then(res => res.json())
        .then((data) => {
            this.setState({ heroes: data })
        })
        .catch(console.log)
    }
   }


 export default hot(module)(App);

Answer 2

The way to work with component of React

import React, {Component} from 'react';
class App extends Component{}

other way if you don't import, directly import

import React from 'react';
class App extends React.Component{}