Front End Javascript, Angular, React, etc, what and where to start with?

As first framework to learn. I think I should be React.

Becouse React teach you component architecture, and learning React you will improve your JavaScript.

But I'm not saying you shouldn't continue to improving you knowledge with JavaScript.

And how you will understand you already learned React enough? You need adequate metrics.

Learning React is about have good understanding of state-setState, and component life cycles.

Write authentication with React, then same with Redux, and then try mobx.

Adopt flow-type for you applications.

Maybe then it will be interesting to try different solutions, for example Angular4 or Vue.

You only at the beginning

Hello Omar, it happened that I answered the same question a couple of days ago.

In my work life I spent 3/4 years working with jQuery, a couple years working on Angular, and a couple of years going Vanilla. I learnt EmberJS, VueJS and ReactJS ( but still no luck in working with them ).

Instead of looking at the reason why you should pick one of your proposed framework/library, I'd like to focus on why not you should choose one or the other.

I'm assuming that you are not focusing on job search ( so you're learning for the sake of learning and gathering experience ). If you are searching job, my advice is just go with the one you find more offer in your area.

If, instead, you are curious, here are my thoughts!

I'm assuming you have a basic to intermediate knowledge of JavaScript as a language ( ECMAScript 5 ).

AngularJS

Awesome framework, lots of features, but:

• steep learning curve
• documentation is complex
• most documentation and code is in TypeScript, which means you have to at least understand transpilers, polyfills and have a build system. Everything is lady out by Angular already, but the initial complexity is high
• nothing like React Native, at least not as straightforward

ReactJS

This is not a framework. A really beautiful and easy engine library, but:

• it's ECMAScript 2016, which means you have to understand transpilers, polyfills and have a build system. Everything is lady out by React already, but the initial complexity is high
• it's a library, which means you are not exposed to concept like routing, dependency injection, and others. The advantage of a framework over a library is that is a cohesive block of functionality. A framework is more complex, but generally made some choice for you: how to handle routing, dependencies, dom manipulation, ... In React you have to connect together more libraries to have the same set of features: react-router for routing, redux for state managements as examples. As things in JS ecosystem move really quickly, could be a pain learning on multiple separate libraries ( for example react-router is at it's 4 version, with 3 major breaking changes in functionality )

EmberJS

As a rubyist I found this framework totally awesome. But:

• not much documentation/tutorials around
• nothing like React Native

VueJS

Vue is like a Angular1 with a cleaner structure. Is a modular framework, which means you can "plug" functionalities when you need them ( as opposed a monolithic framework like AngularJS, where everything is there, with some minor exceptions ).

But:

• is missing something like React Native; there is something called Weex but is still in early stage

The major advantage I see in Vue is that you can start in plain old ECMAScript 5, then "improve" to components, then add transpiler, then add ECMAScript 2016, then add routing, then add (chose another one).

Conclusion

Obviously you should try to learn them all! :D

The more things you learn, the more you are exposed to different concepts, structure, way of doing things.

As pretty much everybody else noted, if you do not have a strong grasp in JavaScript, get it. Every JavaScript framework is, essentially, JavaScript :) A solid knowledge of it will help you down the path.

Happy learning!!

This is the never ending debate...There will be comments saying react. They will be comments saying angular. But I would say start learning what the frameworks solve and they find apps you can build with the frameoworks

If you are a developer that already has a software and "just wants to get stuff done" and add a front-end to it, probably every framework you mentioned is okay.

But here a bit more detail:

If you like C# or something like this, you're probably better off with Angular 2, which is written in TypeScript, that shares some ideas with C#. It makes heavy use of observables, if that is your thing.

Cycle.js is, in my opinion, the better obsevable based framework, more lightweight etc.

If you don't like or know observables this could be an overkill, but if you got a push API (WebSockets, etc.) this could really help.

If you not into this, React is nice, small API surface, gets you going quick, also
has a big eco system. It's more imperative, push down props to your components and they push up events. If you like to learn it so you know a framework (jobs, other projects, etc.) I think this is the way to go, since its more than a web framework, there are also things like React-Native or React-VR that allow you to re-use your React skills later, but if you just want this one project done, this probably doesn't matter.

If you think all the big corps are wanna steal your bacon, go with Ember or Vue, since they are community based. Ember is a way more mature than Vue, but also way more old school.

If you know jQuery and don't want to build a too big app, Vue probably could be right for your. Not because Vue isn't suited for big apps, but it recommends different concepts for them. Data-binding for small to medium apps and components for medium to large apps.

People described Vue to me as a mix os of Angular and React concepts, the bad or good parts depending on who you talk to. The last time I used Ember they just added components to their, already long, list of concepts.

If you into tiny things and want to do many things yourself, you could look into Preact (a React clone) or HyperApp.

Make some experiments with all the frameworks, when any experiment fulls your curiosity go for something bigger.

If you want to use a JavaScript framework, First you need to know the basics of JavaScript.

I recommend to start with the Understandings JavaScript: The weird parts course, on Udemy (10$)

After that you can make a lot of experiments or the basics “hello world” app of each js framework that you want. When you feel confortable with any fmwrk you can afford with it.

First - a distinction: Angular is a Framework, React is a library.

Frameworks and libraries are useful because they help you built sites faster. While a "traditionally" built sites can be built fast enough, there are always libraries, utilities, helpers making this faster. Framework is just a level up on a library.

Example: you can develop a site to support all browsers (desktop, mobile), operating systems (Windows, OS X, iOS, Linux, Android etc) without jQuery or any CSS reset or grid or helpers. People do that and there are sometimes very good reasons to do it like this.
Learn all the above languages here: hackr.io/

But it would take a lot of effort to make sure everything worked on all browsers. From, ie. how you need to attach event listeners, and how to handle them, to creating Ajax requests, doing a lot of things. The same with CSS resets, grid systems etc - if you don't use libraries, you have to take care of all the vendor prefixes and similar.

Now, let's say you use jQuery - now your JavaScript stuff takes a whole lot less effort - because you'd do ajax with jQuery, and jQuery will take care of the underlying platform.
So - you can create your site faster, and with more confidence that you didn't forget something peculiar.

React is a library that helps you make reusable views. You can create components - let's say a simple login form - and reuse it accross projects. With it, you don't have to repeat it every time.

Similarly, you can create an Angular or Polymer component.

So, when developing a new site, you add a and you're done - and you know it's working in all browsers and all OS-es.

Another thing you get is testability. You can write tests for your components, and be certain that your site is built as you intended it to be built.

Finally, the frameworks like this make it a lot easier to detach yourself from the backend perspective. You just know there's some sort of backend service that'll feed you JSON for your sites, but you don't care about it.

If you do your sites without libraries and utilities, you would have to build your own components to communicate with the backend each time you start a new site or add a new resource.

Do you need a framework? I'm also a junior FED and as I started learning JS through Angular 1.x, I never really knew that one could write a single-page-app sans framework. It is much harder, but I can see the point in not bloating up a website by installing a whole framework and using multiple dependencies, also improving performance if you are building a small site with no need for user logins, live updates of content or databasing. Then a year later, they rewrote the entire language and I hate it! Time to try a new framework, but I still don't know how to javascript well.

I've had a lot of conflicting advice from senior devs of different backgrounds. Are you coding for fun or for industry? The "all fun" side of me would try the frameworks out and see which has the highest learning gradient vs the industry-oriented side of me would feel driven to try writing a small project in vanilla JS. However the latter might be so offputting as a starter I just might as well start with a wee demo project like a to-do list or a shoutbox.

You can learn Front End Javascript, Angular, React and lots many other languages only at: hackr.io/

Don't just read the books. The best way to learn how to program is by doing it. It's easy to spend hours reading about syntax, but computer languages like human languages require you to use them in order to understand them.

Try starting with simple projects. If you're going the HTML / CSS route, play with JavaScript and get a simple div to move around on the page when you click on something. Then work your way up to more complex ones. For instance, write a simple todo list with HTML form elements. You have to learn DOM manipulation to properly handle when the user interacts with the page.

At Stanford, they teach beginning CS with games. Try building a hangman game using JS, or even just on the command prompt using Ruby or Python.

If you have decided on learning React, this is the best one so far.
kirupa.com/react/index.htm