Back to articles
Mitosis Has a Free Write-Once Component Compiler — Here's How to Use It

Mitosis Has a Free Write-Once Component Compiler — Here's How to Use It

via Dev.to ReactAlex Spinov

Building a design system? You need React, Vue, Svelte, AND Angular components. Mitosis lets you write a component once — it compiles to all frameworks automatically. What Is Mitosis? Mitosis is a tool that compiles components written in a JSX-like syntax to React, Vue, Svelte, Angular, Qwik, Solid, and more. Write once, run everywhere. Quick Start npm install @builder.io/mitosis-cli // src/components/Counter.lite.tsx import { useState } from ' @builder.io/mitosis ' ; export default function Counter () { const [ count , setCount ] = useState ( 0 ); return ( < div > < p > Count: { count } </ p > < button onClick = { () => setCount ( count + 1 ) } > Increment </ button > </ div > ); } Output Examples Compiles to React import { useState } from ' react ' ; export default function Counter () { const [ count , setCount ] = useState ( 0 ); return ( < div > < p > Count: { count } </ p > < button onClick = { () => setCount ( count + 1 ) } > Increment </ button > </ div > ); } Compiles to Vue 3 <

Continue reading on Dev.to React

Opens in a new tab

Read Full Article
6 views

Related Articles