React のコンポーネント周りの用語ってごっちゃごちゃになった経験はありませんか? 友人と話すときなどはなんとなくのニュアンスで伝わるので気にしていなかったのですが、型注釈つけるときやコードリーディングするときに言葉の定義がわからなくなって何回も調べるといったことをよくやるのでこれを機に整理しようと思います。 本記事では JSX 以外にも createElement 記法の知識も要するので、自信がない方は公式やどうして JSX を使ってもエラーにならないのか?をご覧ください。 ここでは React のドキュメント JSX Elements Components TypeScript の型定義 JSX.Element ReactElement DetailedReactHTMLElement DOMElement FunctionComponent Component ReactNode
![Reactのコンポーネント周りの用語を整理する](https://cdn-ak-scissors.b.st-hatena.com/image/square/02bec579a89dc2b06330ac665159f6526aa7c471/height=288;version=1;width=512/https%3A%2F%2Fblog.ojisan.io%2Fstatic%2Fc6a1b0f39a05a0d0c7840f870a7afeca%2F0448c%2Fvisual.png)