【やってみよう！React.js】:React 要素とコンポーネントについて知る①

スクショで学ぶ、React.js

今回の記事の内容を一枚にまとめてみました。
とは言っても、内容が内容なので半分も埋まりませんでした。

次回の記事の内容を追加して、完成させます。

これまで

以下の記事では、React.js はコンポーネントという「部品」を作り、それらを組み合わせて画面を作る、ということを学びました。

React 要素について知る

今回は、以下の公式ドキュメントを参照して、React 要素とコンポーネントについて考えてみます。

要素のレンダー – React

React 要素 ≠ コンポーネント

さて、早速ですが公式ドキュメントの冒頭ではこのように書かれています。

要素とは React アプリケーションの最小単位の構成ブロックです。

そして、その少し後の「補足」ではこのように書かれています。

要素のことを、より広く知られている概念である “コンポーネント” と混同する人もいるかもしれません。

「React 要素とコンポーネントは違いまっせ！」ということなんですね。
では React 要素とは何か、答えはすぐ後に書かれています。

要素とはコンポーネントを “構成する” ものです。

立て続けに引用してしまいましたが、この一連の説明が全てでしょう。

じゃ、コンポーネントって？

React 要素は「コンポーネントを “構成する” もの」でした。
では、コンポーネントとは一体なんなんでしょう？

コンポーネントについてのドキュメントも見てみましょう。

コンポーネントと props – React

冒頭では以下のように書かれています。

コンポーネントにより UI を独立した再利用できる部品に分割し、部品それぞれを分離して考えることができるようになります。

この説明から、「再利用できる部品に分割したもの」という解釈もできますが、それはあくまで結果的にそうなっているというだけのこと。

ではコンポーネントとは一体何なのか？答えはそのすぐ下にありました。

概念的には、コンポーネントは JavaScript の関数と似ています。（“props” と呼ばれる）任意の入力を受け取り、画面上に表示すべきものを記述する React 要素を返します。

要するに、コンポーネントとは「任意の入力を受け取り、React 要素を返すもの」ということですね。

まとめ

さて、とても簡潔に書かれているドキュメントでしたので、引用するだけで終わってしまいましたが、まとめると以下のようになります。

React 要素：React アプリを構成する最小単位のブロック。コンポーネントを構成するもの。
コンポーネント：任意の入力を受け取り、React 要素を返すもの。

次回

さて、引用ばかりでこれでは記事としてよろしくないので、次回はコンポーネントについてもう少し掘り下げて考えてみます。