React：React とは

初めに

　React は、Web サイトや Web アプリの UI 部分を開発する際に活用する JavaScript ライブラリです。本記事では、React の特徴やできること、苦手なことなどをまとめます。

Index

初めに
Index
React とは
React の特徴
React でできること
参考

React とは

　React は、Meta（旧 Facebook）とコミュニティによって開発されている Web サイトや Web アプリの UI 部分を開発する際に活用する JavaScript ライブラリです。コンポーネントベースのアーキテクチャを採用しており、UI を小さな再利用可能な部品（コンポーネント）に分割します。React.js や ReactJS といわれることもあります。

　Instagram や Skype なども React を使って作られているようです。

React の特徴

コンポーネントベース

　React では UI を、コンポーネントと呼ばれる部品を使って構築できます。Thumbnail、LikeButton、Videoといった React コンポーネントを書き、それらを組み合わせて画面やページやアプリの全体を組み立てていきます。

仮想DOM

　DOM（Document Object Model）は、マークアップがなされたリソース（Document）をリソース要素（Object）の木構造（Model）で表現し操作可能にする仕組み、またそのモデルのことです。

　Chrome の開発者ツールの Elements タブで DOM ツリーを見てみます

　Document が最上位、その下に Root 要素として html 要素、その下に head 要素と body 要素があることがわかります。マークアップされたドキュメントが要素の木構造で表現されています。

　React における仮想 DOM とは、情報を受け取ってもすぐにはブラウザの描画を行わず、まずはバーチャルなDOM（プログラム的に作成された仮のDOM）を構築することを指します。そして、構築された仮想 DOM の内容を元に HTML を作成し、実際の DOM(リアル DOM)に同期されます。このプロセスは差分検出処理（reconciliation）と呼ばれます。
　
　通常は、変更箇所が1か所でも DOM 全体を再構築しますが、仮想 DOM により変更箇所があった差分だけリアル DOM に反映することで、変更を最小限にし、ページ表示の高速化を図ります。

JSX

　JSX（JavaScript XML）は、JavaScript の構文拡張で、HTML のような記法で React コンポーネントを記述できるようにします。JSX は、React のコンポーネントがどのように表示されるかを定義します。

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>Hello World</h1>;
};

ReactDOM.render(<App />, document.getElementById('root'));

　このコードでは、まず react および react-dom をインポートしています。次に、App というコンポーネントを定義し、その中で<h1>要素内に "Hello World" を記述しています。最後に、ReactDOM.render() メソッドを使って、<App />コンポーネントをDOMに描画しています。ReactDOM.render() は、第一引数に表示したいコンポーネント、第二引数に描画先の DOM 要素を受け取ります。