Kevin Powell - Community•20h ago

React -> Vue Comparison

import CoreConcept from './CoreConcept.jsx';
import { CORE_CONCEPTS } from '../data.js';

export default function CoreConcepts() {
    return (
        <section id="core-concepts">
            <h2>Core Concepts</h2>
            <ul>
                {CORE_CONCEPTS.map((conceptItem) => (
                    <CoreConcept key={conceptItem.title} {...conceptItem} />
                ))}
            </ul>
        </section>
    );
}

import CoreConcept from './CoreConcept.jsx';
import { CORE_CONCEPTS } from '../data.js';

export default function CoreConcepts() {
    return (
        <section id="core-concepts">
            <h2>Core Concepts</h2>
            <ul>
                {CORE_CONCEPTS.map((conceptItem) => (
                    <CoreConcept key={conceptItem.title} {...conceptItem} />
                ))}
            </ul>
        </section>
    );
}

<template>
  <section id="core-concepts">
    <h2>Core Concepts</h2>
    <ul>
      <CoreConcept
        v-for="concept in CORE_CONCEPTS"
        :key="concept.title"
        v-bind="concept"
      />
    </ul>
  </section>
</template>

<script setup>
import CoreConcept from './CoreConcept.vue'
import { CORE_CONCEPTS } from '../data.js'
</script>

<template>
  <section id="core-concepts">
    <h2>Core Concepts</h2>
    <ul>
      <CoreConcept
        v-for="concept in CORE_CONCEPTS"
        :key="concept.title"
        v-bind="concept"
      />
    </ul>
  </section>
</template>

<script setup>
import CoreConcept from './CoreConcept.vue'
import { CORE_CONCEPTS } from '../data.js'
</script>

22 Replies

Rägnar O'ock•20h ago

what does data.js look like ?

CDLOP•20h ago

for the CoreConcepts object it's

export const CORE_CONCEPTS = [
    {
        image: componentsImg,
        title: 'Components',
        description:
            'The core UI building block - compose the user interface by combining multiple components.'
    },
    {
        image: jsxImg,
        title: 'JSX',
        description:
            'Return (potentially dynamic) HTML(ish) code to define the actual markup that will be rendered.'
    },

export const CORE_CONCEPTS = [
    {
        image: componentsImg,
        title: 'Components',
        description:
            'The core UI building block - compose the user interface by combining multiple components.'
    },
    {
        image: jsxImg,
        title: 'JSX',
        description:
            'Return (potentially dynamic) HTML(ish) code to define the actual markup that will be rendered.'
    },

Rägnar O'ock•20h ago

hum, you've found yourself in one of the very few instances where v-bind: can be usefull...

CDLOP•20h ago

hahaha I was only aware of :id :class to be honest, I didn't think v-bind was used outside of that

Rägnar O'ock•20h ago

tho, for readability I would advise you to do something like :

 <CoreConcept
  v-for="{image, title, description} in CORE_CONCEPTS"
  :key="title"
  :image
  :title
  :description
/>

 <CoreConcept
  v-for="{image, title, description} in CORE_CONCEPTS"
  :key="title"
  :image
  :title
  :description
/>

that way it's both easier to see what is in CORE_CONCEPTS and you don't risk having weird error when you add something else in your data.js or rename something (and you should avoid using id= in components unless you need some outside code to access it, it will cause problems if you get to reuse your component)

CDLOP•20h ago

ah sure, that makes sense, similar visual to

export default function CoreConcept({ title, image, description }) {
    return (
        <li>
            <img src={image} alt={title} />
            <h3>{title}</h3>
            <p>{description}</p>
        </li>
    );
}

export default function CoreConcept({ title, image, description }) {
    return (
        <li>
            <img src={image} alt={title} />
            <h3>{title}</h3>
            <p>{description}</p>
        </li>
    );
}

Rägnar O'ock•20h ago

yeah well... yes and no yes in the sense that both use destructuring no in the sens that one is the component's usageand the other is the component's definition

CDLOP•19h ago

yeah meant the destructuring I'm a wee bit confused on this part.. how is variantImage working with variant.image?

<script setup>
import { ref } from 'vue';
import socksGreenImage from './assets/images/socks_green.jpeg';
import socksBlueImage from './assets/images/socks_blue.jpeg';

const product = ref('Socks');
const image = ref(socksGreenImage);
const inStock = true;

const details = ref(['50% cotton', '30% wool', '20% polyester']);

const variants = ref([
    { id: 2234, color: 'green', image: socksGreenImage },
    { id: 2235, color: 'blue', image: socksBlueImage }
]);

const cart = ref(0);

const addToCart = () => {
    cart.value += 1;
};

const updateImage = (variantImage) => {
    image.value = variantImage;
};
</script>

<template>
    <div class="nav-bar"></div>
    <div class="cart">Cart({{ cart }})</div>
    <div class="product-display">
        <div class="product-container">
            <div class="product-image">
                <img v-bind:src="image" />
            </div>
            <div class="product-info">
                <h1>{{ product }}</h1>
                <p v-if="inStock">In Stock</p>
                <p v-else>Out of Stock</p>
                <ul>
                    <li v-for="detail in details">{{ detail }}</li>
                </ul>
                <div v-for="variant in variants" :key="variant.id" @mouseover="updateImage(variant.image)">
                    {{ variant.color }}
                </div>
                <button @click="addToCart" class="button">Add to Cart</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import socksGreenImage from './assets/images/socks_green.jpeg';
import socksBlueImage from './assets/images/socks_blue.jpeg';

const product = ref('Socks');
const image = ref(socksGreenImage);
const inStock = true;

const details = ref(['50% cotton', '30% wool', '20% polyester']);

const variants = ref([
    { id: 2234, color: 'green', image: socksGreenImage },
    { id: 2235, color: 'blue', image: socksBlueImage }
]);

const cart = ref(0);

const addToCart = () => {
    cart.value += 1;
};

const updateImage = (variantImage) => {
    image.value = variantImage;
};
</script>

<template>
    <div class="nav-bar"></div>
    <div class="cart">Cart({{ cart }})</div>
    <div class="product-display">
        <div class="product-container">
            <div class="product-image">
                <img v-bind:src="image" />
            </div>
            <div class="product-info">
                <h1>{{ product }}</h1>
                <p v-if="inStock">In Stock</p>
                <p v-else>Out of Stock</p>
                <ul>
                    <li v-for="detail in details">{{ detail }}</li>
                </ul>
                <div v-for="variant in variants" :key="variant.id" @mouseover="updateImage(variant.image)">
                    {{ variant.color }}
                </div>
                <button @click="addToCart" class="button">Add to Cart</button>
            </div>
        </div>
    </div>
</template>

ah.. because you set image to the value of variantImage, ignore me. and then you use it here

@mouseover="updateImage(variant.image)

@mouseover="updateImage(variant.image)

because it's using the parameter

const updateImage = (variantImage) => {

const updateImage = (variantImage) => {

Rägnar O'ock•19h ago

yeah, it's just a function call no magic happening here

CDLOP•19h ago

ya how odd, first time I've encountered something forcing me to use ' ' and not " " (naturally find " " easier)

                <img :class="{ 'out-of-stock-img': !inStock }" v-bind:src="image" />

                <img :class="{ 'out-of-stock-img': !inStock }" v-bind:src="image" />

Rägnar O'ock•19h ago

it's a personal taste, but I like using simple quotes '' in JS/TS and double quotes "" with HTML for this exact reason

CDLOP•18h ago

I like that approach computed made the code a little larger so it's not fun to copy/paste https://play.vuejs.org/#eNqtVl1v2zYU/SucgEEO6lhp0rxojrEmKIYM2DosRV/qYpCla5cxRWok5cYw/N97KEoy5TrpS20YEHnPPff7yrvobVVNNjVFaTQ1ueaVZYZsXc3mkpeV0pbtmKblmOWqrGpLBduzpVYli6EU/9ajjMrX5g9NJO/LbEUtZpJkBnQm4e7SJA3qv5WDTR4rWh0T3Iqafqy/AKpXn8tcSWNZpVVR55bdOHdH8YNDxmcAePFCZ7LohB9rYn9lxpLeNpAOZEhQjhg/ZppnsuO6CCEF2YwL04o+xdcXvyI11ioZj1l8hdNXpYR7vsRzpcSWnJ34c0iy8fw9CyR2x3iRssvLqzcu10LplMVNosDVRJ8e53jM/q/Bwu02ZdcXbD8e0FwfaFy+jlj6RIck4JjLgaN5hsqcyALwgiDommI0OmM3M7ZzHmi0j5Y+4ZNNBkPsFYvxfdXVyN+Cbh9yNu69zNnlzRN8OiqXv/08aYi+Y5cPFoH/DP4uYccmsqL4oO58xjz3yOWvy8ENex2i66rILB06bcRlQU8Hl04aB66BOdP4TRM/shhWHCyVlQCnO9lpwTcsFxifm3kks835ItPzaDZNcP89wPkJqXN+tNv5su/3Z8+g2zKeF9zA4BaKDvIMCNFiYiQ56x72DLApWwACjJcrBs8Rcmp0DmyLYcmBqnfxeWK5VEPeL69niNI38X4/TXAOpBVs8qWz5nsGuveSNY/TxC3GAZKEodn72jK1PImpRXDCWXAoLZUGv98lqGi3VWAJfrXXzjHBQ6pkwOViDZk71lHbxRh431Hg7xp7HoUa6Zq2UGiFE14Mxb+XqjakNuRYB+3a9uoQ3veS2zrnOde5QKkG9ozdCgJkxxZZvl5pVcvizi+pzolGG3soUAyato18UbuFe8p4Kxma7YRILTfZQlBx28BS9ku3FgYGodIBodVhhojNOfRzwfM1IP3kD9wO4W+LglnVDFZYUO/uyWYOZq99mibBhEfjyBrM1pKvJo9GSby/sTYYc/kvKy5Iv68sx6aZR6lbKAwfOCqE+vpnc2d1TXhj+Pv8C+XrE/eP5sndzaN/NBnSGxS0l9lMrwgRO/G7h7/pCc+9sMToufK/IPyXjBK189HDbtEMcDvANd7eN38PuFx9MO+eLEnTBeUcdUj33nNo/B+5eyH0g7tXkzeNHnZotP8G38AuvQ== but that is a hideously long URL

Rägnar O'ock•18h ago

'cause the whole code is encoded in it

CDLOP•18h ago

lmao I couldn't figure out how to turn add vue to codepen

Rägnar O'ock•18h ago

just... use the provided template...

Rägnar O'ock•18h ago

https://codepen.io/pen/editor/vue

CodePen

CodePen - Create a New Pen

...

Rägnar O'ock•18h ago

avoid using disabled on buttons, it's bad for a11y (it's as if you had display: none on it) use aria-disabled="true" instead. other than that it's nice could use a bit of // #region in the script to group up the related stuff, but overall it's good (you might also wantto replace that v-on:click by @click

CDLOP•18h ago

Forgot about the aria-disabled! I'm stumped on this part, and google sucked at helping..

const onSale = ref(true)

const onSale = ref(true)

whilst that's true, I need a message to appear showing "brand + product is on sale" which I think is something such as....

const saleMessage = computed(() => {
  return onSale.value + ' ' + product.value + ' ' + "is on sale"
})

const saleMessage = computed(() => {
  return onSale.value + ' ' + product.value + ' ' + "is on sale"
})

with

<p v-if="onSale">{{ saleMessage }}</p>

<p v-if="onSale">{{ saleMessage }}</p>

However... how do I get it to check whether onSale is true or false lol

Rägnar O'ock•18h ago

what do you mean ?

CDLOP•18h ago

oh hold on I think I'm just being dumb

Rägnar O'ock•18h ago

might be that

CDLOP•18h ago

my computed property isn't checking the value of onSale, but my v-if is, I guess That's enough of that for 1 night, that was very refreshing though!

Gaming

Programming

React -> Vue Comparison

Did you find this page helpful?