JSXを使う - deno-ja

JSXを使う

Deno@v0.20.0 (2019/10/8) からJSXがサポートされました

.tsxと.jsxで記述されたファイルはJSXとして解釈され実行されます

Denoデフォルトのtsconfig.jsonのオプションは、

jsx: react

jsxFactory: React.createElement

になっています

そのため、ブラウザJSと同様にjsxファイルではReactをimportすることでJSXが利用できるようになります

Reactはjspm.ioから読み込むのが（今の所）かんたんです

code:index.tsx

const View: React.FC<{title: string}> = ({ title, children }) => (

<html>

<head>

<title>{title}</title>

</head>

<body>

{children}

</body>

</html>

);

console.log(ReactDOMServer.renderToString(<View title="deno">land</View>));

Reactの型定義ファイルがないので、まだ使うには不便がありそうです

Deno用に変換された型定義を公開してくださっている方がいますのでJavaScriptモジュールに型を適用する方法で動作させることができます

型定義がないためか現在だと.tsxだとコンパイルエラーで動作しなさそうですyuta0801.icon

Denoからそのまま使える型定義ファイルがあったので書き換えたのとコードが壊れてたので修正しましたkuuote.icon

code:jsx

export function Hello(props) {

return (

<div>Hello, {props.name}</div>

)

}