6 ms·

One reason I love Vue over React is how beginner friendly it is. You can't make a "Hello World" app in React without getting bombarded with concepts and terms—s

One reason I love Vue over React is how beginner friendly it is. You can't make a "Hello World" app in React without getting bombarded with concepts and terms—states, props, JSX, stateful components. Just look that the "Getting Started" example of Vue [1] and compare it React's [2]. You don't need anything more than a notepad to get the first example running. Progressing down Vue, you realize how they have tried to prioritize convenience. For example, using "v-on:keyup.enter" you can map an action to "Enter" key without writing code for handling that key. I liked the React's approach but it seems its focus is on purity of abstractions than convenience. Don't even get me started on Redux which is epitome of needless complexity—containers, reducers, event emitters? Was all that really needed? Note: I have no idea how Vue fares when code base is huge, but my intial impression makes me feel it's far better choice than React. [1]: https://vuejs.org/v2/guide/#Declarative-Rendering https://vuejs.org/v2/guide/#Declarative-Rendering [2]: https://reactjs.org/tutorial/tutorial.html https://reactjs.org/tutorial/tutorial.html

danabramov 8y ago
>Just look that the "Getting Started" example of Vue [1] and compare it React's [2]. Thanks for feedback! The linked React guide is intended to be a pretty comprehensive tutorial — not a getting started guide in the same sense. I wouldn’t say they’re comparable in how much about either of them teaches you about using a library. Maybe it’s not obvious from the wording. If you do want a simple “getting started” guide that doesn’t require any tools, it’s right here: https://reactjs.org/docs/add-react-to-a-website.html https://reactjs.org/docs/add-react-to-a-website.html And you can progressively learn all important concepts starting from here: https://reactjs.org/docs/hello-world.html https://reactjs.org/docs/hello-world.html Another common destination is this guide, which matches the Vue one in purpose a bit more closely: https://reactjs.org/docs/thinking-in-react.html https://reactjs.org/docs/thinking-in-react.html The “get started” link on the React page links to resources for people with different experience levels: https://reactjs.org/docs/getting-started.html https://reactjs.org/docs/getting-started.html Hope that helps!
- shubhamjain 8y ago
  Fair enough. These seem much better for starting out. However, the progression in Vue's guide is much better thought out. Step 1: Get a simple "Hello world" running. Step 2: Get something dynamic on screen. Step 3: A simple if statement. Step 4: A loop. Step 5: User Input. By the end of the guide, I know all there is to know to make a very simple interactive component.
  - danabramov 8y ago
    Thanks for feedback. I do think the “main concepts” guide goes in roughly the same order but I agree there could be a more condensed single-page version of it. We’ll keep it in mind for the future!
- Silhouette 8y ago
  The linked React guide is intended to be a pretty comprehensive tutorial — not a getting started guide in the same sense. I wouldn’t say they’re comparable in how much about either of them teaches you about using a library. Maybe it’s not obvious from the wording. FWIW, I think the current introductory material on the React site is not as effective as how things were in the early days. IMHO, a significant benefit of React in its original form was its simplicity. The whole API practically fit on a single screen. You could write a tutorial that showed the basics of rendering a component or two on a single screen. Today React itself has become more complicated, and the tooling around it even more so, and I'm not sure that extra complexity offers a good return. Just as a demonstration of my point, please imagine for a moment that you are a developer who understands the basics of the modern JS world but is new to React. Go to the React site and find the instructions on how to just install React with npm or yarn, the way you probably would with any other JS library. OK, so there's nothing readily visible. No, really. How to just install React like every other JS library in the world isn't even described on the introductory pages. Well, maybe you try running {package manager} {install command} react That used to do the obvious thing, but now it doesn't because even the essentials are divided among multiple packages with non-obvious names. So at this point, just a couple of minutes after you decided to give React a try, you're already confused about how it works in NPM and thinking basic documentation is missing, and you haven't even installed it or written a line of code yet. Maybe you find a link somewhere to the page about the "most popular and approachable toolchains". OK, that looks promising. You click the link and... you're confronted with create-react-app, Gatsby, Next.js and a bunch of other dubious, heavyweight tools, not that you know that because you've never heard of them. But there's still no sign of how to just install React and try it out like any other JS library. So you go to the kitchen, make a coffee, come back and ask your mentor whether it's really necessary for you to use such a complicated and difficult tool, and whether you can just use Vue instead. This comment is based on a true story. :-(
Longwelwind 8y ago
If your project grows big, you will at some point need to use a state management library like VueX which has similar concepts than Redux, so I'm not sure this argument holds. My biggest problem with Vue is the template syntax. Since JSX is a thin layer over Javascript, few modifications have to be done over Javascript (or Typescript) tools to make them work with JSX (or TSX). Vue templates are a totally new language which requires more complex tools. I've never had any problem using refactoring tools (renaming variables, go to declaration, find usages, ...) with React, while in my last Vue project, renaming a variable broke code. Vue has Vuetify, which has been a breeze to use, though. I don't know if there is a React equivalent.
- leipert 8y ago
  You can use TSX and JSX with Vue: https://vuejs.org/v2/guide/render-function.html https://vuejs.org/v2/guide/render-function.html
- mcv 8y ago
  Vue templates are not in any way more of a totally new language than JSX is. Vue templates are simply XHTML snippets with added data bindings. JSX is not quite XHTML (you have to use className instead of class) with added data bindings. I find Vue templates slightly cleaner for that reason, but the difference isn't big. How they're used is different, though: React wants everything, including the XHTML, to be javascript. Vue puts it all in HTML, with script tags for the javascript.
  - mlsarecmg 8y ago
    JSX is a dsl, like typescript or flow, it doesn’t change or affect your code, all assumptions stand, it doesn’t break scope. Vue templates are not a dsl, they break all assumptions and your scope. There is no difference between Vue and angular in that regard, both could not do this with templates: const A = () => <div /> const B = () => <A /> JSX turns that into: const A = () => createElement('div') const B = () => createElement(A) That is all that JSX does. Vue on the otherhand parses its own language, breaks scope, separates concerns that shouldn’t be separated and in the end joins them via dependency injection again. We’ve been through this years before Vue existed with angular and others. BTW, your info is outdated. "class" is allowed in React as of V16.
woah 8y ago
I can’t go back to a hobbled templating pseudolang after jsx

danabramov 8y ago

>Just look that the "Getting Started" example of Vue [1] and compare it React's [2]. Thanks for feedback! The linked React guide is intended to be a pretty comprehensive tutorial — not a getting started guide in the same sense. I wouldn’t say they’re comparable in how much about either of them teaches you about using a library. Maybe it’s not obvious from the wording. If you do want a simple “getting started” guide that doesn’t require any tools, it’s right here: https://reactjs.org/docs/add-react-to-a-website.html https://reactjs.org/docs/add-react-to-a-website.html And you can progressively learn all important concepts starting from here: https://reactjs.org/docs/hello-world.html https://reactjs.org/docs/hello-world.html Another common destination is this guide, which matches the Vue one in purpose a bit more closely: https://reactjs.org/docs/thinking-in-react.html https://reactjs.org/docs/thinking-in-react.html The “get started” link on the React page links to resources for people with different experience levels: https://reactjs.org/docs/getting-started.html https://reactjs.org/docs/getting-started.html Hope that helps!

shubhamjain 8y ago
Fair enough. These seem much better for starting out. However, the progression in Vue's guide is much better thought out. Step 1: Get a simple "Hello world" running. Step 2: Get something dynamic on screen. Step 3: A simple if statement. Step 4: A loop. Step 5: User Input. By the end of the guide, I know all there is to know to make a very simple interactive component.
- danabramov 8y ago
  Thanks for feedback. I do think the “main concepts” guide goes in roughly the same order but I agree there could be a more condensed single-page version of it. We’ll keep it in mind for the future!
Silhouette 8y ago
The linked React guide is intended to be a pretty comprehensive tutorial — not a getting started guide in the same sense. I wouldn’t say they’re comparable in how much about either of them teaches you about using a library. Maybe it’s not obvious from the wording. FWIW, I think the current introductory material on the React site is not as effective as how things were in the early days. IMHO, a significant benefit of React in its original form was its simplicity. The whole API practically fit on a single screen. You could write a tutorial that showed the basics of rendering a component or two on a single screen. Today React itself has become more complicated, and the tooling around it even more so, and I'm not sure that extra complexity offers a good return. Just as a demonstration of my point, please imagine for a moment that you are a developer who understands the basics of the modern JS world but is new to React. Go to the React site and find the instructions on how to just install React with npm or yarn, the way you probably would with any other JS library. OK, so there's nothing readily visible. No, really. How to just install React like every other JS library in the world isn't even described on the introductory pages. Well, maybe you try running {package manager} {install command} react That used to do the obvious thing, but now it doesn't because even the essentials are divided among multiple packages with non-obvious names. So at this point, just a couple of minutes after you decided to give React a try, you're already confused about how it works in NPM and thinking basic documentation is missing, and you haven't even installed it or written a line of code yet. Maybe you find a link somewhere to the page about the "most popular and approachable toolchains". OK, that looks promising. You click the link and... you're confronted with create-react-app, Gatsby, Next.js and a bunch of other dubious, heavyweight tools, not that you know that because you've never heard of them. But there's still no sign of how to just install React and try it out like any other JS library. So you go to the kitchen, make a coffee, come back and ask your mentor whether it's really necessary for you to use such a complicated and difficult tool, and whether you can just use Vue instead. This comment is based on a true story. :-(

Longwelwind 8y ago

If your project grows big, you will at some point need to use a state management library like VueX which has similar concepts than Redux, so I'm not sure this argument holds. My biggest problem with Vue is the template syntax. Since JSX is a thin layer over Javascript, few modifications have to be done over Javascript (or Typescript) tools to make them work with JSX (or TSX). Vue templates are a totally new language which requires more complex tools. I've never had any problem using refactoring tools (renaming variables, go to declaration, find usages, ...) with React, while in my last Vue project, renaming a variable broke code. Vue has Vuetify, which has been a breeze to use, though. I don't know if there is a React equivalent.

leipert 8y ago
You can use TSX and JSX with Vue: https://vuejs.org/v2/guide/render-function.html https://vuejs.org/v2/guide/render-function.html
mcv 8y ago
Vue templates are not in any way more of a totally new language than JSX is. Vue templates are simply XHTML snippets with added data bindings. JSX is not quite XHTML (you have to use className instead of class) with added data bindings. I find Vue templates slightly cleaner for that reason, but the difference isn't big. How they're used is different, though: React wants everything, including the XHTML, to be javascript. Vue puts it all in HTML, with script tags for the javascript.
- mlsarecmg 8y ago
  JSX is a dsl, like typescript or flow, it doesn’t change or affect your code, all assumptions stand, it doesn’t break scope. Vue templates are not a dsl, they break all assumptions and your scope. There is no difference between Vue and angular in that regard, both could not do this with templates: const A = () => <div /> const B = () => <A /> JSX turns that into: const A = () => createElement('div') const B = () => createElement(A) That is all that JSX does. Vue on the otherhand parses its own language, breaks scope, separates concerns that shouldn’t be separated and in the end joins them via dependency injection again. We’ve been through this years before Vue existed with angular and others. BTW, your info is outdated. "class" is allowed in React as of V16.

woah 8y ago

I can’t go back to a hobbled templating pseudolang after jsx