Why isn't the fourth component rendering

Question

Sorry for the awful indentation but why isn't the fourth about component rendering. I've tried everything even tried to write about component in seperate file but the outcome is same. In the App.js third class component is about and I've exported and imported in index.js it like Rcomp1 component which renders fine .

App.js

import React, { Component } from 'react';

import 'font-awesome/css/font-awesome.min.css';
import { ProgressBar } from 'react-bootstrap';


import './App.css';
//everything css

var ele;
var col;
var f;

class App extends Component {
  constructor(props) {
    super(props);
    ele = this.props.imgUrl;
    col = this.props.colour;
  }

  render() {
    console.log(ele);
    var font = {
      fontFamily: "Times New Roman"
    }

    var divStyle = {
      backgroundColor: col,
      height: 390
    };

    var divs = {
      height: 390,
      backgroundColor: col
    };

    var newde = {
      backgroundImage: `url(${ele})`,
      height: 390
    };

    return (
      <div className="App">
        <div className="container-fluid">
          <div className="row" style={divs} >
            <div className="col-xs-6 " style={divStyle} >
              <div className='padding' style={newde}></div>
            </div>
            <div className="col-xs-6 Back">
              <p className="font">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

var c;

class Rcomp1 extends Component {
  constructor(props) {

    super(props);
    f = this.props.fa;
    c = this.props.colour;
  }

  render() {
    var tyle = {
      backgroundColor: this.props.bg,
      height: 360,
      color: c
    };

    return (
      <div>
        <div className='container-fluid'>
          <div className='row' style={{ height: 360 }}>
            <div className='col-xs-8 ' style={tyle}>
              <div className='marg marg3'>
                <p className='font2'><strong>Information about my skills.</strong></p>
                <p className='font2'><strong>{this.props.skill1}</strong></p>
                <ProgressBar className="wid" bsStyle="success" now={this.props.ski1} />
                <p className='font2'><strong>{this.props.skill2}</strong></p>
                <ProgressBar className="wid" bsStyle="success" now={this.props.ski2} />
                <p className='font2'><strong>{this.props.skill3}</strong></p>
                <ProgressBar className="wid" bsStyle="success" now={this.props.ski3} />
              </div>
            </div>
            <div className='col-xs-4' style={{ backgroundColor: this.props.bg, height: 360 }}>
              <div className='marg2  marg4' style={{ backgroundColor: this.props.bg }}>
                <i className={" fa fa-5x " + " " + f + " fs text-primary"} style={{ backgroundColor: this.props.bg }}></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

class about extends Component {
  render() {
    return (
      <div className='container-fluid'>
        hellow world
            <div className='col-xs-4'>
          Hello
            </div>
        <div className='col-xs-5'>
          World
            </div>
      </div>
    );
  }
}

export default App;
export { Rcomp1 };
export { about };

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Rcomp1 } from './App';
import { about } from './App';
import './index.css';
import r from './r.jpeg';
import { Navbar } from 'react-bootstrap';
import { NavbarHeader } from 'react-bootstrap';
import { DropdownButton } from 'react-bootstrap';
import { NavbarBrand } from 'react-bootstrap';
import { MenuItem } from 'react-bootstrap';
import { NavBarToggle } from 'react-bootstrap';
import { Nav } from 'react-bootstrap';
import { NavDropdown } from 'react-bootstrap';
import { NavItem } from 'react-bootstrap';

import 'font-awesome/css/font-awesome.min.css';

ReactDOM.render(
  <div><App imgUrl="https://www.hrii.tk/skate.webp" colour="#FA9F1B" />
    <Rcomp1 fa={"fa-linkedin"} colour={'#FFFFFF'} bg={'#263238'} skill1={'GITHUB'} ski1={25} skill2={'HTML5'} ski2={50} skill3={'BOOTSTRAP'} ski3={30} />
    <App imgUrl="https://www.hrii.tk/tri1.webp" colour='#3E384F' />
    <Rcomp1 fa={"fa-github-square"} colour={"#FFFFFF"} bg={'black'} skill1={'C/C++'} ski1={85} skill2={'PYTHON'} ski2={70} skill3={'JQUERY'} ski3={40} />
    <about />
  </div>,
  document.getElementById('root')
);

ReactDOM.render(
  <div style={{ backgroundColor: '#F99F1C' }}>
    <Navbar inverse collapseOnSelect className='fon'>
      <Navbar.Header>
        <Navbar.Brand>
          <a href="#brand" className='fon fon2'>Hrii.tk</a>
        </Navbar.Brand>
        <Navbar.Toggle />
      </Navbar.Header>
      <Navbar.Collapse>
        <Nav>
          <NavItem eventKey={1} href="#">
            Link
            </NavItem>
          <NavItem eventKey={2} href="#">
            Link
            </NavItem>
          <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
            <MenuItem eventKey={3.1}>Action</MenuItem>
            <MenuItem eventKey={3.2}>Another action</MenuItem>
            <MenuItem eventKey={3.3}>Something else here</MenuItem>
            <MenuItem divider />
            <MenuItem eventKey={3.3}>Separated link</MenuItem>
          </NavDropdown>
        </Nav>
        <Nav pullRight>
          <NavItem eventKey={1} href="#">
            Link Right
            </NavItem>
          <NavItem eventKey={2} href="#">
            Link Right
            </NavItem>
        </Nav>
      </Navbar.Collapse>
    </Navbar>;
  </div>,
  document.getElementById('navbar')
);

Answer 1

It's because all components MUST start with a capital letter! So if you change class about extends Component to class About extends Component, then it will work. You'll also need to update your export and imports to be <About />.