jeppzone

<script>
  let a = 1;
  let b = 2;
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {a + b}</p>

jeppzone

import React, { useState } from "react";

export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  function handleChangeA(event) {
    setA(+event.target.value);
  }

jeppzone

<script>
  let count = 0;
  $: doubled = count * 2;

  function handleClick() {
    count += 1;
  }
</script>

<button on:click={handleClick}>

jeppzone

<script>
  import LoadingIndicator from "./LoadingIndicator.svelte";
  let statistics = [];
  let loading = false;
</script>

<div class="container">
  <h2>Statistics</h2>
  {#if loading}
    <LoadingIndicator />

jeppzone

<div>
  {#if loading}
    <LoadingIndicator />
  {:else}
    <SomeOtherComponent />
  {/if}
</div>

jeppzone

<div>
  {loading
    ? <LoadingIndicator />
    : <SomeOtherComponent />
  }
</div>

jeppzone

render(){
  let component;
  if (loading) {
    component = <LoadingIndicator />
  } else {
    component = <SomeOtherComponent />
  }

  return (
    <div>

jeppzone

<ul>
  {#each cats as { id, name }, i}
    <li>
      <a target="_blank" href="https://www.youtube.com/watch?v={id}">
        {i + 1}: {name}
      </a>
    </li>
  {/each}
</ul>

jeppzone

render(){
  return (
    <ul>
      {this.state.cats.map(cat => (
        <li>
          <a target="_blank" href={`https://www.youtube.com/watch?v=${cat.id}`}>
            {cat.name}
          </a>
        </li>
      ))}

jeppzone

<style>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>