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.

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.