As many already answered, the most effective way for me to understand js was to learn vanilla. Then I learned jQuery but it was about 4 yrs ago. Now, React, Vue and maybe Ember, I believe, are worth learning. But again, once you know js, frameworks aren't that hard to figure.
I have had about 12 interns spanning 3 years of starting up. I usually gave them to learn any of the base MVC architecture oriented JS Framework. KrakenJs or Express or Sails. The already packaged and ready to use framework approach coupled with easy to understand MVC pattern is a real starter for beginners. They can experiment right away, build a very small application like a blog or resume or to-do list. So start there.
My 2 Paise.
If the purpose of learning a framework is to be most applicable to a new job opportunity/internship - I'd take a peek at front end engineering job listings for your top companies and learn the common framework listed. React seems to be very popular these days - that's what I use currently but a couple years ago it was Angular, so things change.
If this isn't necessarily for interviewing or getting the job I would recommend just building a project, any project, and pick a framework that interests you most. Then build it with two others and compare for yourself what you liked most and why. To echo what Ujjwal Kanth said, frameworks are tools so you can't really judge a tool if you don't know the task it's being used for.
My advice is to try a few out and figure out what works for you. I found Angular difficult, React easy but not opinionated enough, and Meteor just right.
After you have a deep understanding of one, then move on to one you plan to use professionally, such as React.
As Jos Fabre pointed out, if you know JS you know the frameworks.
However, once you learn and master JavaScript, choosing a framework is an important decision. Frameworks exist to make your job as a developer easier.
In my opinion, you should ask the following 5 questions while choosing your first framework:
Does the framework impose Domain Specific Syntaxes? For example, Angular 1 had a lot of those. It was difficult to wrap my mind around concepts such as Directives, scope, apply, digest etc. React's model was much simpler as it encouraged developers to use basic JavaScript concepts (which everyone already knows).
How many companies are looking to hire developers with X Framework skills?
What is the learning curve? Is it steep?
Does this framework significantly improve the Developer Experience (DX)?
To be honest, every framework tries to teach something new and do a few things really well. All of them have downsides as well. It's up to you to try them out one by one and figure out which one aligns with your mental model.
As Ujjwal says, write a few projects with vanilla JS and notice the problems you face. Then try a framework like React, Angular, Vue or something else and see if they solve your problems.
It's fantastic to live in a world where you want to "learn all the frameworks" or just bounce around when you need it.
But that doesn't produce a master of craft. You don't learn to create a fully scalable SEO-friendly React-based SSR PWA without learning the ins and outs of React and it's inherent limitations compared to other frameworks. It takes practice, experience, and tons of time digging through docs and Medium blogs.
And once you've walked down that road, it takes time and energy to walk down another labeled something like Vue or Angular.
Pick one that you enjoy working with, and make sure you can see yourself getting paid to bang your head against it.
I'd recommend Vue for more frontend based developers. It's easier, and more hands off than other complex frameworks like React. The community has been growing steadily, and it's been implemented by default in frameworks like Laravel, so the demand has been higher in the industry.
If you want more of a challenge, or you want to build a more complex app, I'd recommend picking up React and Flux/Redux/RxJS. React does an amazing job of handling incredibly complex DOM interactions and managing state. And Flux/Redux/RxJS will help you keep your state global across the app.
If you want to build economic JS apps for things like embedding on websites try using Preact, it's a lightweight version of React.
If you want to build cross-platform applications try picking up Electron.
As you can see there are a lot of choices with pros and cons, and plenty of opinionated code decisions. Find one that you can tolerate the most and that you see the brightest future for and contribute to it. No one is a clear winner in the JS framework war, we're all just foot soldiers pushing the frontline further with each conversion and commit.
I disagree with the vanilla-JS-no-frameworks opinions. You don't learn how to drive a car by learning how to fix the engine.
So when you get frustrated looking under the hood, I would recommend Vue. Of the major frameworks out there right now, Vue is the easiest to jump into. It requires no more files than a single HTML page with one script tag to set up a project. The basic concepts in Vue are straight forward and approachable.
Learn how to fix the engine after you know how to drive.
Frameworks are there to solve a problem, but how to pick a framework unless you actually know the problem?
Knowing the problem comes when you try to write something of your own, which can only happen if you forget about all this Framework jargon and focus on vanilla JS.
OT: All this framework questions makes me wanna cringe. Guys, basics of programming is the core principle behind everything, learn that first. No amount of framework will make you a better engineer. Phew, sorry for the rant.
Praveen
Thinks inside, outside and around the box
J03
Just another bit in the byte
React if you want a job now. Vue if you want a job later or you're working on a personal project / self-employed.
I prefer Vue for its flexibility. It has the best part of Angular and React, plus it's more performant. Also the name is simple and catchy.