Client side development - Where do I begin?

Hi, 

So with that list, I believe that you are attempting to bite off more than you can chew. My recommendation woudl be to first start small and become familiar with JavaScript. David Mann has an excellent 3 part series on beginning SharePoint 2013 solutions using JavaScript on Pluralsight. I would watch all 3 (sign up for a trial if you need to at Pluralsight).

Here's the first video in ther series:
https://www.pluralsight.com/courses/developing-sharepoint-2013-javascript

Once you get comfortable with JavaScript and feel that you are familiar with the concepts and can easily perform CRUD operations on List Data, I might begin the journey towards understanding the SharePoint Framework tool chain.

To get started on that, I would check out my deck from a SharePoint Saturday last year on getting started with the SharePoint Framework:

http://www.spsevents.org/city/Charlotte/clt2016/Lists/SPSSessions/Attachments/71/Modern%20SharePoint%20Development%20SPS%20CLT.pdf

I also wouldn't jump on the framework wagon right away.. Angular, TypeScript, React, etc. - are all fantastic to learn. However the curve is steep. Coming from Server-side development you might take to TypeScript right away but some of the others take time to learn. From your list, I'd learn: 

1. Node - very elementary understanding for development

2) NPM - again check out my slides to get a handle on it

3) Gulp - for automating tasks

Then I'd maybe move on to TypeScript & Angular.. Debate is between Angular 1 or Angular 2, I'm still more in the Angular 1 boat.

Finally in terms of the "how" - Pluralsight has solid courses on all the technologies you've listed below. 

Good luck and happy learning!