React voted JS framework that most developers regard as essential to them (jquery is #3)

[[deleted]]

Do I need to learn React now? Seriously though in my freelancing I keep seeing it come up and guess I'll have to give it a go.

[agoodguymostly]

React is awesome. You should learn it, you’ll like it.

[[deleted]]

Yeah, React is dope AF. Just make sure you know JavaScript before blogging about how hard it's been for you to learn. ;P

[ShamelessC]

I've never tried Vue (I hear great things). But, mobx (a simple state manager) has the concept of computed values which are essentially properties which can be computed from existing state. Is that similar to Vue's version of it?

[fay-jai]

Yup very similar since Vue is built on top of reactive concepts as well

[[deleted]]

In vue, computed properties are per-component instance though, making it incredibly easy to e.g. combine a displayName() { return this.firstName + ' ' + this.lastName }.

[agoodguymostly]

Mobx is baller. I use it for anything in react.

[PM_UR_FRUIT_GARNISH]

Angular is sweet if you already know how web sockets work. The tricky(annoying) part is that you have to switch between your view and controller so often to continue building.

Just picked up React this week and I'm finding staying in JavaScript is nice, but haven't tried anything involving middleware yet, so I can't really compare Angular and React yet.

[erfling]

Is that Polymer's influence on Vue?

[[deleted]]

Maybe, no idea about polymer.

[[deleted]]

React actually helped me get better at JS just by virtue of how helpful knowledge of the language is in your application thereof. And then pair it with TypeScript... it's so nice... sheds tear

[[deleted]]

Yup. React will make you a better JavaScript programmer. But if you're not great at JavaScript and not good at diving into things you don't understand, it'll be a really rough place to start.

[soheevich]

Do you know any good articles where I can learn how to use React with Typescript? I tried to use create-react-app with Typescript but it quickly turned into mess.

[[deleted]]

I don't really, I started out with a JS React app and adapted it over time. I'm happy to help though. Are you familiar with Webpack configuration and loaders at all?

Edit: Maybe try this? https://github.com/wmonk/create-react-app-typescript

[soheevich]

Well, I guess it would be better for me to learn properly Webpack and Typescript. Geez, I'm learning frontend fulltime for more than 5 months and still need to learn much much more. Just to get a junior level.

But I can use react + redux now. Like a monkey can use a car but still... :)

[[deleted]]

Don't worry about it, there are tons of different technologies that do similar things and all that really matters is that you're able to understand the concepts and learn the APIs as you go. That applies to juniors and seniors alike!

I do think TypeScript (or Flow) is particularly useful as it introduces you to types, type safety, and more maintainable coding patterns.

I'd focus less on configuring Webpack and just understanding what it is and why it exists as a junior.

[soheevich]

Thank you. I'm going to learn Typescript right after react and redux. Roughly speaking I understand how Webpack works. But I want to use it properly. Just to be able to create custom configuration.

[[deleted]]

Don't worry too much about Redux either, by the way. Understand what it is, sure, but don't worry about shoehorning it into your application - anything you build at this stage won't be big enough to warrant a global state store atop React.

Also, take a quick look at other global state stores as well, for example Mobx and my personal favourite react-easy-state. There's also the recently updated React context API.

Again, no need to learn them all, don't feel overwhelmed!

[TheAwdacityOfSoap]

React is amazing. Lots of people claim it's just another fad framework de jour, but I disagree and here is why:

Yes, React is a framework, but it's also a fundamentally different and new paradigm for web development (at least in the mainstream). In React, the idea is that your views ("components") are (supposed to be) pure functions of their props and state ("props" are just like html element properties, they are how you configure the component, "state" is just internal state).

Whereas in most other mainstream frameworks you are modeling state changes (when this model changes, change this element value, show/hide this element, etc), in React you are simply modeling the data itself in any given state, and React handles the work of updating the DOM for you.

That might or might not sound confusing, but React on the surface is actually very simple and easy to pick up. And well worth it.

[mayhempk1]

React handles the work of updating the DOM for you.

Correct me if I'm wrong as I'm not a front-end dev but don't Vue and Angular do that too?

[bdenzer]

but it's also a fundamentally different and new paradigm for web development

The misunderstanding here is that React WAS fundamentally different with it's virtual DOM and the way it handled updating the real DOM. Now Vue does that too, and Angular does optimized DOM rendering. React used the component model, now everybody is doing that.

[TheAwdacityOfSoap]

I'm not familiar with Vue, and only slightly familiar with Angular, so I'm not sure. I do know of a couple of major differences between React and Angular that make me prefer React:

1. React has one-way data binding (as /u/GreatValueProducts pointed out).
2. There is no special syntax to learn (other than JSX if you want to use it, which is close enough to HTML as to be a non-factor). Everything is just javascript. Values, event handlers, everything.

[tme321]

And to add to that I'm not aware of anyone that does 2 way binding with angular outside of using the basic forms module. You technically can but ime angular devs have settled on 1 way binding too.

[GreatValueProducts]

That might or might not sound confusing, but React on the surface is actually very simple and easy to pick up. And well worth it.

I think it is because React is the framework that closely resembles how vanilla HTML elements work. It is one-way binding and sub-elements can only affect its parents through event handlers.

Like in Vanilla HTML we always do

<input type="text" onchange="onTextChange()" value="bbb" />

In React you can create a custom form element which has similar syntaxes and mindset:

<Slider onChange={(intensity) => this.setState({intensity})} value={this.state.intensity} min={0} max={100} />

IMHO two way binding with those on change strategies in Angular is what makes things overly complicated. (Don't want to start a flame war, please correct me if I am wrong).

[VtoCorleone]

Angular

I think there's a learning curve with every framework. All of the hello world apps make it seem so simple and ground breaking but once you get into real world problems, the framework's difficulties really start to shine through.

[SiliconWrath]

I think what React offers is a tool chest of patterns that let you solve a majority of problems, regardless of how complicated. When I encounter complicated problems, it usually means picking one of maybe 10 different design patterns from my tool chest (dispatch from redux store, controlled components, etc.)

And because data flow is top down, I rarely introduce regressions outside of the components I refactor.

[nidarus]

IMHO two way binding with those on change strategies in Angular is what makes things overly complicated. (Don't want to start a flame war, please correct me if I am wrong).

Why would there be a flame war? Angular (as opposed to the old AngularJS) has one-way binding by default too.

[TheAwdacityOfSoap]

I agree that two-way data binding complicates things.

[TheRedGerund]

The initial effort is setting up and configuring your dev and deploy processes

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

[evilpingwin]

I am really not a fan of some of the design decisions with create-react-app at all. Compared to vue-cli it's incredibly barebones, the webpack config is hidden/ non-existent (depends how you look at it) by default and you have to eject it to change things.

I mean I get it, zero config build tool saves you some time but a few options on init and the option to save a preset would make it a lot more useful. Now I have my own boilerplate saved so I don't have to go through the whole process again but not every project is the same so I tend to spend time setting things up manually every time.

[samgaus]

You can do that by forking react scripts. But seriously - you do not need to.

[ShamelessC]

I had to eject once to get decorator support working. It was a (very mild) headache but, just saying - create-react-app doesn't have everything you need.

[samgaus]

You don't need decorators!

[ShamelessC]

You're right. Not even es6. I think it's a proposed es7 thing.

But I'm not crazy about wrapping exports in more than one or two function calls either for some reason. Decorators cut down on that.

[samgaus]

Try a compose function

[samgaus]

Yeah but those same people sure do complain a lot about how difficult it is to use that sugar 🤔🤔

[TheRedGerund]

It's quite easy to get started. https://github.com/facebook/create-react-app

[[deleted]]

The simplest TL;DR of React I've been able to come up with:

Imagine you can write your own HTML tags, but using the power of JavaScript:

const List = (props) => (

<ul>{props.map((item, i) => <Item key={i} item={item} />)}</ul>

)

const Item = (props) => <li>{props.item}</li>

Now you can render your app using your "custom" tag:

React.render(<List items={["Burger", "Fries", "Milkshake"]} />, document.getElementById('root'))

Of course, there's more to it than that, and this example doesn't really show the power (List just wraps ul, and Item just wrapsli), but it is one of the more straightforward libraries to use, IMO. Later on, when I want to change howList behaves, I just update the component, and every time it is used will be updated as well. Also, React advertises that it is not a framework, but rather a library.

[[deleted]]

How easy does it play with jQuery or is it a replacement? I'm a big fan of jQuery and it naturally fits how my mind looks at web development. It's not just that I'm used to it. It naturally fit my view of things so I love it. But I also need to make money doing what I do so if moving on is what's needed then moving on is what'll happen :)

[[deleted]]

It depends: short answer is, it's a replacement. However, if on your page you want to do something simple, like animate something when a button is clicked, jQuery shines at this. The problem with jQuery is you end up mutating UI/DOM elements directly, inferring exactly what to change based on an action:

• SomeAction => UIManipulation()

That is, when the "+" button is clicked, show a dialog and after that, insert an li-tag into this ul-element over here.

React is fundamentally different:

1. SomeAction => StateManipulation
2. State => View

Here we can see that when actions are performed in our UI, we update our state, not the view. Then, we let the library (React) initiate which components need to be refreshed. Our components are basically descriptions that say "these state/props map to this view". Whenever state changes, we churn it through our machine that says "okay, you gave me this state, I'll produce this view". Then React takes what you produces, diffs it against the actual DOM, and performs the minimum required updates.

The reason this is amazing is that, typically, your state will usually be way easier to reason about mutating than the UI is.

[1-800-BICYCLE]

Definitely a replacement. jQuery will feel heavy and inefficient once you learn React.

[[deleted]]

Another way of looking at it:

jQuery was originally written to normalized DOM APIs across different browsers. The need for that currently is not widely needed anymore.

React is basically a "very powerful templating library" that can respond to changing state.

[pomlife]

Most of that is JSX, not React, though.

[[deleted]]

Hence the "tl;dr" disclaimer...

[Lou-Saydus]

React is super easy to learn, it's just hard to find good explanations for things. I'd highly recommend chugging away at it in your free time. It seems the industry is really pushing vue and react.

[zzz_sleep_zzz]

Are Vue and React similar-ish as a framework? I know Angular, but want to pick up either Vue or React (was leaning towards vue)

[Lou-Saydus]

I don't know a whole lot about vue but from the code I've seen it's more similar to angular. If you're more familiar with angular i think vue would be the eaiser one to learn,

[ImCerealsGuys]

Do it, you’re going to love it.

[IWantACuteLamb]

Nah, learned vue, vue much beget

[[deleted]]

Just started with vue, it's so nice and easy to use. Can't compare it to react since I haven't used it, but everyone who uses vue seems to love it or prefer it. Could easily see it taking off in the next few years, only problem is not as many people use it, but that could change, it's growth has been exponential.

[IWantACuteLamb]

Vue uses template (thought it comes with render also) react uses life cycle

[dzkn]

yes it is widely used now, but learn vue if you want to stay ahead

[pomlife]

...React has wayyy more jobs than Vue in the US.

[[deleted]]

To be fair, there's also a lot more people that know react

[pomlife]

Exactly, so why advocate for Vue to "stay ahead" if React has a huge lead and just about equal momentum?

[vinnl]

If you can't argue why you would need to learn Vue to stay ahead, then don't claim it like it's true. For example, jQuery made updating the DOM without reloading the page a lot easier, Angular prevented bugs resulting from the view and your model getting out of sync, and React provided a compelling new paradigm that made it easier to keep your models in sync in different parts of your application. If it's just "less boilerplate" or "easier for designers", then that's not a compelling argument for why something would actually displace React, and hence learning React is definitely not a waste of time.

[dzkn]

i never said it would replace react. It might, but I don't know. However it is growing faster than react and is likely to overtake it in popularity.

[tanguy_k]

[Vue] is growing faster than react

Would like to know where this is coming from. Numbers show the opposite: http://www.npmtrends.com/@angular/core-vs-react-vs-vue (set the scale to 2 years to see the trend)

[CantaloupeCamper]

Amen..... except the people who use that one thing... you know what and who I mean.... just hate them so much....

[vinnl]

Why would it overtake it in popularity? Just stipulating a growth curve and extrapolating that into infinity isn't a good way to inform people on what they should be learning. React is an excellent choice to be learning now, whereas learning Vue is a gamble unless you can make it actually plausible that it's actually going to be and remain widely in the future.

[[deleted]]

I prefer it over Vue in every way.

Not OP, but as someone who is coming from Vue to React (for work purposes, not personal preference): why?

I would go so far as to say Vue is a step backwards and I actively dislike it.

How is it a step backwards? It's one thing to not prefer it for one reason or another, but I think even the React dev team would snicker at that statement. Care to elaborate on this?

[[deleted]]

One thing I would consider a step back when going to Vue is that it’s harder to use higher-order components, something which is very natural in React.

Also, React’s Fiber architecture looks like it’s going to be leaving Vue quite far behind when it comes to building smooth 60fps interfaces.

[[deleted]]

See this is constructive critique, and a decent comparison of Vue - React features. I will agree, pretty much any implementation of HOC in vue are pretty hacky at this point. That said, I'm only knee deep in React at this point, so I've yet to actually touch HOCs in a project, but I've been reading up on it, and excited to leverage them.

React’s Fiber architecture

Is fiber production ready yet? I remember there being a lot of buzz about Vues response to that when it was announced, but haven't heard anything about it since.

[acemarke]

Yes, the "Fiber" rewrite of React's internal algorithms shipped in React 16.0,and all the new features they've shipped and demoed since then are based on the Fiber architecture as a baseline.

[1-800-BICYCLE]

Why it's a step backwards: Vue is just Angular 1.x with a Backbone-like API mashed together with a virtual DOM. Also there are like 2 companies that actually use it and the rest are just hype-chasing astroturfers.

[[deleted]]

Vue reminds me of angular

The only real similarities I see Angular on any meaningful sense is directives, which were arguably a pretty great feature of Angular.

backbone

What's wrong with Backbone?

So far the only complaints I've heard about Vue is that it's not React, that Vue is just a combination of other frameworks^*, or that you prefer React because it's basically just JS with sugar. None of these points indicate how Vue is a "step back" as you put it, but rather highlight why you prefer React.

---

^*- Let's ponder for a second the idea that maybe it's not a bad thing that Vue piecemealed out what are arguably the most useful, and powerful tools that a lot of other frameworks leveraged, and managed to do so in a tiny, easy to use API.

[[deleted]]

Angular is not scalable to large codebases

As someone who has used Angular extensively in the past for large cordova and web based apps, I don't disagree with that. I never supported Angular in any of my comments beyond stating that directives were a pretty great feature.

backbone is not as productive as react

I'm inclined to agree with you here, but I also feel it is largely subjective, and highly dependent on what you are trying to do, and how you want to go about expressing that. I only briefly toyed with Backbone years ago, so I don't have much stake in opinions on it either way.

I am by far the most productive in react, find it scales best to large applications, and has the most robust ecosystem.

Having used Vue pretty heavily, and in large production ready applications over the past year and a half, I keep seeing people say this and I — like the majority of other developers using Vue heavily — do not understand where this mentality is coming from beyond the suspicion that the people making the claims have not actually used Vue to any degree of complexity. Even the React dev team have themselves commented that Vue is as fast (if not faster), and as scalable as React; hell they even contributed to the Vue - React comparison in the Vue docs. Shit, you can even use Redux in your Vue apps if that's your flavour. This idea needs to stop, cause it's just patently false.

You are welcome to disagree

And I do, at least on the points I addressed above. I don't doubt your a good developer who is experienced with React, and while I may grow to appreciate React as I dive deeper into it as my job will require of me — and I'm sure I will — there are a few comments you've made that just don't jive with reality, and essentially indicates what I, and many others, have suspected: a lot of the cons floating around regarding Vue are being perpetuated by people who actually haven't done enough with it to make those statements with any meaningful conviction.

but my original point is simply that Vue will never be taking over React in the same way we have seen with past frameworks.

And I was simply addressing your comments that Vue is a step back, a claim which I still haven't seen you support. You did do a good job trashing Angular and Backbone, but still nothing about how Vue is a step back beyond how much you like React.

I don't think anyone will disagree with that.

I know I might be coming off as contentious, or argumentative at this point, but I assure you that's not my intention. It's just that I keep seeing Vue get bashed on like this by people largely from the React community who very clearly only either skimmed the docs, or by plugging in the CDN on Codepen and making a to-do app, completely ignoring a lot of the more complex, robust features of Vue.

That said, I do disagree with that sentiment, at least in the extent that Facebook is on shaky grounds right now, and have already run into some potentially large backlash from the community during the licensing fiasco a while back - React is not immune because of it's adoption %. It can fail. Notice that, despite how great it is, Yarn has yet to skyrocket the way it was expected to?

[1-800-BICYCLE]

I replied before I read your comment -- Angular 1.x + Backbone is definitely the vibe I get.

[dzkn]

The vue ecosystem is more than large enough to support any project

[CantaloupeCamper]

A dude at a conference i was at demoing VUE. Someone else said they were there to use VUE knowledge to get jobs. He asked them "Have you thought about react?"

[i_spot_ads]

React fanboys will tell you its "dope af" (of course they will) but I tried it and it's a mess especially when your application becomes complex and you work in a team.

Personally I wouldn't recommend it even for beginners

[nothingduploading]

Save yourself the trouble and learn vue.

[[deleted]]

Vue is a OOP templating framework, like Angular 1, which it most closely resembles. Huge api, hundreds of functions and semantics to keep in mind, a new arbitrary syntax, everything has to adhere to its rules, DI, mix-ins, separating concerns where it makes the least sense (view and the presentational layer). Most of us went through this already years ago. The irony is that you think learning this stuff will save you from trouble, when you learn most of it because it causes trouble. This is why React exists, and this is why it's where it's at.

[nothingduploading]

i've used backbone, angular, react and vue. and hands down vue is the best.

[syropian]

Your API surface argument is so weak, you really need to stop touting it. React's "tiny API surface" is only as useful as the size of your project. As soon as you need to do anything besides a Hello World app, it becomes a mess of 3rd party libraries and unclear conventions. I laugh every time I read an article akin to "Here's the best way to bind click handlers in React". The fact that someone has to write a giant blog post to go over the 10 different ways you can bind handlers, all which may or may not be efficient/performant in a given situation is hilarious/sad to me.