# Svelte

## เริ่มต้นที่การสร้าง Project

```bash
npm create svelte@latest my-project

create-svelte version 6.0.10

┌  Welcome to SvelteKit!
│
◆  Which Svelte app template?
│  ○ SvelteKit demo app
│  ● Skeleton project (Barebones scaffolding for your new SvelteKit app)
│  ○ Library project
└

┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  Skeleton project
│
◆  Add type checking with TypeScript?
│  ○ Yes, using JavaScript with JSDoc comments
│  ● Yes, using TypeScript syntax
│  ○ No
└

Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  Skeleton project
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◆  Select additional options (use arrow keys/space bar)
│  ◻ Add ESLint for code linting
│  ◻ Add Prettier for code formatting
│  ◻ Add Playwright for browser testing
│  ◻ Add Vitest for unit testing
│  ◼ Try the Svelte 5 preview (unstable!)
└

✔ Typescript
  Inside Svelte components, use <script lang="ts">

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-add

Next steps:
  1: cd my-project
  2: npm install
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat
```

หลังจากนั้นให้เข้าไปที่ my-project

```bash
cd my-project
```

จากนั้นติดตั้ง Tailwindcss

```bash
npx --yes svelte-add@latest tailwindcss
```

จากนั้นก็ใช้คำสั่ง npm install เพื่อติดตั้ง Package ที่จำเป็น

```bash
npm install
```

จากนั้นลองรันโปรแกรม โดยใช้คำสั่ง `npm run dev -- --open`

```bash
npm run dev -- --open
```

จากนั้นจะขึ้นหน้าเว็บ `localhost:5173` แสดงข้อความ 2 บรรทัดนี้ (แบบตัวอักษรเท่ากัน) แสดงว่ารันโปรแกรมเรียบร้อย

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1711464771044/df742d6a-8a45-4eca-9df6-c6c10207acdd.png align="center")

ขั้นต่อไป เริ่มเขียนโปรแกรม โดยให้กลับมาที่ Terminal แล้วกด Ctrl+C เพื่อหยุดการรันโปรแกรม

## เริ่มเขียน Code

หลังจากที่สร้างโปรเจคและลองรันจนเรียบร้อยแล้ว ต่อไปให้เปิด VS Code โดยใช้คำสั่ง `code .` หรือเปิดโปรแกรม Code แล้ว Open Folder my-project ที่สร้างไว้

```bash
code .
```

ที่ด้านซ้ายของ VS Code ให้เข้าไปที่ Folder `/src/routes/` แล้วเปิดไฟล์ `+page.svelte` จะพบ Code ดังนี้

```svelte
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
```

### เริ่มต้นด้วยการใส่ Style โดยใช้ Tailwindcss class

ต่อให้ลองใส่ Style ให้ Header โดยระบุชื่อ class ใน `<h1>` ดังนี้

```svelte
<h1 class="text-3xl font-bold">Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
```

จากนั้นรันโปรแกรมผ่าน VS Code โดยเปิดหน้า Terminal (หรือกด `Ctrl`+`` ` ``) แล้วใช้คำสั่งรันโปรแกรม ดังนี้

```bash
npm run dev -- --open
```

ถ้าสำเร็จจะแสดงข้อความ Welcome to SvelteKit เป็นตัวอักษรตัวใหญ่ จาก `class="text-3xl font-bold"` ที่เราใส่ไว้ใน tag `<h1>` เป็นที่เรียบร้อย

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1711464872376/ec550f5b-2dc2-496d-89c3-973e50de2aa1.png align="center")

### เริ่มใช้ตัวแปรใน Svelte

ต่อไปจะเป็นการประกาศตัวแปร name แล้วนำไปแทนที่คำว่า SvelteKit โดยให้สลับมาที่หน้าจอ Code ที่ไฟล์ `/src/routes/+page.svelte` ให้เพิ่ม `<script>` แล้วใส่ code ประกาศตัวแปร `name` และใส่ {name} แทนคำว่า SvelteKit ดังนี้

```svelte
<script>
    let name = "Kosol"
</script>

<h1 class="text-3xl font-bold">Welcome to {name}</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
```

จากนั้นกด Ctrl+S เพื่อบันทึก แล้วสลับไปที่ Browser เพื่อดูผลลัพธ์ (หน้าเว็บจะรีเฟรชใหม่ให้อัตโนมัติเมื่อบันทึก)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1711465284719/4ca216a9-47be-452e-9fcb-f0a41cb7112a.png align="center")

### เล่นกับ $state โดยสร้างปุ่ม Counter

ขั้นต่อไปจะเป็นการเพิ่มปุ่ม Counter โดยมีตัวเลขบอกจำนวนครั้งที่กดปุ่ม โดยไปที่ไฟล์ `/src/routes/+page.svelte` แล้วประกาศตัวแปร count โดยให้มีค่าเริ่มต้นเป็น 0 และเพิ่มปุ่มให้แสดงค่า count ดังนี้ (โดยให้ลบ Tag &lt;p&gt; ออกก่อน)

```svelte
<script>
  let name = "Kosol";
  let count = 0;
</script>

<h1 class="text-3xl font-bold">Welcome to {name}</h1>

<button class="bg-blue-500 px-8 py-1 rounded">{count}</button>
```

จากนั้นบันทึกไฟล์ แล้วดูผลลัพธ์เห็นปุ่มที่มีเลข 0 ลองกดปุ่มดูจะยังไม่เกิดอะไรขึ้น

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1711465805945/6eefa637-3fe5-4455-846f-3db2f316d37b.png align="center")

ต่อไปสั่งให้ปุ่มทำการเพิ่มค่า count ทีละ 1 เมื่อมีการกดปุ่มดังนี้

```svelte
<script>
  let name = "Kosol";
  let count = $state(0);
</script>

<h1 class="text-3xl font-bold">Welcome to {name}</h1>

<button class="bg-blue-500 px-8 py-1 rounded" onclick={() => count++}
  >{count}</button
>
```

จากนั้นบันทึกไฟล์แล้วลองกดปุ่มดู จะเห็นว่าตัวเลขจะถูกเพิ่มเมื่อมีการกดปุ่ม

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1711465985139/b88f69ec-7c9b-4183-a315-155b473b4a46.png align="center")

### เล่นกับ $derived ช่วยคูณ 2 ให้หน่อย

ต่อมาเราจะเพิ่มการแสดงเลขด้านข้างเป็น 2 เท่าของ counter โดยเพิ่ม code ดังนี้

```svelte
<script>
  let name = "Kosol";
  let count = $state(0);
  let double = $derived(count * 2);
</script>

<h1 class="text-3xl font-bold">Welcome to {name}</h1>

<button class="bg-blue-500 px-8 py-1 rounded" onclick={() => count++}
  >{count}</button
>
<div>{count} x 2 = {double}</div>
```

เมื่อบันทึกแล้วลองกดปุ่ม จะเห็นตัวเลขบรรทัดล่างแสดงค่าผลคูณให้เห็น

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1711466547283/47ad96bb-535e-4367-a23d-2b842ad1492e.png align="center")

### ลองเล่น $effect สำหรับจัดการเมื่อ State เปลี่ยนแปลง

เพิ่ม code ใน Tag &lt;script&gt; ดังนี้

```svelte
<script>
  let name = "Kosol";
  let count = $state(0);
  let double = $derived(count * 2);
  $effect(() => {
    if (count > 12) {
      alert("Over 12");
      count = 12;
    }
  });
</script>

<h1 class="text-3xl font-bold">Welcome to {name}</h1>

<button class="bg-blue-500 px-8 py-1 rounded" onclick={() => count++}
  >{count}</button
>
<div>{count} x 2 = {double}</div>
```

จากนั้นบันทึกแล้วลองกดปุ่มจนขึ้นเลข 12 และเมื่อกดอีกครั้งจะขึ้น Alert ขึ้นมา แล้วเปลี่ยนค่า counter ให้อยู่ที่ 12 เท่านั้น

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1711467130305/5c8becb6-05a9-4fea-83fb-7af2b4ce40ee.png align="center")

ถึงตรงนี้จะเห็นว่าการเล่นกับ $state $derived $effect ไม่ได้ยากหรือซับซ้อนเท่าไหร่

### ลองเล่น $props รับส่ง parameter ระหว่างกัน

เริ่มต้นจากการจัดระเบียนใหม่ ให้ปุ่มกับตัวคูณที่เราสร้างไว้ไปอยู่ใน Component แล้วค่อยเรียกใช้จากหน้าหลัก โดยไปที่ /src/lib แล้วสร้าง Folder ชื่อ components และเพิ่มไฟล์ชื่อ Counter.svelte ดังนี้

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1711467710645/77a39a03-c023-4377-924d-79aa1947e7c7.png align="center")

จากนั้นย้าย Code จากหน้า /src/routes/+page.svelte มาไว้ที่ counter.svelte ดังนี้

```svelte
<script>
  let name = "Kosol";
  let count = $state(0);
  let double = $derived(count * 2);
  $effect(() => {
    if (count > 12) {
      alert("Over 12");
      count = 12;
    }
  });
</script>

<h1 class="text-3xl font-bold">Welcome to {name}</h1>

<button class="bg-blue-500 px-8 py-1 rounded" onclick={() => count++}
  >{count}</button
>
<div>{count} x 2 = {double}</div>
```

โดยไฟล์ /src/routes/+page.svelte ให้เอา code ที่ย้ายไปออก แล้วใส่ Code เพื่อเรียกใช้ Counter component ดังนี้

```svelte
<script>
  import Counter from "$lib/components/counter.svelte";
</script>

<Counter />
```

จากนั้นบันทึกไฟล์ทั้งหมดแล้วไปดูที่ Browser ควรแสดงผลลัพธ์ให้เห็นเหมือนเดิม ดังนี้

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1711468246285/1d5b087c-f01f-4070-946f-ab8cf601a913.png align="center")

ต่อไปจะเริ่มใช้ $props ในการส่งค่าจาก /src/routes/+page.svelte เพื่อส่งคำว่า "Svelte 5" ไปแทนคำว่า "Kosol" ใน Counter Component

โดยเริ่มจากทำการเพิ่มการรับผ่าน $props() ในไฟล์ /src/lib/components/counter.svelte ดังนี้

```svelte
<script>
  let { name = "Kosol" } = $props();
  let count = $state(0);
  let double = $derived(count * 2);
  $effect(() => {
    if (count > 12) {
      alert("Over 12");
      count = 12;
    }
  });
</script>

<h1 class="text-3xl font-bold">Welcome to {name}</h1>

<button class="bg-blue-500 px-8 py-1 rounded" onclick={() => count++}
  >{count}</button
>
<div>{count} x 2 = {double}</div>
```

ส่วนไฟล์ /src/routes/+page.svelte ให้ส่งค่า name="Svelte 5" ดังนี้

```svelte
<script>
  import Counter from "$lib/components/counter.svelte";
</script>

<Counter name="Svelte 5" />
```

จากนั้นบันทึกไฟล์ทั้งหมดแล้วดูผลลัพธ์จะมีคำว่า "Svelte 5" ที่ส่งไปจาก +page.svelte ให้เห็น

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1711468581143/b8d32ee8-9dfc-41fa-a0f7-68ad2774ef81.png align="center")