Exploring Web Frameworks

• 

  React

  import { useState } from "react"
  
  const BasicVariables = () => {
    const [count, setCount] = useState(0)
  
    function handleClick() {
      setCount(count + 1)
    }
    return (
      <button onClick={handleClick}>
        Count: {count}
      </button>
    )
  }
  
  export default BasicVariables
  

  View Components

  Learn more >
• 

  Vue

  <script>
  export default {
  	data() {
  		return {
  			count: 0
  		}
  	}
  }
  </script>
  
  <template>
  	<button @click="count++">Count: {{ count }}</button>
  </template>
  
  

  View Components

  Learn more >
• 

  Svelte

  <script>
  	let count = 0;
  
  	function handleClick() {
  		count += 1;
  	}
  </script>
  
  <button on:click={handleClick}>
  	Count: {count}
  </button>

  View Components

  Learn more >
• 

  Solid

  import { createSignal } from "solid-js"
  
  const BasicVariables = () => {
    const [count, setCount] = createSignal(0)
  
    function handleClick() {
      setCount(count() + 1)
    }
    return (
      <button onClick={handleClick}>
        Count: {count()}
      </button>
    )
  }
  
  export default BasicVariables
  

  View Components

  Learn more >
• 

  Preact

  import { h } from "preact"
  import { useState } from "preact/hooks"
  
  const BasicVariables = () => {
    const [count, setCount] = useState(0)
  
    function handleClick() {
      setCount(count + 1)
    }
    return (
      <button onClick={handleClick}>
        Count: {count}
      </button>
    )
  }
  
  export default BasicVariables
  

  View Components

  Learn more >