Vue vs React

import React, { useState } from 'react';
const Component = () => {
const [variable, setVariable] = useState('initialValue');

const mutateVariable = () => {
  setVariable('newValue');
};

return (
  <div>
    {variable}
    <button onClick={mutateVariable}>Mutate Variable</button>
  </div>
);
};

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

const variable = ref('initialValue');

const mutateVariable = () => {
  variable.value = 'newValue';
};
</script>

<template>
  <div>
    {{ variable }}
    <button @click="mutateVariable">Mutate Variable</button>
  </div>
</template>

import React, { useState, useEffect } from 'react';

const FetchComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return <div>{JSON.stringify(data)}</div>;
};

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

const data = ref(null);

onMounted(async () => {
  data.value = await fetch('https://api.example.com/data')
    .then(response => response.json());
});
</script>

<template>
  <div>{{ JSON.stringify(data) }}</div>
</template>

import React, { useState } from 'react';
const SVGComponent = () => {
  const [size, setSize] = useState(10);

  return (
    <svg width={size * 10} height={size * 10}>
      <circle cx={size * 5} cy={size * 5} r={size} fill="blue" />
      <button onClick={() => setSize(size + 1)}>Increase Size</button>
    </svg>
  );
};

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

const size = ref(10);
</script>

<template>
  <svg :width="size * 10" :height="size * 10">
    <circle :cx="size * 5" :cy="size * 5" :r="size" fill="blue" />
  </svg>
  <button @click="size++">Increase Size</button>
</template>