You Can't Make Children "Type Safe" in React & TypeScript
Matt PocockMatt is a well-regarded TypeScript expert known for his ability to demystify complex TypeScript concepts. If you've worked with TypeScript and JSX for enough time, you'll probably have run into a situation where you want to restrict a component's children to be of a certain type. Let's say you're working on a Select component that takes Option components as children. You want to make su
Origins of JSX and Why It Exists
Origins of JSX and Why It Exists As if plain JavaScript wasn't complex enough already… Often, JSX is described as allowing you to write HTML inside JavaScript. That might not make sense for you at first, and rightfully so — both languages serve different purposes and merging them might seem confusing. But JSX is not a mix of HTML and JavaScript. It's just plain JavaScript with some clever syntax t
Vue3でtsx firstができるか検証する
ふと、Vue3 で tsx な関数コンポーネントを定義しつつ、stateful に扱えるのかというのが気になった。今年の頭くらいではできなかったはずだが、VueMacros にある機能を用いれば可能なのでは？という話。VueMacros は Vue の RFC 的なコンパイラマクロ機能を実験的に試せるライブラリで、reactivityTransform が本体側から削除されて VueMacros でのサポートとなったことで名前を知った人もいるかもしれない。 今回使うのは以下のマクロ。 https://vue-macros.sxzz.moe/macros/setup-component.html defineSetupComponent を使えば、ts,tsx ファイルで他のマクロ(defineProps等)を記述できる。ドキュメントにはないが、script setup に変換されるのであれ
Crank.js
What is Crank?Crank is a JavaScript / TypeScript library for building websites and applications. It is a framework where components are defined with plain old functions, including async and generator functions, which yield and return JSX elements. Why is Crank “Just JavaScript?”Many web frameworks claim to be “just JavaScript.” Few have as strong a claim as Crank. It starts with the idea that you
Vue + JSX + Nuxt Composition API で最高のフロント開発体験 - ANDPAD Tech Blog
はじめに ANDPADでフロントエンドの開発を担当している小泉です。 前回、約3ヶ月前にVue Composition APIをチームで導入して得られたメリットという記事を書かせて頂きました。 その後、今年の5月頃からまた新たなプロダクトの立ち上げを担当する機会があり、フロントの技術選定についていろいろ検討する中で、Vue.jsでもJSXを使って書けること、かなり導入しやすくなっていることを知りました。 そこで、Nuxt Composition API + TSXという組み合わせを採用してみたところ、かなり使いやすく、Vue と React のいいとこ取りができて最高 なのではないかとさえ思いました。 この記事では、そんなVue + TSX の導入方法と、メリット・デメリット、そして使う際のTipsをいくつか紹介しています。今後のフロントエンドの技術選定や、Vue + JSXでの開発に興味
ep.82 Vue 3のためのTSXという新しい選択肢 | UIT INSIDE
新規プロジェクトでVue 3とTSXを導入した感想について、@spring_raining が @changhee.kim と @daisuke.yamamoto に聞きました。 Vue 3にTSXを導入した経緯 TSXとは？ TypeScript + JSX Vue 3では特に追加のプラグイン無くTSXが利用できる Composition APIのsetupで、TSXで書いたRender functionを返す 参考: ep.39 Vue 3 Study 『Render function で React の世界を覗いてみる』 templateに対するTypeScriptの型補完に不満を感じていた UIデザインに対するフロントエンドエンジニアの裁量が大きく、templateを利用するメリットが少なかった もしかしてただ使ってみたかっただけ？ Vue 3+TSXの開発体験/Vue 2やtem
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
2020/08/25 の #v_tokyo11 で話した登壇スライドです。
Nano JSX • Lightweight 1kB JSX library
What Nano JSX is designed to build ultra fast MPAs and SPAs using JSX. It uses a different approach than other JSX libraries like React, Preact or Inferno. Nano JSX is really close to the DOM. There is no Virtual DOM and you can manipulate the DOM as you want. You can even call Nano.render() inside a Component, which then renders some JSX code to manage another part of your app. You have full cont
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - huozhi/sugar-high: ✏️ Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped
GitHub - joe-sky/jsx-sfc: A SFC like React function component API for managing CSS-in-JS and static members.
GitHub - BuilderIO/mitosis: Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more.
Vue 3 + TSX (JSX) の環境作成（Vite 使用）