Svelte from React Components

When converting a React component to a Svelte component there are many common changes that are needed. This page summarizes the most common of these.

Copy the JavaScript code into a <script> element in the Svelte component.
Copy the topmost returned JSX to the HTML portion of the Svelte component.
Copy the CSS into a <style> element in the Svelte component.
In JSX elements that specify a className prop, change it to class.
Change style attribute values from objects to strings. For example, replace {backgroundColor: tan, color: red} with "background-color: tan; color: red".
In JSX elements that specify event handing (such as onClick), change it to an on directive (such as on:click).
Change {condition && jsx} to {#if condition}html{/if}.
Change {condition ? trueJsx : falseJsx} to {#if condition}trueHtml{:else}falseHtml{/if}.
Change {array.map(element => jsx)} to {#each array as element}html{/each}.
Change {array.map((element, index) => jsx)} to {#each array as element, index}html{/each}.
Change uses of the useState hook to just use a variable.
Change uses of the useRef hook to use bind:this={ref}.
Change uses of the useEffect hook that should only run on mount to use onMount.
Change uses of the useEffect hook that should only run on mount and update to use onMount and afterUpdate.
Change uses of the useEffect hook that should only run when certain variables change to a reactive statement.
If something isn’t updating properly after a prop value change, you probably forgot to use $: somewhere.