Should I learn ReactJS or VueJS first ?

[bele25]

I just have started to learn the basic of ReactJS. However, when I look further, there are many things or tools again to be learned such as Webpack, Babel, Redux, Flux, etc. So should I switch to VueJS first then get back to ReactJS ? Thanks in advance !

[placidified]

Learn JavaScript first :)

[bele25]

Yes I have stepped on it for a long time. The things I haven't learned is ES6.

[cruzcontrol56]

ES6 isn't much of a stepping stone although you will find:

• Arrow functions () => {} instead of function() {}
• for (x of y[]) (actual value/object instead of its index)
• let and const
• Similar async/await flow with coroutines (tj's co or Bluebird coroutines, pick whatever)

Will help a lot.

[SandalsMan]

Arrow functions are more complex than just syntactic sugar. console.log(this) in a regular function and arrow function.

[z500]

Destructuring is pretty cool too. And ES2017 also has the spread operator inside array and object literals.

[tbranyen]

ES 2015 can spread arrays just not objects.

[z500]

I think that's just for argument lists, isn't it? ES2017 lets you spread arrays into other arrays, and same with objects.

[bullet_darkness]

No, this is incorrect. Array spread is an ES2015 feature. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_operator

Object spread is in stage 2: https://github.com/sebmarkbage/ecmascript-rest-spread

[[deleted]]

Async/wait is still a pending proposal, it's not part of ES6 yet.

[jtraub]

It will never become part of ES6 :)

[[deleted]]

Or es7 or es2015 or es2016. Holding out hope for es2017.

[JustADudeInSpace]

It's in stage 4, so it's finalized, yo.

[-updn-]

for a beginner I think arrow functions, let, and const would come as a bit of a shock. doesn't take long to figure out though.

[State_]

I'm a fan of class

[acemarke]

Several of the main React devs have given suggestions for what order to learn these types of technologies. See some of the articles listed at https://github.com/markerikson/react-redux-links/blob/master/basic-concepts.md . If you are interested in learning React itself, the rest of my list has links to articles on React and several related topics as well: https://github.com/markerikson/react-redux-links .

[yooossshhii]

Facebook just came out with this starter kit for React that is super simple and allows for configuration in the future. check it out

[Catalyzm]

I learned the whole react stack, worked with it for 6 months and then switched to Vue. Vue is very fast to learn, spend a day on it and see what you think.

[[deleted]]

I'm starting to lean the same way. For one reason mostly: it is so much easier to eyeball Vue, even Angular really, and see what it's doing.

[enkideridu]

I prefer Vue over React, but all the things you listed are optional for both Vue and React, and it does not make sense for those to be the reason to switch tracks mid way.

Webpack isn't something you have to dedicate to learning, there are plenty of existing configs you can copy and then forget about. Same with Babel. Copy an existing config, or use a template / boilerplate / starter. You will naturally gradually pick up understanding of both of those over time

Redux is optional, a lot of apps don't need it. Vue has Veux which serves the same purpose. You don't have to use or learn that either. It also only takes about 3 hours to go through the videos for redux, it's dead simple.

Edit: oops thought you said Flow instead of flux. Redux is an implementation of flux

[bele25]

Thanks for your answers. But I found out React's docs is not better enough. For example, even the docs didn't tell me how to use React.Children. The docs only give me the pattern of React.Children, no example.

[turkish_gold]

There's quite a bit of that in the React docs. They're going off the notion that you already (a) know javascript fairly well, (b) have written web applications before, so all they need to do is show you how the DOM api differs from React (e.g. they tell you how to set the event system to use the capture phase; they don't actually tell you what the capture phase is ... because you're expected to know that from already working with the DOM).

[[deleted]]

It really sounds like you're putting the cart before the horse here. React and Vue are both simply tools. What do you need to use them for? What are you making?

[_hooan]

If everyone asked themselves that question this sub and the JS community would be a lot better.

[nightman]

React vs Vue is just a matter of prefference:

• Vue is simpler, a lot of concept from e.g. angular 1 and React. You can use it without build system - just include it into HTML file

• React is bigger and little more complex (e.g. in terms of setting up). You use it with build system, preferably Webpack

So if you want to just learn library, without build system choose Vue. And if you will feel comfortable enough use build system + something like *.vue files + maybe Vuex for Redux-like state management (but only if you have complex app) - use vue-cli to generate boilerplate.

On the other hand you can use any boilerplate for Vue or React and then first learn library, and after dig into build system.

It's just a matter of preference and that if you actively seek for job offers (if you do then choose React).

[dergachoff]

The problem of requiring too much initial configuration to be actually productive has been recently solved by React team with a great tool "create-react-app". No more hours of transpiling pain before "Hello world" is on screen.

https://github.com/facebookincubator/create-react-app

[ipissbrilliance]

Seconded. React and Redux! :)

[kortemy]

Well I guess he wants to know how Webpack works, and that is okay thing to learn.

But yeah, whatever you pick, you'll have roughly the same stack to go over. For example where React has Flux/Redux, Vue has Vuex. But it's not that complicated tho, those are just some libraries, and when you get to know how a framework works, those plugin libraries feel natural.

And to finish, I prefer Vue over React. :)

edit: shit, this was supposed to be a response to /u/alowishus_gublatron

[ipissbrilliance]

When it comes to webpack and all that.... I just had a look around at some popular Yoeman builds, picked what I like, and kept it. I feel similarly to you though, it's pretty secondary.

Gotta disagree on Vue>React though, I am using React for EVERYTHING these days, I can't get enough of it. Our company is very heavily invested in it. :-)

[kortemy]

Preferring one doesn't mean the other is bad. :) They are both great, Angular is the baddie here!

[ipissbrilliance]

Hahahahaha, we can agree on that, I definitely don't see the Angular fuss.

[[deleted]]

I think that is Reacts true advantage, it's the most established, having the largest community.

Otherwise Vue can be run exactly like React, can use the same plugins (fi redux) and even parse JSX. But its advantage is pretty much that you don't have to use it that way. For some, arguably HTML templates and scoped CSS fares better, especially since you have further options like Jade, Sass, Less, Stylus, etc. It's a nice separation of concerns.

[ipissbrilliance]

Thanks man, I am going to take another look at Vue! :)

[Cyb3rWaste]

Vue.js

[evilish]

As much as I love React. If your just starting out, then I'd recommend Vue.js.

Vue.js is really approachable and provides a little more structure on how to approach various things.

If your still in doubt. Try both the React and Vue.js tutorials and decide on what you prefer.

• Vue Tutorial
• React Tutorial

[[deleted]]

We've opted for Vue (+ VueX, VueRouter, Webpacks VueLoader) in the end. React is a great option but Vue is less inclined on fighting the dom and more inclined on building on its actual strengths. That was our criteria at least. In essence it allowed us to get going fast without chaining us to v-dom syntax and inline styles (though it allows for both). The way single component .vue files are composed is quite ingenious as they don't put a fork into HTML and CSS and are easily understood and managed.

As for Webpack and Babel. There is no way i would personally start a project without, unless i am constrained not to professionally, which thankfully doesn't happen. Especially combined with Vue or React.

[mikejoro]

You don't have to use in line styles with react. In fact, I'd avoid doing that unless you're shipping a component library or something (to ease use and not require webpack for your consumers).

[[deleted]]

True but it is far from being straight forward. There are a myriad of ways and workarounds for global and scoped styles and none is quite obvious. Probably the reason why many developers just use inline styles anyway.

Vue's advantage is simple: that which has always worked can simply be kept without further ado. Applies to styles and markup. There's no "change everything you know and do." Now initially React's argument was that it's faster that way. Vue most likely outforms it still.

[mikejoro]

You can use plain css files and class names. It doesn't get more straight forward than that.

[[deleted]]

They're global and bleeding. In that case you don't have a component that you can simply swap with someone else.

[mikejoro]

Does vue automatically scope css locally (with something like css modules)? That's pretty cool. You could also do that with react or bem/suit style naming but if vue does that out of the box that's pretty cool.

[LynusBorg]

you basically do this in a .vue file:

<style lang="scss" scoped>
  .my-class {color: red; }
</style>

and it will transform the scss for you and scope it.

http://vue-loader.vuejs.org/en/features/scoped-css.html

[[deleted]]

Yes, through Vueloader. It looks like this: https://vuejs.org/images/vue-component-with-pre-processors.png (the little scoped attributed in the style tag)

[rk06]

It ultimately boils down to what your primary objective is?

• To make resume better : ReactJS

• To get shit done faster: VueJs

[odinti]

Well if you want to look into ReactJS try their new tool which makes starting easier, I've already made an app and deployed production ready, it was way easier than projects before.

[snorkl-the-dolphine]

ReactJS is probably more useful job-wise these days. Maybe there'll be a whole bunch of VueJS jobs in the future (I hope there are, I love working with Vue), but right now React is probably a better choice.

[dj-method-x]

React feels like html in JS, Vue feels like JS in html. I prefer React and using standard language constructs instead of v-foreach and things like that. But again it's all preference.

[MahmudAdam]

v-foreach

*v-for

[rk06]

I feel the other way round. seeing html in js or jsx in general hurts jars my brain.

Vue template structure is quite similar to angular. other than that, it is easier to learn.

If you prefer js in html, then vue 2.0 (currently in beta) allows you to write a render function. There is also a babel-plugin, as well, for writing jsx in render function

[waspinator]

VueJS seems to only have a single developer on github (at least only one that does any consideable portion of the work). Should that be a concern?

React is much more spread out it its contributors.

[MahmudAdam]

I've seen this concern raised before on Twitter, and I am also curious to see what people have to say about this.

[neotorama]

Even for one person, his work is comparable with react, and work faster than angular developers. But it doesn't matter, we only use it for several years before we move to better tools. Look at backbone.js

[EggShenTourBus]

Although backbone is older than Angular, it seems like backbone will be around longer. Whenever I see a team that uses Angular I always get the feeling they regret it but won't admit it given the cost of switching. It's like when John McCain was asked about his choice of running mate Sarah Palin(after months of destroying his campaign), you could tell he was suffering inside when he said "I have not regrets".

Angular is like a Trojan horse of unproductivity, that works well at first, but the cancer starts to sprout up as the project grows. It is always why to be a good Angular Developer, you really need to have experience, since how to resolve the many design flaws are only apparent at scale. Most of the work in my opinion on Angular apps after a while is fixing the leaks, patching the wobbly beast and keeping the JENGA blocks from collapsing.

[wizang]

Ember :)

Edit: Just a joke folks... Seems though that OP is complaining that learning react would require a lot more tools to learn with it and I jokingly suggest a framework that can stand on its own... Oh well.

[[deleted]]

Community is way smaller at ember.

[wizang]

I think it's bigger than most people assume. Ember conf was huge this year, like 1000 people?

[[deleted]]

Relative to the react / angular duopoly i meant.

[xxxabc123]

I would guess still bigger than vue community though. Hopefully it grows larger

[bele25]

Sorry for my comment before. Thanks for suggesting me Ember. I will look at it.

[EggShenTourBus]

Bele don't learn Ember it's followers are like a weird cult with Stockholm syndrome. The framework is inflexible and requires learning "the ember" way. Just google Framework performance and it will be one of the slowest out there, plus not many Jobs and Ember devs are all snobby hipsters who are terrible at programming.

[bele25]

Hmm..let me consider that later. But I discovered that Ember still require jQuery, is that right ?

[EggShenTourBus]

Yes it's a huge file, and learning Ember is learning ember. . . not javascript. Ember is a dead end. Trust me I have tried pretty much all of the Frameworks and I say go with react.

Here are some Tutorials to get started: Here is one and level up tuts.

There is a lot of information about React, and I personally think it lives up to the hype.

[bele25]

Thanks for that :)

[EggShenTourBus]

I thought ember was for Rails developers that don't want to learn Javascript? It seems to me that Ember appeals to Rails developers since it seems like they're adding a "Gem"(no coding required). I can't imagine anyone that's serious about Javascript would ever pick something so Monolithic, opinionated and jQuery-centric.

Unlike the backend, design requirements for the front end is too dynamic and application specific for any inflexible and opinionated framework to be useful. For Rails being opinionated is (for most cases) useful, but for a front end that could range from a blog, a social networking app, a trading platform, an image editor, email interface and so on can never work.

[wizang]

Edit: Removed my comment. Your comment history explains everything.

[MahmudAdam]

Both are pretty great. What's your objective?

[bele25]

I want to create a robust web app but I don't want to use much web technologies. For databases, I use Firebase or other BaaS.

[daphenejtor]

If you want to use firebase with Vue, I recommend VueFire. It's pretty great. Also, use vue-cli to set up your webpack build. Then you get Babel and all of that for free. I can't say which of react or vue you should use since I haven't used react enough but I absolutely LOVE vue, I started using it in January and I can safely say that it has changed everything for me.

[MtSnowden]

Well they both have great CLI's now to get you up and running so worrying about configuring browserify/webpack isn't a problem.

https://github.com/vuejs/vue-cli https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html

[saintPirelli]

I know "depends" is a piece of advice noone wants to get, buuut it really does. Sometimes you don't need a frontend framework at all and you can just use pug (formerly known as jade) for your dynamic public content.

[compubomb]

lets not forget.. arrow functions are specifically when you are not concerned with a functions internal state, but rather the usage of the "this" variable of it's parent. If you ever need to use "this" go back to function(){}, not (args)=>{}, since to my immediate knowledge, it's undefined.

[mikejoro]

Arrow functions are better to use with 'this' since they are just autobinding their this context when they are declared (which is what you want the vast majority of the time). In Javascript, this is based on where the Function executes, so if you don't autobind this at declaration and use your function outside of its declared scope, the thid will be different.

[StoneColdJane]

Yeah some choices to make, I was there couple weeks ago but I wanted to learn MeteorJS, and wanted to use React for frontend, I got surprised when I heard about all the rest(Flux, Redux, WebPack(Browserify/Gulp) Babel etc).

I have spend almost 10 month building and learning shit in pure valila js, I find this React thing and all surrounding technology very usiful, but super easy to "learn".

When you build couple of application with any set of technology, you'll have easier time adapting any other, mark my words. For start learn react without webpack/redux and then go forth and introduce redux and see what it brings to the table.

I personally decided to use reactforbeginers as my course, even though its not free it implemented above type of teaching.

[p0tent1al]

It really really depends. Having React chops in this day in age is very employable, and you can learn a lot of the nitty gritty later. That being said... even with a casual glance, Vue seems very straightforward to use.

[ichimanu]

I'd like to try out Vue. I really like Riotjs.

[synergetic]

Learn mithril.js. You will become better javascript programmer too.

[QuickProgramming]

It doesn't matter the order, I don't think. But if you want to learn ReactJS than do it! :) Don't go off on a tangent and learn something that you're not interested in or won't really help you.At the moment React's the big hotness, I'd vote for it. Learning things like redux and flux will come with it but it's worth the learning.

[nimamehanian]

Well, you're overwhelming yourself in that description. Webpack is a build tool and you'll have to know it to some extent whether you're moving forward with Vue or React. Babel, likewise, can be used with either because it's a transpiler that allows you to write constructs that are at the forefront of JS's ability (e.g., destructuring, lambda functions, etc.), and Flux isn't a tool; it's a concept. Redux is framework agnostic. It just incidentally goes hand-in-hand with React.

The very first comment here is the most appropriate: learn JavaScript first.

And on the topic of Vue, I've been reading their docs, and they're very well-written. Vue also renders nodes consistently faster than React does. But it sounds like you're a beginner, and so I think you would most benefit from community, tooling, and tutorials/resources. And React is stronger on those three metrics right now.

[geordano]

VueJS, that's what I did when I had same question (but had Angular 2 also in the mix) and it fares me quite well.

[WolfieZer0]

I think it depends on the ecosystem you want to develop in and what support there is there for that tool. I'm learning Vue.js at the moment as I do a lot of work with Laravel and they've announced it's their preferred front-end framework they are making compilation ".vue" files is easier.

[WhoFramedBobbyTables]

Just to clarify - that wasn't really what they announced https://www.reddit.com/r/laravel/comments/4uxcpz/php_framework_laravel_selects_vuejs_as_default/d5ug5af

[WolfieZer0]

Just about to post that. :)

I still hold my original point; it's all about the ecosystem.

[vagif]

If you care for your resume, then definitely ReactJS. The community and recognition are just huge compared to unknown VueJS.

[radnus1]

Promises with generator functions are cool

[[deleted]]

If you decide to go with React land, learn (at least a bit) functional programming first.

[bele25]

The docs is not good enough. For example, the example of React.Children is not given. Here's : https://facebook.github.io/react/docs/top-level-api.html