Compare Declarative Frameworks

<template>
  <p v-if="condition">Condition is true</p>
  <p v-else>Condition is false</p>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  condition: Boolean
});
</script>

function ConditionalComponent({ condition }) {
  return (
    <>
      {condition ? (
        <p>Condition is true</p>
      ) : (
        <p>Condition is false</p>
      )}
    </>
  );
}

// Usage
<ConditionalComponent condition={true} />;

<template>
  <button @click="setClicked">
    {{ clicked ? "Button clicked" : "Click me" }}
  </button>
</template>

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

const clicked = ref(false);

function setClicked() {
  clicked.value = true;
}
</script>

import { useState } from "react";

function ClickableComponent() {
  const [clicked, setClicked] = useState(false);

  return (
    <button onClick={() => setClicked(true)}>
      {clicked ? "Button clicked" : "Click me"}
    </button>
  );
}

<template>
  <ul>
    <li v-for="person in items" :key="person.id">
      Name: {{ person.name }}, Age: {{ person.age }}
    </li>
  </ul>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  items: Array
});
</script>

<!-- Usage -->
<item-keys-example
  :items="[
    { name: 'John', age: 30, id: '1' },
    { name: 'Jane', age: 28, id: '2' },
    { name: 'Bob', age: 25, id: '3' }
  ]"
></item-keys-example>

function ItemKeysExample({ items }) {
  return (
    <ul>
      {items.map((person) => (
        <li key={person.id}>
          Name: {person.name}, Age: {person.age}
        </li>
      ))}
    </ul>
  );
}

// Usage
<ItemKeysExample
  items={[
    { name: "John", age: 30, id: "1" },
    { name: "Jane", age: 28, id: "2" },
    { name: "Bob", age: 25, id: "3" },
  ]}
/>;

<template>
  <div :style="style">Hello, World!</div>
</template>

<script setup>
import { reactive } from 'vue';

const style = reactive({
  padding: '16px',
  backgroundColor: 'blue',
  color: 'white'
});
</script>

function ModifiersExample() {
  const style = {
    padding: "16px",
    backgroundColor: "blue",
    color: "white",
  };

  return <div style={style}>Hello, World!</div>;
}

<!-- ParentComponent.vue -->
<template>
  <intermediate />
</template>

<script setup>
import { provide, ref } from 'vue';
import Intermediate from './IntermediateComponent.vue';

const data = ref('Some data');
provide('dataKey', data);
</script>

<!-- IntermediateComponent.vue -->
<template>
  <child />
</template>

<script setup>
import Child from './ChildComponent.vue';
</script>

<!-- ChildComponent.vue -->
<template>
  <p>Received data: {{ data }}</p>
</template>

<script setup>
import { inject } from 'vue';

const data = inject('dataKey');
</script>


<!-- Usage -->
<parent-component data="Some data"></parent-component>

import { createContext, useContext } from "react";

const CustomContext = createContext();

function Parent({ data }) {
  return (
    <CustomContext.Provider value={data}>
      <Intermediate />
    </CustomContext.Provider>
  );
}

function Intermediate() {
  return <Child />;
}

function Child() {
  const data = useContext(CustomContext);
  return <p>Received data: {data}</p>;
}

// Usage
<Parent data="Some data" />;