quartz/content/Svelte.md
Miguel Pimentel d7bf0695de
Pull-Request [ariasae-12-15-2023] from Obsidian (#50)
* PUSH NOTE : Mermaid Gantt.md

* PUSH NOTE : Bookmark Collections.md

* PUSH NOTE : Dominican Republic.md

* PUSH NOTE : Books Collection.md

* PUSH NOTE : Meta.md

* PUSH NOTE : Inspirations.md

* PUSH NOTE : index.md

* PUSH NOTE : Serif.md

* PUSH NOTE : Move Your Body.md

* PUSH NOTE : Consistency.md

* PUSH NOTE : Reverse Outlines.md

* PUSH NOTE : Sans-serif.md

* PUSH NOTE : Micropolitan Statistical Area.md

* PUSH NOTE : Chords.md

* PUSH NOTE : Atomic Notes.md

* PUSH NOTE : Zola.md

* PUSH NOTE : Svelte.md

* PUSH NOTE : Rhizomatic Learning.md

* PUSH NOTE : Rhombic Dodecahedron.md

* PUSH NOTE : Past Titles and Roles.md

* PUSH NOTE : NeoVim.md

* PUSH NOTE : Markdown.md

* PUSH NOTE : JavaScript.md

* PUSH NOTE : CSS.md

* PUSH NOTE : Bulma.md

* PUSH NOTE : Quotes Collection.md

* PUSH NOTE : Words I Like.md

* PUSH NOTE : Free Facts.md
2023-12-15 10:03:04 -06:00

1.2 KiB

title compartir updated
Svelte true 2023-12-15

Introduction

Svelte is a modern ./JavaScript#JavaScript Frameworks for building web applications. It compiles components into efficient, framework-free ./JavaScript code, resulting in fast and lightweight applications. With its reactive approach and declarative syntax, Svelte simplifies development and delivers impressive performance.

Example

<script>
  let name = 'Svelte';

  function handleClick() {
    alert(`Hello, ${name}!`);
  }
</script>

<main>
  <h1>Welcome to Svelte</h1>
  <p>Click the button to greet:</p>
  <button on:click={handleClick}>Greet</button>
</main>

<style>
  main {
    text-align: center;
    margin-top: 50px;
  }

  button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
</style>

In this example, we have a Svelte component that displays a heading, paragraph, and a button. When the button is clicked, the handleClick function is called, which displays an alert with the name variable interpolated. The component also includes some basic styling using CSS in the <style> block.