Unable to render child component in App.js using React

Question

I am fairly new to React and am having trouble rendering a component in App.js. After much googling I still don't know why I am just getting a blank white page in the browser instead of a printed piece of text as shown in component1.js. Here's my code:

component1.js

import React from 'react';

class component1 extends React.Component {
    render() {
        return (
            <div>
                <h1>It's a bit chilly out there</h1>
            </div>
        );
    }
}

export default component1;

App.js

import React, { Component } from 'react';
import {component1} from './component1.js';

class App extends React.component{

    render() {
        return (
            <div>
                <component1 />
            </div>
        );
    }
}
export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

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

Could anyone please steer me towards the right path and tell me what I am doing wrong here?

Thanks in advance.

Does this answer your question? [ReactJS component names must begin with capital letters?](https://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters) — Daan, May 22 '20 at 14:55

aquinq · Accepted Answer · 2020-05-22T15:20:28.550

3

Wrong case :

class App extends React.Component
------------------------↑

Also, component1 must be imported as a default import (not a named import) with a capital letter :

import Component1 from './component1.js';

edited May 22 '20 at 15:20

answered May 22 '20 at 14:55

aquinq

1,318
7
18

Unable to render child component in App.js using React

1 Answers1