{"url":"https://www.pandanoir.info/entry/2020/09/04/234806","provider_name":"Hatena Blog","blog_url":"https://www.pandanoir.info/","type":"rich","provider_url":"https://hatena.blog","image_url":null,"published":"2020-09-04 23:48:06","version":"1.0","height":"190","categories":["React","esbuild","JavaScript","TypeScript"],"author_name":"panda_noir","width":"100%","description":"esbuild \u306f\u30d7\u30e9\u30b0\u30a4\u30f3\u306a\u3057\u3067 JSX\u30fbTSX\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3067\u304d\u308b\u304b\u3089\u3001React \u306e\u30d7\u30ec\u30a4\u30b0\u30e9\u30a6\u30f3\u30c9\u304c\u3059\u3050\u4f5c\u308c\u308b\uff01\uff01 $ npm init --yes $ npm i esbuild react react-dom $ esbuild src/main.tsx --bundle '--define:process.env.NODE_ENV=\"development\"' --outfile=out.js \u578b\u30c1\u30a7\u30c3\u30af\u304c\u4e0d\u8981\u306a\u3089 typescript \u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u3089\u3044\u3089\u306a\u3044\uff01\uff01\uff01\uff01tsconfig.json \u306a\u3093\u3066\u8981\u3089\u306a\u304b\u3063\u305f\u3093\u3060\uff01\uff01\uff01 import React, {render} from\u2026","blog_title":"Panda Noir","title":"esbuild \u306a\u3089 React \u306e playground \u304c5\u79d2\u3067\u51fa\u6765\u308b\uff01\uff01\uff01\uff01\uff01","author_url":"https://blog.hatena.ne.jp/panda_noir/","html":"<iframe src=\"https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.pandanoir.info%2Fentry%2F2020%2F09%2F04%2F234806\" title=\"esbuild \u306a\u3089 React \u306e playground \u304c5\u79d2\u3067\u51fa\u6765\u308b\uff01\uff01\uff01\uff01\uff01 - Panda Noir\" class=\"embed-card embed-blogcard\" scrolling=\"no\" frameborder=\"0\" style=\"display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;\"></iframe>"}