超初心者向け！5分でわかるReact.jsの基礎の基礎

どうも、~~Rubyエンジニア目指して修行中~~フYuta（@yuta）です！

今回は、~~エンジニア業界で話題沸騰中(わだいふっとうちゅう)~~現在ではフロントエンドのフレームワークとして主流の一つであるJavascriptフレームワーク、Reactについて取り上げています。

今回の記事の対象者
まずはReact.jsの基礎の基礎から学ぶ
React.jsにおけるコンポーネントの仕組み
React.jsのベース部分！コンテナとコンポーネント
getElementByIdってなに?
最後に

今回の記事の対象者

「よくReactって最近聞くけどなんだろう」と気になっている方
「オンラインレッスンで学んだけど、難しい用語ばっかりで意味がわからない」とお悩みの初心者さん

もしあなたが、「スキマ時間にサクッとReactの概要を知りたい」なら、一読する価値があるでしょう。

まずはReact.jsの基礎の基礎から学ぶ

Reactは、Angular・Vue.jsなどと同じ、JavaScriptMVCフレームワークの一種です。
MVCとは、アプリケーションを構成するレイヤー構造のことで、Model – View – Controllerをさします。
Reactは、コンポーネントと呼ばれる小さなUIの部品を組み合わせて、巨大なアプリケーションを作成することを得意としています。

Javascript初学者にとって難しい単語が並んでいますね。まず、「DOMってなに？」と思った人も多いと思います。
ググってみると、Document Object Model(ドキュメント・オブジェクト・モデル)の略とのこと。

DOMのメリットは、Javascriptのコードを通じてHTMLやCSSを編集できることです。

個人開発や少人数での共同開発のシーンで、少ない労力でコードの編集や修正ができそうです。詳しい解説をしたサイトを見つけたので、乗せておきます。

JavaScript初心者でもすぐわかる！DOMとは何か？
JavaScrip超初心者によるJavaScript入門講座

例えば、今これを読んでいるあなたが使っているカバンも、ファスナーやストラップなどを細かいパーツを組み合わせて作られていますよね。

それと同じで、ReactもJavascriptで書かれたパーツをたくさん組み合わせることで、大規模なアプリを作成することが可能なんです。

React自体はあくまでビュー画面を使いやすくするためのものなので、RailsやCakePHPといったサーバーサイドフレームワークとの組み合わせも相性バツグン。

Reactの実用例は非常に多く、実はあの任天堂もNINTENDO eShopではReactを採用しているようですよ。