Reactについて理解したこと・・・その1
学んだこと
マークアップ+ロジックからReact要素へ
最も基本的なウェブ開発は、HTML、JavaScriptの開発ですが、HTMLのようなものをマークアップ、JavaScriptのように動的な処理を行うものを、ロジックと呼ぶようです。
先日まで学んでいた、Node.js + Ejs も例外ではなく、テンプレートと、それをレンダリングしたり動的な処理をするJavaScriptで構成されてました。
Reactはコンポーネント(React 要素:React Element)という、マークアップとロジックの両方の役割を持つものを作るそう。
バニラのReactは、 React.createElement()でDOMのタグや、タグに持たせるアドレスなどを指定して生成するよう。
このあたりの解説は、下記サイトを参考にさせていただきました。
DOMの生成
作ったReact要素は ReactDOM.render() でHTMLに変換されます。 Ejsみたいにテンプレートをレンダリングするのではなく、JavaScriptからHTMLが生成されるという点においてすごくパワフルな感じがします。
JSXとは
Reactの公式で学習をしようとしたところ、突如として「JSXの導入」という章が出てきました。JSXはJavaScript構文の拡張版で、Reactと合わせて使用しますとのこと。素のReactでは普通開発せず、JSXを使うそうです。
まだこれから読むのですが、JSXを使うとこういう差があるという記事が次のサイト様にあります。
素のReactと違って、ロジックとマークアップが疎結合してるんだというのがよく分かる書き方になりました。
まとめ
素のReactのイメージと、なぜJSXを使うのか?雰囲気がわかりました。
公式の目次に従いつつ、逐一情報を調べて行こうと思います。
残業のせいでこんな進捗でした。明日こそは…うう。