ReactでHello Worldをする前に...

#概要
業務でReactを扱わせていただく機会が増え、ただコーディングできるだけではなく、__『しっかりReactの中身を理解したい』__と思い、まずは簡単にですが自分がReactについて調べたことをまとめたいと思います。この他にも、Reactを扱う上で__この知識は抑えておけ！__というものがございましたら、キーワードや参考サイトなどのご教授をよろしくお願いいたします。

前回の記事
__[ReactでHelloWorldをしてみよう！](https://qiita.com/micropig3402/items/b90afc78f439f9bec81a)__

続きはこちら
__[ReactのJSXについて理解を深めよう！](https://qiita.com/micropig3402/items/9d44536c40522363dd09)__

#Reactとは
WebアプリケーションのUIを実装するためのJavaScriptライブラリーです。
2013年にSNSで有名なFacebook社より公開され、2017年にMITにライセンスが変更されました。
<img width="1280" alt="スクリーンショット 2019-04-13 21.09.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/034daf46-b480-5e69-525b-963e0ae24c1c.png">

#使用例
Qiitaはもちろんのこと多くの有名なサービスで使用されているようです。

###[Reactの公式ページ](https://reactjs.org/)
<img width="1280" alt="スクリーンショット 2019-04-13 19.28.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/c4c22781-f135-d65e-f472-74d48a889597.png">

###[facebook](https://www.facebook.com/)
<img width="668" alt="スクリーンショット 2019-04-13 19.33.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/f341b5d7-3553-643e-7d78-57353d1b371b.png">


###[udemy](https://www.udemy.com/)
<img width="1280" alt="スクリーンショット 2019-04-13 19.29.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/3f4aae4d-ad0a-1c9d-51ac-a49dc6e00765.png">

###[slack](https://slack.com/intl/ja-jp/)
<img width="1280" alt="スクリーンショット 2019-04-13 19.28.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/986eb69d-dea6-441c-7029-e463baeec485.png">

###[Qiita](https://ja.wikipedia.org/wiki/Qiita)
<img width="1280" alt="スクリーンショット 2019-04-13 19.34.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/e0885696-edca-8d1e-cc19-d748297e039d.png">

###[NETFLIX](https://www.netflix.com/jp/)
<img width="1280" alt="スクリーンショット 2019-04-13 19.27.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/0ab48981-d92e-a4f9-b7f3-d87f0d574c97.png">

###[Airbnb](https://www.airbnb.jp/)
<img width="1280" alt="スクリーンショット 2019-04-13 19.26.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/a0fc4563-03ad-d9d3-38e6-b278f1516591.png">

#Reactは『はやい』
###DOM(Document Object Model)
いきなり__仮想DOM__について書くのではなく、まずは、__DOM(Document Object Model)__に関して簡単にご説明させていただきたいと思います。一言で言うと、__『HTMLやXMLで作られたドキュメントをプログラム（JavaScript）から直接操作するための仕組み』__のことです。ブラウザでページを見る時に__DOM__は作られます。詳しくは__[こちら](https://eng-entrance.com/what-is-dom)__から。

Webブラウザでページを表示するとき、従来は基本的に受け取った情報を基に毎回１からDOMを作成しブラウザに描画を行うことが多く、ページの表示が遅くなってしまいます...
<img width="500" alt="スクリーンショット 2019-04-13 20.36.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/07e9ab64-6ad2-1048-ebe7-7472e2455438.png">
画像：https://www.odorikoblog.net/entry/internet/

これを克服しようと考え出されたのがReactで実装されている__仮想DOM（virutual DOM）__です！

###仮想DOM（virutual DOM）
実際のDOMと対になる仮のDOMのことで、DOMよりも__はやく__作れるように設計されています。

Reactでは、情報を受け取ってもすぐにDOMを作らずに、仮想DOM（virutual DOM）を作ります。そして、変更前の仮想DOMと変更後の仮想DOMを比較し、変更のあった箇所だけDOMを再構築し__常に最小のコストでWebページをレンダリングできる__ようになり、非常に高速に動作します。
<img width="661" alt="スクリーンショット 2019-04-13 20.40.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/2f533285-6a8a-602d-41b1-c68ec33903e0.png">
画像：https://speakerdeck.com/risagon/reactha-hayai?slide=13

#もうjQuery（ジェイクエリー）はいらない！？
このような記事『__[You Don't Need jQuery](https://qiita.com/tatesuke/items/b9548dd484b01b139b74)__』を見つけました。
しかし、もちろんReactが常に万能なわけではないようです。

 >複雑で動的なアプリほど向いているけど、HTMLが主役で動的な要素が少ないサイトや1日でコーディングが終わるようなサイトは、jQueryで特に困りません。大雑把ですが、作ろうとしているものが「記事（HTMLが9でJavaScriptが1）」なのか「アプリ（HTMLが1でJavaScriptが9）」なのかで分けるという指針でいいと思います。もちろんReactが向いているのは後者。普段の仕事内容によって「もう一生jQuery要らない」って人もいれば「一生jQueryしか要らない」って人もいていいと思います。

作りたいサービスによっては__jQuery__の方が簡単に実装できることもあるようですので、__React__と__jQuery__それぞれのメリット、デメリットをしっかり把握した上で今後の開発に取り組んでいきたいと思います！



#リファレンス
- [JavaScript初心者でもすぐわかる！DOMとは何か？](https://eng-entrance.com/what-is-dom)
- [なぜ仮想DOMという概念が俺達の魂を震えさせるのか](https://qiita.com/mizchi/items/4d25bc26def1719d52e6)
- [VirtualDOMの仕事ってなに？(Reactの表示速度がはやい理由)](https://qiita.com/risagon/items/019942c60e9c3e6c05a5)
- [jQueryってなに？超初心者向け入門講座](https://webkikaku.co.jp/blog/webdesign/jquery_start/)
- [Reactを使うとなぜjQueryが要らなくなるのか](https://qiita.com/naruto/items/fdb61bc743395f8d8faf)
- [You Don't Need jQuery](https://qiita.com/tatesuke/items/b9548dd484b01b139b74)