deux composants peuvent afficher dans ReactJS

J'ai deux composants dans le même espace de travail dans ReactJS, mais une seule affichage

import React, { Component } from 'react';
import logo, { ReactComponent } from './logo.svg';
import './App.css';
import ReactDOM from "react-dom";
class App extends React.Component {
  render() { 
    let helloWorld = 'Welcome to good programming React';
     return ( 
      <div className="App">
         <h2> {helloWorld}</h2>
          </div>
           ); 
          }
}

ReactDOM.render(<App />, document.getElementById('root')); 
class   Form    extends React.Component {   
    constructor(props)  {       
    super(props)                
    this.state  =   {   username:   ''  }
    this.handleChange   =   this.handleChange.bind(this)
    this.handleSubmit   =   this.handleSubmit.bind(this)
  }
  handleChange(event)   {       
  this.setState({   value:  event.target.value  })  
  }
  handleSubmit(event)   {
  alert(this.state.username)
  event.preventDefault()    
  }
  render()  {   
  return    (   
  <form onSubmit={this.handleSubmit}>
        <input type="text" value={this.state.username}  onChange={this.handleChange} /> 
      <input    type="submit"   value="Submit"  />
      </form>               
      )     
    } 
  }
export default (App,Form)