10

As a beginner, I am trying to render default react landing page from header.js into index.js. Please help me with an explanation where am I wrong Index.js - 

import React from 'react';
import ReactDOM from 'react-dom';
import './header.css';
import Header from './header';
import registerServiceWorker from './registerServiceWorker';

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

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

header.js - 

import React from 'react';
import ReactDOM from 'react-dom';
import './header.css';
import registerServiceWorker from './registerServiceWorker';

class Header extends Component {
    render() {
      return (
        <div className="App">
          <header className="App-header">
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
        </div>
      );
    }
  }

Error - 

./src/index.js
  Line 7:  'Component' is not defined  no-undef
Nirav Pardiwala
  • 109
  • 1
  • 1
  • 4
  • 19
    because you forgot to import that, either use `React.Component` in place of `Component` or import it like this: `import React, { Component } from 'react'` – Mayank Shukla Jul 16 '18 at 04:10
  • Yes, you are correct, I forgot to Import Component and export my HeaderJS component as Default. Issue Fixed – Nirav Pardiwala Jul 16 '18 at 12:32

0 Answers0