STUDY_LOG_KOTA

IoT, Webプログラミングなどの学習記録をします。

Reactについて理解したこと・・・その1

f:id:kota_ly:20220126003310p:plain

学んだこと

マークアップ+ロジックからReact要素へ

最も基本的なウェブ開発は、HTML、JavaScriptの開発ですが、HTMLのようなものをマークアップJavaScriptのように動的な処理を行うものを、ロジックと呼ぶようです。

先日まで学んでいた、Node.js + Ejs も例外ではなく、テンプレートと、それをレンダリングしたり動的な処理をするJavaScriptで構成されてました。

Reactはコンポーネント(React 要素:React Element)という、マークアップとロジックの両方の役割を持つものを作るそう。
バニラのReactは、 React.createElement()でDOMのタグや、タグに持たせるアドレスなどを指定して生成するよう。

このあたりの解説は、下記サイトを参考にさせていただきました。

react.keicode.com

DOMの生成

作ったReact要素は ReactDOM.render() でHTMLに変換されます。 Ejsみたいにテンプレートをレンダリングするのではなく、JavaScriptからHTMLが生成されるという点においてすごくパワフルな感じがします。

JSXとは

Reactの公式で学習をしようとしたところ、突如として「JSXの導入」という章が出てきました。JSXはJavaScript構文の拡張版で、Reactと合わせて使用しますとのこと。素のReactでは普通開発せず、JSXを使うそうです。

まだこれから読むのですが、JSXを使うとこういう差があるという記事が次のサイト様にあります。

react.keicode.com

素のReactと違って、ロジックとマークアップ疎結合してるんだというのがよく分かる書き方になりました。

まとめ

素のReactのイメージと、なぜJSXを使うのか?雰囲気がわかりました。
公式の目次に従いつつ、逐一情報を調べて行こうと思います。

残業のせいでこんな進捗でした。明日こそは…うう。