React, Vue and Svelte: Comparing Conditional Rendering

Conditional rendering in ...

React

Link

import { useState } from 'react';

const App = () => {
  const [isVisible, setIsVisible] = useState<boolean>(true);
  return (
    <div>{isVisible ? <p>I'm right here!</p> : <p>I'm invisible!</p>}</div>
  );
};

Vue

Link

<script setup lang="ts">
  import { ref } from 'vue'
  const isVisible:Boolean = ref(true)
</script>

<template>
  <p v-if="isVisible">I'm right here!</p>
  <p v-else>I'm invisible!</p>
</template>

Svelte

Link

<script lang="ts">
  let isVisible:boolean = true;
</script>

{#if isVisible}
  <p>I'm right here!</p>
{:else}
  <p>I'm invisible!</p>
{/if}