Components and Props in React

Greeting.tsx

function Greeting(props:GreetingProps) {
    return (
        <p className="px-1 py-4 font-bold text-red-700">Hello {props.name}</p>
    );
}

export interface GreetingProps {
    name:string
}

export default Greeting;

App.tsx

import React from 'react';
import Greeting from "./components/Greeting";

function App() {
  return (
    <Greeting name={"Mahmood"}></Greeting>
  );
}

export default App;

References
https://reactjs.org/docs/components-and-props.html