Discussion on: React vs Vue: my personal point of view

View post

Giuseppe,

I like the way you presented the differences BUT...
I tend to feel your opinion may be a bit to single dimensional - each of the frameworks took a tradeoff that would be good to mention.

For example the sample code for React

import "awesome-react-component.scss";

class AwesomeReactComponent extends React.Component {
    render() {
        const {
            header,
            body,
            footer
        } = this.props;

        return (
            <section className="awesome-vue-component">
                <header className="awesome-vue-component__header">{header}</header>
                <div className="awesome-vue-component__body">{body}</div>
                <footer className="awesome-vue-component__footer">{footer}</footer>
            </section>
        );
    }
}

Should be rather built in a shorter, easier form:

import "awesome-react-component.scss"

const AwesomeReactComponent = ({header, body, footer}) => (
  <section className="awesome-vue-component">
    <header className="awesome-vue-component__header">{header}</header>
      <div className="awesome-vue-component__body">{body}</div>
      <footer className="awesome-vue-component__footer">{footer}</footer>
  </section>        
)

Then you could say, that in return to less clear separation of concerns, React code can be way more concise without that much of the boilerplate.

Giuseppe • Nov 3 '19 • Edited

Hi Oskar,
thank you for your comment.

Yes, you can write that component in that shorter way but:
1) The component you've written it's a "functional component" which something different from the one I wrote;
2) You're still mixing the JavaScript and the HTML, because basically you're putting HTML in a const;

P.S My name is Giuseppe 😬

Oskar • Nov 3 '19 • Edited

Sorry for misspelling your name :(

Don't you think we should compare functional components instead of class components since they are officially recommended way to build components in React ?

Technically those component's are not a mix of HTML and JS. It's a pure JS with a small library, that enables us to write JS object trees in HTML-like way. But I agree, that ability to mix logic and JSX often results in overuse and messy code build by inexperienced developers.