React has two types of components function component and class components. The component composed together to form an upper-level component.

Function vs class component

function components are defined as the javascript function
where the pros parameter contains the property of the component.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

The class components are defined as the class and are extended with the react component.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Composition of the component

the component can be combined together to form an upper-level component.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

Make the component as much as you can split it. If you do that you can reuse the component in others so split it.