アジェンダ

１．Reactについて

２．Reactの導入

３．Reactの実装

４．まとめ

１．Reactについて

JavaScriptライブラリ。類似のライブラリにjQuery、Vue.js等がある。つまりHTMLの画面上で動的に見せたいときに利用される。
■Reactの特徴
・ソースをコンパイルする必要がある
（そのため開発環境の作成が必要）
・React内でのHTML部分はJSXという書き方で書く（＝JavaScriptとHTMLが混ざったような書き方）
　⇒複雑なUIを作るのが得意。
・誤解を恐れずに言えば、JavaScript版のWicketのような実装になる

２．Reactの導入

■Reactの導入にはいくつかの方法がある。

1.の導入方法はjQueryと同様の方法。Reactを使えるが本当に初歩のことしかできません。JSXが使えず、何より処理負担が大きいためサービスを作るにあたって実用的ではない。
2.は開発環境を手軽に作成できる用。
3.についてはReactを使っていく上で、必要になるNode.jsやBabelを自力で導入していく。既存のシステムに組み込むときにはこの方法。
babel　・・・新しいJavaScriptの形式を今のサービスでも対応できるように書き換えるもの。
Node.js ・・・javaScriptをサーバーサイドでも動かせるようにできるプラットフォーム。
npm　・・・Node.jsを利用するにあたっての必要な情報を取りまとめて動かす

導入

①Node.jsのインストール
以下の公式サイトからdownload＆Install
https://nodejs.org/ja/

②create-react-appをインストール
コマンドプロント上で
npm install -g create-react-app

③プロジェクトの作成
任意のパスに移動し、
create-react-app <プロジェクト名>

※プロジェクトの作成上の注意
以下のプロジェクト名はエラーになる模様
・react
・react-dom
・react-scripts

④プロジェクトのスタート
作成したプロジェクトの直下に移動し、npm start

⑤ブラウザが立ち上がる

３．Reactの実装

ソースコードの説明

コードを修正（＆保存）すると自動でリロードされる

実装について注意点

renderメソッドを必ず実装しなくてはならず、return できるコンポーネントは一つしか指定できない。

イメージタグ等、HTMLでは"/"で閉じなくても表示できるが、Reactではエラーになる。

Reactによるコーディングの基本

StateとPropsについて

State（状態）	Props（プロパティ）
可変のデータ	不変のデータ
コンポーネントによって保持	親から渡される
変更可	変更不可
プライベートであるべき	デフォルト値の設定と検証が可能

Steteの詳細

Propsの詳細

まとめ

■Reactの感想
・jQueryとは比較にならないほど別物で、学習コストが高かった。
・HTML を更新する必要がある場合（＝画面の変化が大きいもの）は便利そう。
・実際の運用面を考慮すると、React、Babel、Node.jsのバージョン不整合等が起きる可能性もあるので導入メリットが大きいとは思えなかった。

参照サイト

https://qiita.com/KKoh/items/8aa1bf0bb3673e8e2455
https://qiita.com/maron8676/items/4457b4d70be6db260eee
https://tech-brook.com/525/
https://tech-brook.com/558/
https://qiita.com/tomi_linka/items/6563eacd88e63bda5de3
https://qiita.com/kyrieleison/items/78b3295ff3f37969ab50
https://codezine.jp/article/detail/9928