Vue vs React
Mutating Variables
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>
Fetching Data
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>
Reactive SVG
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>