Pierwszy komponent Svelte

Czas wykuć naszą pierwszą runę! Komponent Svelte to plik z rozszerzeniem .svelte, który łączy w sobie HTML, CSS i JavaScript.

Anatomia komponentu

<script>
  // Tutaj JavaScript - logika komponentu
  let name = 'Wojowniku';
</script>

<!-- Tutaj HTML - struktura -->
<h1>Witaj, {name}!</h1>

<style>
  /* Tutaj CSS - style */
  h1 {
    color: #c9a227;
  }
</style>

Trzy sekcje:

1. <script> - logika JavaScript/TypeScript
2. Markup - kod HTML z wyrażeniami {}
3. <style> - style CSS (domyślnie izolowane!)

Wyrażenia w szablonach

W Svelte używamy nawiasów klamrowych {} do wstawiania wartości JavaScript:

<script>
  let vikingName = 'Ragnar';
  let strength = 95;
  let weapons = ['Topór', 'Miecz', 'Włócznia'];
</script>

<h1>Wojownik: {vikingName}</h1>
<p>Siła: {strength}/100</p>
<p>Główna broń: {weapons[0]}</p>
<p>Suma broni: {weapons.length}</p>

Te wartości się nie zmieniają, więc wystarczy zwykłe let. Gdy wartość ma się zmieniać i odświeżać ekran, oznaczymy ją runą $state - już w następnej lekcji!

Wyrażenia JavaScript

Możesz używać dowolnych wyrażeń JavaScript:

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

<p>Całkowity skarb: {gold + silver * 0.1} złotych monet</p>
<p>Bogaty wiking? {gold > 100 ? 'Tak!' : 'Jeszcze nie'}</p>
<p>Imię wielkimi: {'ragnar'.toUpperCase()}</p>

Style są izolowane!

To jedna z magicznych właściwości Svelte - style w komponencie dotyczą tylko tego komponentu:

<script>
  let title = 'Sala Thingów';
</script>

<h1>{title}</h1>

<style>
  /* Ten styl dotyczy TYLKO h1 w tym komponencie! */
  h1 {
    color: gold;
    font-family: 'Norse', serif;
    text-shadow: 2px 2px 4px #000;
  }
</style>

Inne komponenty z <h1> nie będą miały tych stylów. To jak runiczne zaklęcie ochronne!

<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>