- はじめに この章では、Reactコンポーネントについて学びます！コンポーネントはReactアプリケーションの基本要素です。GeekとGalが、コンポーネントを簡単で楽しい方法で理解するお手伝いをします！
やぁ！Reactコンポーネントについて学ぶ準備はできてる？🚀
うん！でも、Reactコンポーネントって一体何？
Reactコンポーネントはね、アプリのユーザーインターフェースの再利用可能なパーツみたいなものなの！コンポーネントを組み合わせて、より複雑なUIを作れるんだよ。
- Reactコンポーネント
コンポーネントは、JavaScriptの関数やクラスとして書かれるの。入力として"props"を受け取って、出力としてユーザーインターフェースの一部を返すの。
それで、"props"って何？
Propsは"properties"（プロパティ）の略で、コンポーネントに渡して見た目や動作をカスタマイズできる入力みたいなものなのよ！
これがReactのシンプルな関数型コンポーネントの例ね：
function Welcome(props) {
return <h1>こんにちは、{props.name}さん！</h1>;
}
なるほど！コンポーネントは、propsを受け取ってUI要素を返す関数なんだね！
その通り！コンポーネントを使うには、カスタムHTMLタグとして書くの。こんな感じで：
<Welcome name="Sara" />
おっ、HTMLタグみたいに見えるけど、実際はReactコンポーネントなんだね！
まさに！そして、propsを変えるだけでコンポーネントを再利用できるのよ！
- コンポーネントの組み合わせ
Reactコンポーネントの一番かっこいいところは、組み合わせられることなの。つまり、他のコンポーネントの中でコンポーネントを使えるってこと！
本当に？どうやって使うの？
使いたいコンポーネントを、他のコンポーネントの子要素として含めるだけなの。こんな感じでね：
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
わぉ、すごいね！コンポーネントを組み合わせて、もっと複雑なUIを作れるんだ！
その通り！それがReactコンポーネントのパワーなの！💪
- おわりに Reactコンポーネントは、アプリのユーザーインターフェースの再利用可能な部分です。JavaScriptの関数やクラスとして書かれ、見た目や動作をカスタマイズするためにpropsを渡すことができます。コンポーネントを組み合わせることで、複雑なUIを作りながらもコードを綺麗に保ち、保守性を高めることができます！😊