Comparison of Svelte and other JS frameworks - Irregular Svelte series-01

<script>    
  const fetchItems = async function() {
    const items = await fetch('URL');
    return await items.json();
  }
</script>

{#await fetchItems()}
  <p>Loading</p>
{:then items}
  {#each items as item}
    <p>{item.name}</p>
  {/each}
{:catch error}
<p>{error.message}</p>
{/await}

function FetchComponent() {
  const [error, setError] = useState(null)
  const [isLoaded, setIsLoaded] = useState(false)
  const [items, setItems] = useState([])

  useEffect(() => {
    fetch('URL')
      .then(res => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result)
        },
        (error) => {
          setIsLoaded(true);
          setError(error)
        }
      )
  }, [])

  if (!isLoaded) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.name}
          </li>
        ))}
      </ul>
    );
  }
}

<script setup>
import { ref } from 'vue'

const items = ref(null)
const error = ref(null)

fetch('URL')
  .then((res) => res.json())
  .then((json) => (items.value = json))
  .catch((err) => (error.value = err))
</script>

<template>
  <div v-if="error">{{ error.message }}</div>
  <div v-else-if="items">
	  <ul v-for="(item,index) in items">
		  <li>Number:{{index+1}} Name:{{item.name}}</li>
	  </ul>
  </div>
  <div v-else>Loading</div>
</template>

$: foo = false

import {useState} from 'react'
const [foo] = useState(false)

<script setup>
import { reactive, computed } from 'vue'

const state = reactive({
  count: 0
})

const increment = () => {
  state.count++
}
</script>

<script>
  export let name
</script>

<p>Hello, I'm　:{name}</p>

<script>
import ChildComponent from './ChildComponent.svelte'
</script>

<ChildComponent name="Svelte" />

const ChildComponent = (props) => {
  return <h1>Hello, I'm　:{props.name}</h1>;
}
export default ChildComponent;

import ChildComponent from './ChildComponent.jsx'

function App() {
  return (
    <ChildComponent name="React" />
  );
}

export default App

<template>
	<p>Hello, I'm　{{name}}</p>
</template>

export default {
  props: {
    name: String,
  }
}

<script>
import ChildComponent from './ChildComponent.vue'
</script>
<template>
<ChildComponent name="Vue" />
</template>