0% found this document useful (0 votes)
105 views

React To Svelte Cheatsheet

Svelte is a component-based framework for building user interfaces that compiles to plain JavaScript without relying on a virtual DOM. It uses a file extension of .svelte instead of .jsx. Key differences from React include: - Svelte uses interpolation syntax {expression} instead of JSX - Components are defined using HTML syntax with <script> tags instead of JavaScript functions - There is no equivalent to React props - values are passed directly via attributes - State is managed via the useState hook, but updates are synchronous rather than asynchronous - Other React hooks like useCallback and useRef have analogous functionality
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
105 views

React To Svelte Cheatsheet

Svelte is a component-based framework for building user interfaces that compiles to plain JavaScript without relying on a virtual DOM. It uses a file extension of .svelte instead of .jsx. Key differences from React include: - Svelte uses interpolation syntax {expression} instead of JSX - Components are defined using HTML syntax with <script> tags instead of JavaScript functions - There is no equivalent to React props - values are passed directly via attributes - State is managed via the useState hook, but updates are synchronous rather than asynchronous - Other React hooks like useCallback and useRef have analogous functionality
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

React → Svelte Cheatsheet v0.

By Joshua Nussbaum

Overview Rendering Hooks


File extension Interpolation useState()
MyComponent.jsx MyComponent.svelte {expression} {expression}
let [varName, setVarName] = useState(initialValue)

 let varName = initialValue

// mutate
// mutate

setVarName(newValue) varName = newValue


Content type Branching
Javascript HTML {#if condition}

if (condition) {

return ...
...

} {/if}
Synchronization useMemo()
if (condition) {
 {#if condition}

return ...
...
const memoized = useMemo(

Diffing with Virtual DOM at runtime. No virtual DOM. Compiled at build time. $: memoized = expression
} else {
{:else}
() => expression,

return ...
...
[dependencyA, dependencyB, ...]

} {/if} )

Components if (conditionA) {

return ...

{#if conditionA}

...

} else if (conditionB) {
{:else if conditionB}

return ...
...
useCallback()
} {/if}
Props const callback = useCallback(
No equivalent/not required.

{ condition ? a : b } { condition ? a : b }
() => { /* event handling here */ },
 Use a regular unwrapped

function Component({propA, propB}) {


<script>
 [dependencyA, dependencyB, ...]
 function instead.
}

export let propA, propB

</script>

// usage
<!-- usage -->

<Component
<Component
Iteration
propA={expressionA}
propA={expressionA}

propB={expressionB}/> propB={expressionB}/> <ul>
 <ul>
 useRef()


{list.map(item => {
 {#each list as item}

return <li>{item}</li>
 <li>{item}</li>


// define
 // define

})}
{/each}
const ref = useRef()

 let element


Event Handlers </ul> </ul>
// assign
// assign

<div onClick={handler}/>

<div on:click={handler}/>

// with index
<!-- with index -->
<div ref={ref}/>

 <div bind:this={element}


{list.map((item, index) => {
 {#each list as item, index}

const handler = event => { 
 <div on:click|preventDefault={handler}/>

...
 ...
// use
 // use

event.preventDefault()
})}

{/each}

const element = ref.current element


}

const handler = event => { 
 <div on:click|stopPropagation={handler}/> // with key


// with key

event.stopPropagation()
{list.map(item =>
 {#each list as item (item.key)}

} <div key={item.key}>...</div>
 <div>...</div>

)}

{/each} useReducer()
// define
 // define

const initialValue = {count: 0}

const initialValue = {count: 0}

Slots const store = writable(initialValue)

Raw HTML function reducer(state, action) {

switch (action.type) {
store.increment = () => {

function Button({children}){
 <button><slot/></button>

<div dangerouslySetInnerHTML={markup}/> {@html markup} case 'increment':


store.update(state => {

return <button>{children}</button>
return {count: state.count + 1}
return {count: state.count + 1}

<!-- use -->


case 'decrement':
})

<Button>Hello World!</Button>
return {count: state.count - 1}
}

// use
default:
store.decrement = () => {

<Button>Hello World!</Button> CSS classes throw new Error()


store.update(state => {

}
return {count: state.count - 1}

<div className=”snazzy”/>
<div class=”snazzy”/>
}

})

Named Slots <div className={var}/>


<div class={var}/>
}


<div className={condition ? ‘active’ : ‘’}/>

<div class:active={condition}/> const [state, dispatch] = useReducer(reducer,


function Layout({
<header><slot name=”top”/></header>
 initialValue)

left,
<aside><slot name=”left”/></aside>

right,
<aside><slot name=”right”/></aside>

// use value
 // use value



top,
<main><slot/></main>

children
{state.count}

 {$store.count}


}){

Style props
return (
// dispatch
 // dispatch

<>
<div style=”--color: {expr}”/>

<div style=”--color: {expr}”/>

 dispatch({type: ‘increment’}) store.increment()


<header>{top}</header>

<aside>{left}</aside>
 <-- for components -->

<aside>{right}</aside>
<MyComponent --color={expr}/>

<main>{children}</main>

</>)

<div style=”color: blue”/>


<div style=”color: blue”/>

<div style=”color: {expression}”/> <div style:color={expression}”/>


// usage
<!-- usage -->

<Layout
 <Layout>

top={<Navbar/>}
 <Navbar slot=”top”/>



left={<Sidebar/>}
 <Sidebar slot=”left”/>

right={<Ads/>}>
 <Ads slot=”right”/>
 Fragments
<Content/>
 <Content/>

</Layout> </Layout>
<React.Fragment>
No equivalent/not required, because
...
Svelte supports multiple root nodes.
</React.Fragment>



<!-- or -->

<>...</>

You might also like