I'm new to React.js and am trying to use it to build myself a website. What I'm trying to do is to nest a child component within a parent component; the parent component should be rendered in the main page with the child component nested inside. I've included an example below of my attempt.

My approach thus far has been to

1. Create the child component in 'childComponent.js'
2. Export that child component as 'childComponent'
3. Import 'childComponent' to parent component
4. Render 'childComponent' in that parent component
5. Export that parent component as 'parentComponent'
6. Import 'parentComponent' to 'index.js'
7. Render 'parentComponent' in 'index.js'

The problem here is that 'childComponent' is never visible in my React app. Am I taking the wrong approach here? Is there a fundamental mechanic that I'm not understanding?

Thanks in advance!!

--

The child component (childComponent.js):

import React, { Component } from 'react';
import './childComponent.css';

class childComponent extends Component {
  render() {
    return (
      <div className="child-component">
        <span>Hello World</span>
      </div>
    );
  }
}

export default childComponent

childComponent.css:

.child-component {
  width: 100vw;
  height: 300pt;
  background-color: #F4F4F4;
  display: flex block;
  justify-content: center;
  align-items: center;
  align-content: center;
}

The parent component (parentComponent.js):

import React, { Component } from 'react';
import childComponent from './childComponent.js';
import './parentComponent.css';

class parentComponent extends Component {
  render() {
    return (
      <div className="parent-component">
        <childComponent></childComponent>
      </div>
    );
  }
}

export default parentComponent;

The main page (index.js):

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

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