都内のIT企業でデザイナー兼フロントエンジニア（見習い）をやってます。
前職ではHTML、CSS、PHPを触ってた僕にとってReactの壁は厚い。。。。
そんな経験からReactってこういうものなんだよ！！！ってことをまとめておきます。

#そもそもReactってなんぞや？
おそらくですが、Reactってなんなん？？って初学者はめちゃめちゃいると思ってます。
僕自身がそうだったこと、前職同期に話しても分かってもらえなかったことからなんとなく想像してます。
というわけでまずはReactってなんぞや？って話から。

とりあえず、公式です、お納めください。
React

とまあ、アクセスしていただいてなんとなくわかる方もいるかもわかりませんが、
Reactってユーザインターフェース構築のための JavaScript ライブラリなんですねぇ〜〜。

世間でいうところのUIをいい感じにすることに特化したJSのライブラリということなわけです。
ライブラリっていうのはLibraryっていうように図書館みたいな感じ。
よく使うよねっていうものをまとめて、使えるようにしてくれています。

だから、利用者である我々はそのライブラリに準じた書き方をすることでライブラリにある機能を使用することができるようになっています。（実際は）
Reactはその中でもJSでUIを構築していくのに便利なものを提供してくれているライブラリということです。

ライブラリは当然Reactだけではないので、何を使うかは所属している組織だったり用途によって検討して決定すれば良いかと思っています。

#具体的にReactは何をしてくれるの？
じゃあ、Reactがそういうライブラリなんだ〜〜ってのは分かってもらえたと仮定しまして。
Reactを使うと、HTMLをごりっごり書くのと何が違うの？？って思わない人はいないと思います、僕も正直そう思ってました。

でも正直、すんげぇ捗るからトライしてみて欲しいなぁて思うんで、React初学者の僕でさえ「これええなぁ」って思ったことを書きたいなって思います。

#コンポーネントって考え方

コンポーネントはComponentなんですが、直訳すると構成子と訳すことができます。
そう、ウェブサイトやサービスを組んでいく中で繰り返し使用される構成要素があるじゃないですか。

これHTMLとかで書いていくと

<a class="button">
  お申し込みはこちら
</a>

にみたいなことにして、

.button {
  display: block;
  width: 300px;
  padding: 10px 50px;
}

みたいなスタイルをつけるってのをたくさん書かなくちゃいけないわけです。
書かなくてなんとかすることもできんのかな？？って思ってはいますが、調べてません。

でも、Reactだったらこれをコンポーネントとして定義しておくことができるんで、一度作成したらそれを呼び出して使用することができます。
スタイルもコンポーネントに対して行うことができるので、一括で変更することができます。
僕はここに感動を覚えました、楽やし管理楽やな〜〜って。

#業務分担みたいな考え方
Reactはそもそも、ユーザインターフェース構築のための JavaScript ライブラリってだけあって
状態を保持したりだとかは業務範囲じゃなくて、描画していくことが業務範囲だそうです。
いわゆるビューを作っていく部分ですかね。

「でも、ぶっちゃけ状態保持したりできないなら実務で使えないんじゃ。。。」
ってなったらしく、そこからfluxってアーキテクチャが生まれて、Reactでも状態管理ができるようになったんですね。

このfluxってアーキテクチャが僕はすごくスッキリしていて好きで、また今度かければいいなって思うんですが
すんごいざっくり言うともうフォルダを役割で分けちゃって、そこに各役割を担当するファイルを置いて書いていきましょう！！みたいな感じ。

そのスッキリさが気に入っています。
初学者の僕にとって関数とかが入り乱れてると頭ごちゃごちゃになるんで。。。

#他にもたくさんいいことがあるから勉強していきます
上司からも言われていることなんですが、まだまだReactにはすごい機能が盛り沢山です。
Hooksだったり。

そこら辺はまだ理解できてないから今後の課題にしていくとします。