Carousel.js

import React from "react";

class Carousel extends React.Component {
  render() {
    return (
      <>
        <h1>{this.props.product}</h1>
      </>
    );
  }
}

export default Carousel;

Practice.js

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import ClassComponent from "./components/ClassComponent";
import Carousel from "./components/Carousel";
import Subtitle from "./components/Subtitle";

function App() {
  return (
    <>
      <ClassComponent title="Hola Juani" />
      <ClassComponent title="Hola CourseIt" />
      <Subtitle subtitle="Curso de Front-End Avanzado" />
      <ClassComponent title="Hola Juani" />
      <ClassComponent title="Hola CourseIt" />

      <div className="Carousel">
        <Carousel product="Producto 1" />
        <Carousel product="Producto 2" />
        <Carousel product="Producto 3" />
      </div>
    </>
  );
}

export default App;

Subtitle.js

import React from "react";

class SubtitleComponent extends React.Component {
  render() {
    return <h2>{this.props.subtitle}</h2>;
  }
}

export default SubtitleComponent;

Title.js

import React from "react";

class ClassComponent extends React.Component {
  handleChange() {
    console.log("");
  }
  render() {
    return (
     
      <>
        <h1>{this.props.title}</h1>
      </>
    );
  }
}

export default ClassComponent;