You are on page 1of 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