Super expression must either be null or a function, not undefined - reactjs

Question

I'm a beginner at react.js.

I got this error:

Super expression must either be null or a function, not undefined

full error output in my browser chrome console:

Uncaught TypeError: Super expression must either be null or a function, not undefined at _inherits (bundle.js:21166) at bundle.js:21172 at Object.184.react (bundle.js:21196) at s (bundle.js:1) at e (bundle.js:1) at bundle.js:1

my codes:

const React=require('react');
const ReactDom=require('react-dom');

class App extends React .component{

    render(){
        return(
            <div>
                < Header />,
                < Main />,
                < Footer />
            </div>
        );
    }
}

class Header extends React .component{
    render(){
        return(
            <Header>
                <nav>
                    <h1>Header</h1>
                </nav>
            </Header>
        );
    }
}


class Main extends React .component{
    render(){
        return(
            <div>
                <p> text 1</p>
            </div>
        );
    }
}

class Footer extends React .component{
    render(){
        return(
            <h2>Footer</h2>
        );
    }
}

ReactDom .renderToStaticMarkup (<App /> ,document.getElementById('app'));

Answer 1

You should change React.component to React.Component capital C.
e.g-class main extends React.Component. In addition to that, remove the space between React. and Component

Answer 2

It seems that you're extending the classes wrong. It should be React.Component, not React.component