I have been trying to write this post for a very long time. There is a sweet spot between understanding something and still being aware of the difficulties in learning it which is the ideal time to write a blogpost. It might already have passed but lets give this a try.
What was hard about it
Another big point of confusion for me at the beginning was: ES5 vs ES2015, different browsers and Node.js implementing different parts of the spec, different runtimes, setting up webPack, modules vs script tags, ES6 Modules vs. CommonJS modules. I guess all of these confusions are exactly what you would expect a beginner to be confused by.
What I did
The second one got fixed when I started to learn React and Redux and implemented a project using them. The week I did was one of my all time glorious programming weeks. I was so unbelievably excited firstly because React in its purest form was similar to Angular and thus was easy for me to get into but felt so. much. better. Especially jsx felt so natural. And secondly because sane state management with Redux was so beautiful! I want to specifically point out that this is not a React vs. Angular issue. In my first project everything was new to me and on top of this while having read a lot of articles about state management and having thought about it extensively I decided not to use a state management tool. In my second project I had a lot more experience I had thought extensively about component based architecture and state management, I had crocked the general principles of single page applications and I was finally using Redux which I had been ready to do for weeks. It was bound to be a much better experience
The rest is history. I spent a lot of time getting into the code of zulip-mobile a big open-source production React-Native app and learned a lot of tricks and best practices in the course of it. Then I got into the nitty-gritty details of the react ecosystem with performance profiling, server-side rendering, pwas, styling alternatives, react storybook, redux ducks and so on and so on.
Good stuff, I tell ya...
Make yourself a simple webpack starter project. Just something that lets you use modules and ES2015 on the front-end. Write one or two small projects with vanilla ES2015 (don't bother with jQuerry) i.e a tic-tac-toe, a to-do-list, a search-box whatever comes to mind but keep it simple and uncomplicated.
Write a simple toy server using Node.js, Express and a simple database.
Learn React. The reason your first framework should be React is that it has an enormous adaptation and it will be easy to find open source projects to learn from later on. Start reading React Status. Write a simple app, again think to-do-list something only involving the front-end. Learn Redux. Write your first big project with React. I am sure you already have ideas as to what it should be. Get absorbed into the code of an active React open source app. As mentioned above zulip-mobile is great (it is React Native though so the set-up is a little more involved). The new front-end page for mozilla addons is another good option.