Discussion on: Vue 3 is almost here , the hype is real

I find that SX looks just like HTML with some slight differences. I don't see it really differs from the template section of single file vue components?

So with Vue you don't have your logic in the same page as your templating? Why would that be advantageous? With React depending on what you do, it can be optional. Some things have to be in the component, some things don't i.e. reducers

Styling being seperated is really up to you with React.

You can use CSS, or any other styling directives that you prefer, so you can have single file components with styled components

Also I don't think importing syntax is a bad thing. It makes it clear to others in your project to know quickly and clearly which is native HTML and which is from a library. Most IDEs autocomplete import so it doesn't add any extra pain.

Sorry for all these points/questions. I would love for us to build a component that doesn't something small and simple and compare the pros and cons of both.

Here is a simple version of mine in React with Hooks. Could you build yours with modern Vue and show me how that work?

import React, {useState} from "react"

/* component that increments the value  of a number displayed in a p tag using onClick event listener  attached to button */
const CountComponent = ({initialCount}) => {

const [count, setCount] = useState(initialCount)

const handleClick = () => setCount(currentCount => currentCount + 1)

  return (
    <div>
      <p> My count is {count} </p>
      <button onClick={handleClick} > Increment Count </button>
    </div>
  );
};

// Using count component in another component
const MainComponent = () => {
  return (
    <main>
      <CountComponent initialCount={0} />
      <CountComponent initialCount={1} />
      <CountComponent initialCount={2} />)
    </main>
  );
};

// or using javascript map function to declaratively add list of components

const MainComponent = () => {
  return (
    <main>
      {[0, 1, 2].map((initialCount, index) => (
        <CountComponent key={index} initialCount={initialCount} />
      ))}
    </main>
  );
};