こんにちは！　株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「React」についてお伝えしていきます。

そもそもReactとは？

Reactは、Facebook社が開発した人気のあるJavaScriptライブラリであり、再利用可能なUIコンポーネントの構築に適しています。

ライブラリというのは、汎用性の高い関数やソースコードをまとめた場所という意味です。

Reactはコンポーネントベースの設計アプローチを採用しており、UIは再利用可能な独立したコンポーネントに分割されています。

コンポーネントには独自の状態があり、組み合わせて複雑なユーザーインターフェースの構築ができます。

Reactには仮想DOMを利用することでコンポーネントの更新とレンダリングのプロセスを最適化し、早いユーザーインターフェースを実現する事ができます。

Reactの概念

コンポーネント

Reactは、ユーザーインターフェースのロジックを含むモジュール式のコードブロックである「コンポーネント」を使用して構築されます。

Reactには2種類の関数コンポーネントとクラスコンポーネントがありますが、最新のReactでは関数コンポーネントがよく使用されています。

関数コンポーネントはJavaScriptの関数として宣言し、return文でUlを表示させています。

Reactではコンポーネントを使用してアプリケーションを構築します。

JSX

文法拡張と呼ばれ、HTMLタグを直接JavaScriptのスクリプトに記述する仕組みです。

Babelというライブラリを使用してコンパイルしています。

状態

状態とは、Reactコンポーネント内で変更される可能性のあるデータを指します。

これにより、コンポーネントが動的な情報を追跡し、ユーザーインターフェイスを更新できるようになります。

状態は通常、setStateメソッドを使用して管理します。

Props

Propsはプロパティの略で、親コンポーネントから子コンポーネントに渡す方法です。

仮想DOM

仮想DOMは、Reactのパフォーマンスを向上させる概念です。

変更したDOM(仮想)を実際のDOMに反映させるときに、関連したDOMとその下のDOMだけをレンダリングをする事によって、コンポーネントを効率的に更新およびレンダリングできるようになります。

仮想DOMを使わない場合は、全てのDOM要素がレンダリングされてスムーズなユーザー体験が得られません。

フック (関数コンポーネント)

フックは、関数コンポーネントで状態などのReact機能を使用できるようにする関数としてReactに導入されました。useStateやuseEffectなどのフックを使用すると、Reactアプリケーションの簡素化がされます。

Reactについては、以上となります。

興味を持った方は、Reactのチュートリアルをやってみてください。