App.jsx

import Child from './Child'
import { ClassComp, FunctionComp, ArrowFunctionComp } from './Components'

function Hello() {
  return <h1>Hello</h1>
}

function App() {

  return (
    <>
      <Hello />
      <h2>World</h2>
      <Child />
      <ClassComp />
      <FunctionComp />
      <ArrowFunctionComp />
    </>
  )
}

export default App

Child.jsx

function Child() {

  return (
    <p>
      This is a
      <br />
      child component
    </p>
  )
}

export default Child

Components.jsx

import React, { Component } from 'react';

class ClassComp extends Component {
  render() {
    return <p>Class Comp</p>;
  }
}

function FunctionComp() {
  return <p>Function Comp</p>;
}

const ArrowFunctionComp = () => {
  return <p>Arrow Function Comp</p>;
};

export { ClassComp, FunctionComp, ArrowFunctionComp };