Tutorial part two (#453)

* note

* snippet placeholder

* add snippet exercise

Author: Rich-Harris

apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/02-reactive-classes/index.md

@@ -31,3 +31,5 @@ class Box {
 	// ...
 }
 ```
+
+> [!NOTE] In addition to `$state` and `$derived`, you can use `$state.raw` and `$derived.by` to define reactive fields.

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/+assets/app-a/src/lib/App.svelte

@@ -0,0 +1,35 @@
+<script>
+	let emoji = '🙈';
+	let description = 'see no evil';
+</script>
+
+<table>
+	<thead>
+		<tr>
+			<th>emoji</th>
+			<th>description</th>
+			<th>unicode escape sequence</th>
+			<th>html entity</th>
+		</tr>
+	</thead>
+
+	<tbody>
+		<tr>
+			<td>{emoji}</td>
+			<td>{description}</td>
+			<td>\u{emoji.charCodeAt(0).toString(16)}\u{emoji.charCodeAt(1).toString(16)}</td>
+			<td>&amp#{emoji.codePointAt(0)}</td>
+		</tr>
+	</tbody>
+</table>
+
+<style>
+	th, td {
+		padding: 0.5em;
+	}
+
+	td:nth-child(3),
+	td:nth-child(4) {
+		font-family: monospace;
+	}
+</style>

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/+assets/app-b/src/lib/App.svelte

@@ -0,0 +1,36 @@
+<table>
+	<thead>
+		<tr>
+			<th>emoji</th>
+			<th>description</th>
+			<th>unicode escape sequence</th>
+			<th>html entity</th>
+		</tr>
+	</thead>
+
+	<tbody>
+		{#snippet monkey(emoji, description)}
+			<tr>
+				<td>{emoji}</td>
+				<td>{description}</td>
+				<td>\u{emoji.charCodeAt(0).toString(16)}\u{emoji.charCodeAt(1).toString(16)}</td>
+				<td>&amp#{emoji.codePointAt(0)}</td>
+			</tr>
+		{/snippet}
+
+		{@render monkey('🙈', 'see no evil')}
+		{@render monkey('🙉', 'hear no evil')}
+		{@render monkey('🙊', 'speak no evil')}
+	</tbody>
+</table>
+
+<style>
+	th, td {
+		padding: 0.5em;
+	}
+
+	td:nth-child(3),
+	td:nth-child(4) {
+		font-family: monospace;
+	}
+</style>

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/index.md

@@ -0,0 +1,63 @@
+---
+title: Snippets and render tags
+---
+
+Snippets allow you to reuse content within a component, without extracting it out into a separate file.
+
+In this exercise, we're creating a table of the [three wise monkeys](https://en.wikipedia.org/wiki/Three_wise_monkeys), along with their unicode escape sequences and HTML entities. So far, we have but a single monkey.
+
+We could duplicate the markup, of course. Or we could create an array of `{ emoji, description }` objects and pass it into an `{#each ...}` block. But a neater solution is to encapsulate the markup in a reusable block.
+
+Begin by _declaring a snippet_:
+
+```svelte
+/// file: App.svelte
++++{#snippet monkey()}+++
+	<tr>
+		<td>{emoji}</td>
+		<td>see no evil</td>
+		<td>\u{emoji.charCodeAt(0).toString(16)}\u{emoji.charCodeAt(1).toString(16)}</td>
+		<td>&amp#{emoji.codePointAt(0)}</td>
+	</tr>
++++{/snippet}+++
+```
+
+The monkey is no longer visible until we _render_ it. Let's do that:
+
+```svelte
+/// file: App.svelte
+<tbody>
+	{#snippet monkey()}...{/snippet}
+
+	+++{@render monkey()}+++
+</tbody>
+```
+
+Before we can use the snippet for the rest of our monkeys, we need to pass data into the snippet. Snippets can have zero or more parameters:
+
+```svelte
+/// file: App.svelte
+<tbody>
+	+++{#snippet monkey(emoji, description)}...{/snippet}+++
+
+	+++{@render monkey('🙈', 'see no evil')}+++
+</tbody>
+```
+
+Add the rest of the monkeys:
+
+- `'🙈', 'see no evil'`
+- `'🙉', 'hear no evil'`
+- `'🙊', 'speak no evil'`
+
+Finally, delete the `<script>` block we no longer need it:
+
+```svelte
+/// file: App.svelte
+---<script>
+	let emoji = '🙈';
+	let description = 'see no evil';
+</script>---
+```
+
+> [!NOTE] Snippets can be declared anywhere in your component, but, like functions, are only visible to render tags in the same 'scope' or a child scope.

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-snippet-parameters/index.md

@@ -0,0 +1,3 @@
+---
+title: Snippet parameters
+---

apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/index.md

@@ -0,0 +1,5 @@
+---
+title: Reusing content
+scope: { 'prefix': '/src/lib/', 'name': 'src' }
+focus: /src/lib/App.svelte
+---