How to import multiple components from app.js in react?

Question

React

There is app.js which contains two components:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  
  render() {
    return (
      <div className="app">
        какой-то текст.
      </div>
    );
  }
}

export default App;

class Gap extends Component {
  
  render() {
    return (
      <div className="apps">
        какой-то текст 2
      </div>
    );
  }
}

and index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {Gap} from './App';
import registerServiceWorker from './registerServiceWorker';


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

registerServiceWorker();

how do i render the Gap component?
The question is rather too primitive, but at the output I can not get the desired result.
That is, App -> id root
and Gap in id example.

Answer 1

app.js
In general, Gap is better to take out in a separate file.