# Reactとは

Reactとは、Meta社が開発したWebサイト上のUIパーツを構築するためのJavaScriptライブラリで、現在最もフロントエンド開発で用いられてるライブラリになります。

ブラウザはHTMLから、**Document Object Model（DOM）**というツリー上のデータ構造を作成し、それをJavaScriptにて操作し、既存のDOMに新しい要素を加えたり、ユーザーのアクションによって見た目を変えることができます。

例えば、以下図のようなHTMLがあった際に、h1の背景色をJavaScriptにて変更することができます。まず、h1タグを取得するために、`docment.getElementById('title')`にて`id`が`title`のタグを取得します。取得したら、そのタグの`style.backgroundColor`というプロパティを上書きすることで、背景色を変更することができます。

<figure><img src="https://1869761657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUBbYqol4PMzZJggiMqV%2Fuploads%2Fei6WHJA466SI9bZ54gYF%2Freact12062.png?alt=media&#x26;token=415461af-3718-41e3-b045-ca29e0672cb2" alt=""><figcaption></figcaption></figure>

```javascript
const el = document.getElementById('title');
el.style.backgroundColor = '#ff0000';
```

しかし実務の場合、そういったJavaScriptでの変更が膨大で、管理していくのが難しくなります。Reactは上記のようなDOM操作を必要とせず、**Component(コンポーネント)**&#x3068;いう単位で、画面に表示される部品を一つのオブジェクトにまとめ、簡単にDOM変更を行うことができます。