オンライン変換はとりあえずなので、実際の開発環境では下記の方法で変換をする事を推奨しています。インストールし、JSXコマンドを使用出来ます。requireをブラウザ上で使えるbrowserifyで、reactifyを使って変換することも出来るようです。}横道に反れましたが以下、とりあえずのhtmlとjsxです。</body></html>続いて読み込むtest.jsxを必要最小限用意します。JSXはDOM構造が視覚的に分かり易いので推奨されています。実行結果をpythonの簡易サーバーで確認します。Reactが表示されました。それぞれがspanで括られ、data-reactidでマッピングされています。これはDOMの親子関係が分かるように連番で付与されるようです。grunt,gulpと両方提供されているので好みに合わせて使用できます。grunt-reacthttps://www.npmjs.com/package/grunt-reactgulp-reacthttps://www.npmjs.com/package/gulp-reactさいごに深堀りできてなく恐縮ですがパッと見わかりやすい印象を受けました。htmlライクな見た目で分かり易いですが、フロント以外のメンバーがDOMの構造を変えたいと思ったらJSを触らなければいけないのがネックかもしれません。仮想DOMの処理が早いなどの実感を受けるサンプルを作成して実制作でも取り入れられるよう勉強したいと思います。コーディング担当のキテレツです。ネイティブアプリクロスプラットフォーム開発環境HerlockはJavaScriptを使用してワンソースでAndroid、iOSのネイティブアプリを開発することができる国内初のネイティブアプリ向けクロスプラットフォーム開発環境です。新規Webサービスから企業ブランディングを高めるコーポレートサイトまで、豊富な制作実績と技術でお客様のニーズに合わせたサイト制作を、企画、デザイン、構築、運用までワンストップで制作が可能となっております。×SNSでも情報配信中!ぜひご登録ください。Market花火大会シミュレーターSHARESHAREWeb制作・アプリ開発に関する、UI/UX情報、イラストテクニック、エンジニア向け情報をお届けしています。