Props

./components/ColorfulMessage.jsx

import React from "react";

// ColorfulMessageコンポーネントを定義する
// 引数としてpropsを受け取る
export const ColorfulMessage = (props) => {
 // propsオブジェクトから分割代入でcolorとchildrenを受け取る
 const { color, children } = props;
 const contentStyle = {
  color,
  fontSize: "18px"
 };
 return <p style={contentStyle}>{children}</p>;
};

./App.jsx

import React from "react";
// ColorfulMessageコンポーネントをインポートする
import { ColorfulMessage } from "./components/ColorfulMessage";

const App = () => {
 // ボタンクリックで呼び出すアロー関数を定義する
 const onClickButton = () => alert();

 return (
  <> 
   <h1>こんにちは！</h1>
   <!-- ColorfulMessageコンポーネントにcolorというPropsを渡す -->
   <ColorfulMessage color="blue">お元気ですか？</ColorfulMessage>
   <ColorfulMessage color="pink">元気です！</ColorfulMessage>
   <button onClick={onClickButton}>ボタン</button>
  </>
 );
};

export default App;

まとめ

Propsとはコンポーネントに対して渡す引数のようなもの。
コンポーネントタグで囲んだ要素はpropsオブジェクトのchildrenプロパティとして受け取ることができる。