I would recommend you start by building out a non-trivial project using the tools and technologies you know (jQuery), but try to do a single page application that calls services via RESTful APIs. Bonus points if you can avoid hash urls using the HTML5 History API.
If you're not familiar with the standard Promise API and ES6, add babel and the core-js shim. This gives you things like block scoped variables (let/const), arrow functions, and the new class syntax. Start here. Most new frameworks and tools expect you to know modern JavaScript.
Eventually you'll want to start breaking apart your code and organizing it by responsibility/concern. You'll want to use ES6 modules and a tool like WebPack to resolve and bundle your modules all up for production. This also means learning how to configure WebPack to transpile your ES6 code using babel.
Now just focus on building out your project and cleaning it up. Maybe deploy it so real people are using it and you can get some feedback.
Once it's been out there and people are using it, plan a major new feature change or addition. This is where you might start feeling the pain points that are addressed by modern libraries and frameworks. When you do, start researching things like Vue.js, React, Redux, Angular 2, etc. Pick one and migrate/refactor your existing code into it before attempting anything new.
If you follow this approach, then your learning will be needs driven and practical, which keeps it from becoming too academic and uninteresting.
The original poster may eventually want to experiment with server side rendering or splitting their single page app into multiple apps, and hash URLs pretty much trap you into a single page app with client side routing.
That said, I didn't mean to cast a negative light on them. Using hash URLs makes it easy to build an app that can be reverse proxied to different hostnames and paths without content rewriting (to change the base tag's url for example), and it works well with legacy browsers.
If you're not familiar with the standard Promise API and ES6, add babel and the core-js shim. This gives you things like block scoped variables (let/const), arrow functions, and the new class syntax. Start here. Most new frameworks and tools expect you to know modern JavaScript.
https://babeljs.io/docs/usage/cli/ https://babeljs.io/docs/learn-es2015/ http://exploringjs.com/es6/index.html
Eventually you'll want to start breaking apart your code and organizing it by responsibility/concern. You'll want to use ES6 modules and a tool like WebPack to resolve and bundle your modules all up for production. This also means learning how to configure WebPack to transpile your ES6 code using babel.
http://webpack.github.io/docs/tutorials/getting-started/
Now just focus on building out your project and cleaning it up. Maybe deploy it so real people are using it and you can get some feedback.
Once it's been out there and people are using it, plan a major new feature change or addition. This is where you might start feeling the pain points that are addressed by modern libraries and frameworks. When you do, start researching things like Vue.js, React, Redux, Angular 2, etc. Pick one and migrate/refactor your existing code into it before attempting anything new.
If you follow this approach, then your learning will be needs driven and practical, which keeps it from becoming too academic and uninteresting.