Your First Svelte Component

Time to forge our first rune! A Svelte component is a file with the .svelte extension that combines HTML, CSS, and JavaScript.

Anatomy of a Component

<script>
  // JavaScript goes here - component logic
  let name = 'Warrior';
</script>

<!-- HTML goes here - structure -->
<h1>Welcome, {name}!</h1>

<style>
  /* CSS goes here - styles */
  h1 {
    color: #c9a227;
  }
</style>

Three sections:

1. <script> - JavaScript/TypeScript logic
2. Markup - HTML code with {} expressions
3. <style> - CSS styles (scoped by default!)

Template Expressions

In Svelte we use curly braces {} to insert JavaScript values:

<script>
  let vikingName = 'Ragnar';
  let strength = 95;
  let weapons = ['Axe', 'Sword', 'Spear'];
</script>

<h1>Warrior: {vikingName}</h1>
<p>Strength: {strength}/100</p>
<p>Main weapon: {weapons[0]}</p>
<p>Total weapons: {weapons.length}</p>

These values never change, so a plain let is enough. When a value has to change and refresh the screen, we will mark it with the $state rune - in the very next lesson!

JavaScript Expressions

You can use any JavaScript expressions:

<script>
  let gold = 150;
  let silver = 30;
</script>

<p>Total treasure: {gold + silver * 0.1} gold coins</p>
<p>Rich Viking? {gold > 100 ? 'Yes!' : 'Not yet'}</p>
<p>Name in uppercase: {'ragnar'.toUpperCase()}</p>

Styles are Scoped!

This is one of the magical properties of Svelte - styles in a component apply only to that component:

<script>
  let title = 'Hall of Things';
</script>

<h1>{title}</h1>

<style>
  /* This style applies ONLY to h1 in this component! */
  h1 {
    color: gold;
    font-family: 'Norse', serif;
    text-shadow: 2px 2px 4px #000;
  }
</style>

Other components with <h1> will not have these styles. It is like a runic protection spell!

<script>
  // Exercise: Anatomy of a Svelte component
  // Fill in the missing parts!

  let vikingName = 'Ragnar';
  let strength = 95;
  let weapons = ['Axe', 'Sword', 'Spear'];
</script>

<!-- Markup - HTML structure with {} expressions -->
<div class="warrior-card">
  <h1>Warrior: {vikingName}</h1>
  <p>Strength: {strength}/100</p>
  <p>Main weapon: {weapons[0]}</p>
  <p>Number of weapons: {weapons.length}</p>

  <!-- JavaScript expressions -->
  <p class="status">
    Status: {strength > 80 ? 'Elite warrior!' : 'Regular warrior'}
  </p>
</div>

<style>
  /* Styles - CSS scoped to this component */
  .warrior-card {
    background: linear-gradient(135deg, #2c1810 0%, #1a0f0a 100%);
    border: 2px solid #d4af37;
    border-radius: 8px;
    padding: 2rem;
    color: #e8d5b7;
    max-width: 400px;
    margin: 2rem auto;
  }

  h1 {
    color: #d4af37;
    border-bottom: 1px solid #d4af37;
    padding-bottom: 0.5rem;
  }

  .status {
    background: rgba(212, 175, 55, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    color: #d4af37;
  }
</style>