イイダリョウのブログ。React事始め「すごいぞ!ReactはCDNで動いたんだ!」2019-12-31React事始め「すごいぞ!ReactはCDNで動いたんだ!」JS新シリーズ。JSフレームワークReact、はじめました。今回は初回ということで、環境構築なしにCDNリンクでReactの仮想DOMを初体験してみます。qiita.com三大フレームワークの一つReactを事始める以前の記事で触れたJS三大フレームワーク「Angular」「React」「Vue.js」。この記事にもあるように、自分はそのうちのVue.jsを事始めていた。敷居が低そうという理由だった。クモのようにコツコツと今後、仕事でReactも扱うことになりそうなため、そろそろReactも事始めたい。Nuxt.js超入門」とほぼ同じような構成で、最後はFirebaseでDBと連携したWebアプリを作るところまで行きそう。購入!読んでみると先にVue.jsをやっていたおかげで「あ、コレはVueでいるアレだな」みたいな連想が効いて理解がしやすい。なしにCDNリンクだけで始められるらしい!(←これがVue.jsを選択した大きな理由だった)いやー、知らなかったなー。今回Reactでやりたい作例をネイティブJSの「DOM操作」で再現してみた。CodePen.タイトル「りあくと事始め」の下に「ネイティブJSで書き換え」というテキストがある。class="text">読み込み中...</div></section>テキストは.text'で囲っていて、中身は「読み込み中...」。画面上は「ネイティブJSで書き換え」になっている。画面上のHTMLコードはこうなっている。</div></section>.textの中にpタグが入れ子になっていて、その中身が「ネイティブJSで書き換え」。これはネイティブJSのDOM操作で実現している。変数p:createElement()メソッドでpタグを生成pの中身textContentオブジェクト「ネイティブJSで書き換え」という文字列を入れるtextの中身textContentオブジェクトに元々のあった文字列「読み込み中...」を空にするtextにappendChild()メソッドでpを追加これらのオブジェクトやメソッドはネイティブJS組み込みのもの。pタグを追加したいためinnerHTMLオブジェクトではなくappendChild()を使う。Qiita一応、ネイティブJSで実現はできるんだが、これがだんだんと複雑になっていくと状況の把握が困難になっていくため、Reactの「仮想DOM」を使う。ReactをCDNで事始めるReactはSSR(サーバサイドレンダリング)のイメージが強かったので、Node.jsの開発環境じゃないと触れないと思っていた。したら、なんとVue.jsと同様CDNリンクでも始められた!(知らなかった)HTMLに下記のjsファイルをリンクする。ReactReactで仮想DOMを作るということでCodePenでできる!やってみた。CodePen.「読み込み中...」が「ネイティブJSで書き換え」になっている。HTMLも.textの中にpタグが入れ子になっている。'こんにちは、りあくと。変数elm:値はReact.createElement()関数React.createElement()でエレメント作成。引数はp、第二引数は連想配列{}で中身は空、第三引数は文字列「こんにちは、りあくと。」ReactDOM.render()でレンダリング。引数はelm、第二引数はtextReact.createElement()はエレメント(要素)を作成する。);今回は属性は追加しないので空。ReactDOM.render()でレンダリング(変換)する。DOM);これで、pの中にelmのエレメントが入る。次にカウントのイベントを仕込んでみる。1」の要素をクリックするとカウントの数値が上がる。onclick='Oshite();'>読み込み中...</div></section>.textにonclick属性を追加。値はOshite()関数onclickはネイティブJSのイベント!最近はイベントリスナで書くことが多く懐かしい。クモのようにコツコツと値のOshite()関数の設定はJSコードに書いてある。変数elm:React.createElement()でエレメント作成。→」とcounterReactDOM.render()でレンダリング。」にはこうあったReactの表示更新の基本は「更新の必要が生じたら、仮想DOMという仕組みのエレメントを作ってレンダリングする」というものです。'.textをクリックするたびにReactDOM.render()によって仮想DOMがレンダリングされていることがイメージできた。終わりにということで、2019年の大晦日にようやくReactの仮想DOMを初体験しました!まだJSXやコンポーネントなどReactらしいことはやれていないですが、来年以降も引き続きやっていきます。Next.jsによるWebアプリやReactNativeによるモバイルアプリなども作っていきたし!本年のブログは以上になります。来年もよろしくお願いいたします。export)でどんなことができるのか事始めてみたVue.jsやNuxt.jsを理解する上で重要なJSの「モジュール」という...2019-08-14【Vue.js】コンポーネント事始め(グローバル登録とローカル登録)Vue.jsシリーズの続きです。前回まではlocalSltrageとの連携で...2019-08-09【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-3)Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと...2019-08-04【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-2)Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと...2018-11-06【Vue.js】axiosでJSONファイルを読み込む(酒が飲めるぞ!編)Vue.jsシリーズの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。