Components are basic building block of a react application. In react, there are two types of component functional component and class Component. Here we will discuss functional components.

Define a Functional Component

functional component that can be defined as a javascript function.
the props in the function going to contain the property we want to pass to the component.

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

Use of functional component.

you can define the function inside other components embedding the function name as a tag, like Welcome as <Welcome/>.

you can pass the property as an attribute of the component tag.

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

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