イイダリョウのブログ。【React】JSX事始め「すごいぞ!JSXもCDNで動いたんだ!」2020-01-12【React】JSX事始め「すごいぞ!JSXもCDNで動いたんだ!」JSReactの続きです。前回はReactの仮想DOMをCDNで体験しました。今回はJSXのコンパイルを同じくCDNで体験します。ReactといえばJSX!なイメージだったのでようやく一歩踏み入れた感。qiita.com前回のおさらい前回作ったものはこちら。CDNリンクのためCodePenで作れている。'こんにちは、りあくと。text);仮想DOMelmの文字が読み込まれて「こんにちは、りあくと。」が画面に表示される。」を参考に進めています。上記の例では仮想DOMがpタグ一つだが、これを入れ子構造の親子階層タグにするとどうなるか。'入れ子で作られた仮想DOMですこれは。text);変数elmのReact.createElement()の第3引数を配列に配列の中に入れ子でReact.createElement()を書く仮想DOMの階層上、並列な要素は同様に第3引数を配列にする属性(例:sectionのclass名.h2_elem)は第2引数の連想配列で指定するなお、子要素は配列で並列表現できるが一番外側の親要素は一つでなければならない。しても複数要素になる場合は全体をdivで囲う。class="text">読み込み中...</div></section>画面上のHTMLコードはこうなっている。<p>入れ子で作られた仮想DOMですこれは。</div></section>この方法で入れ子構造の親子階層を作ることができるが、JSコードのネストが深くてあまり直感的ではなくなってしまう...JSXとは何ぞや?ということで「そうだ、JSX使おう!」となったわけです!はい。ところでJSXとは何ぞや?JSXは、JavaScriptの構文に対する拡張である[11]。HTMLと外観が似ているが、JSXは多くの開発者がよく知っている構文を使用して、構造化されたコンポーネントを描画する方法を提供する。WikipediaこのJSXがHTMLの書式とソックリさん(細かい部分に違いはあるが)で、先ほどのネストの深い仮想DOMの階層をもっと直感的に表現することができる。エンジニアっぽいことを書くブログふむ。シンタックスは「構文」でextensionは「拡張」という意味なので「JSの拡張構文」といった意味合いか。CDNでJSXのライブラリを読み込むそんでもってJSXのライブラリがまたまたCDNで読み込めるようだ!これによってローカル開発環境なしにCodePenで体験ができる。クモのようにコツコツとBabelはES6以降の書式をES5にコンパイルするという理解だったがJSXのコンパイルも対応しているようだ!もう一つ注意点としてはJSコードを書く部分のscriptタグにbabelの属性を追記する。//JSXで書かれたコード</scirpt>こうしないとJSXで書かれた部分が認識されない。<”)になってしまった。<p>入れ子で作られた仮想DOMですこれは。text);変数elmを先ほどブラウザ画面でレンダリングされていたHTMLと同じ内容に差し替える。見た目がとてもシンプル!全体を囲っているカッコ()は無くても認識されるがJSXの境界をわかりやすくするために書いている。JSXでも一番外側のタグは一つだけなので一つにできない場合は全体をdivで囲う。JS」)を見るとこうなる。"JSXに埋め込まれた値ですこれは。text);やはりReact.createElement()のネストが入り組んでいて直感的ではない。JSXに値を埋め込むこのままだとJSの中にただHTMLを埋め込んでいるだけなのでもう少しJSらしい動きを体験したい。JSXの中に外側の変数の値を埋め込んで見る。CodePen.見た目はほとんど同じだがJSXの部分を変えている。"JSXに埋め込まれた値ですこれは。}}だったがReactは一重のようだ。JSXのタグの中に属性を埋めこむ今度はタグの中に属性を埋め込んでみる。aタグを作ってsrc属性に値を埋め込む。"JSXに埋め込まれた値ですこれは。変数urlにテキスト「https://www.google.com/」を代入リストをpタグに変更してaタグを入れるaタグのhref属性にurlを埋め込み、テキストにggrksを埋め込む。"で囲う必要がないのがポイント。JSXのタグにstyle属性でCSSスタイルを当てるCSSを設定する方法はいくつかある。外部のcssファイルをlink属性でリンクするstyleタグで囲った中にスタイルを書く一つ一つのタグの中にstyle属性でスタイルを書く通常は外部のcssファイルに書くことが多いが、Reactはタグの中にstyle属性で書くことが多いらしい。(昔のテーブルレイアウト時代を思い出す書き方だがスタイルの値は直書きではなく外部変数で共通化するため、メンテナンス上の不便はない)やってみたのがこちら。CodePen.aタグ「わからないことはググろう」にスタイルを当ててボタンにした。"JSXに埋め込まれた値ですこれは。text);変数ggrks_sに連想配列でスタイルを設定JSXのaタグのstyle属性にggrks_sを埋め込むスタイルはパッと見CSSにソックリだがよく見ると違いがある。Qiita最後にということでJSXの基本的な部分を事始めました。BabelのCDNリンクでコンパイルできることは今回初めて知りました!JSXは実際に始める前はJSコードの中にHTMLコードが組み込まれていることに違和感を感じていたのですが、こうしてReact.createElement()の書式と比較してみるとやはりJSXの方がシンプルでわかりやすいと感じました。それに基本はDOMの階層構造のテンプレートなんだな、とイメージできました。次回はJSXに関数を組み込んでみようと思います。JSフレームワークReact、はじめました。先日、Youtubeで初ライブ配信を行いました!いつも愛用している...2019-08-25【Vue.js】UIフレームワーク「Vuetify」をCDNリンクで事始めたVue.jsの続きでず。前回まではコンポーネントについて触れまし...2018-11-06【Vue.js】axiosでJSONファイルを読み込む(酒が飲めるぞ!編)Vue.jsシリーズの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。