James K Nelson writes React tutorials and opinion pieces on state, routing, Flux, Babel, and universal rendering.
HN commenters recommend his Learn Raw React post as a good basic introduction to React that avoids JSX, Flux, and Webpack.
My suggestion is to go through some full-stack tutorials. Vary them up to learn how workflows with different library combinations/boilerplates feel for you.
For React my quick and dirty intro a few months ago involved: http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/ and then following along with http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html
The first link is very light on dependencies and brief. The second link is basically a mini-ebook going from front-end to back-end but walks you through the choices very well.
What you want to do is build apps, so look for tutorials that make you build an app from start to finish. Do a number of those, semi-rotely, and you'll develop familiarity with the tools and methods they use. That's when you want to deep dive on specific libraries and stacks.
Imagine how complicated it would be to try to learn Rails by learning ActiveRecord and then ActiveSupport etc. The interesting work happens when all the dependencies are combined -- and the challenge/beauty of the framework is how it combines them -- not when they are taken as individual libraries. Boilerplates are shitty, immature frameworks but similar principles apply.
You should learn React for one simple reason: It's quite definitely going to be huge. Well, that's what I was saying a year ago - it's fair to say now that it is already huge and it's likely to stick around for a long time (at least in JS years).
If you're involved in the JS scene, learning React will give you a big advantage. At which point you can decide whether you like it or not.
As for mixing JS and HTML, I went to a talk at last year's React Europe that beautifully explained why this isn't a concern. I had the same reservations at first, but I was convinced then. Suffice to say, give it a shot and see how you feel about it after (besides, jsx is optional).
Start here: http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/
I started with this tutorial[0] that covers react with no JSX, no Flux, no ES6, and no Webpack.
It is just a couple of script includes and normal html/javascript.
From that tutorial, I was able to understand exactly what react is. Then I started adding in the other items on top.
It's definitely not a boilerplate "site in 5 minutes", but it's also a lot less confusing when trying to learn what's going on underneath the hood with react.
[0] - http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/
I can highly recommend anything written by James. His previous "Learn Raw React" post ( http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/ ) is one of my most frequently recommended articles for people who want to understand the basics of React without any buzzwords, and his new site builds on that approach with a bunch of interactive examples.
For anyone looking for more info past that, you may be interested in my React/Redux links list at https://github.com/markerikson/react-redux-links .
Google has been saying that for years, but I don’t really believe it…
1) First there were the "hashbang" URLs, that Google said they'd crawl fine, but that did affect Gawker's SEO: http://www.webmonkey.com/2011/02/gawker-learns-the-hard-way-why-hash-bang-urls-are-evil/
2) And instagram uses server rendering for SEO: https://twitter.com/cpojer/status/711729444323332096 (via http://jamesknelson.com/universal-react-youre-doing-it-wrong/)
This article was my first exposure to React, and it goes through the basics of building a very simple "list of people" using nothing more than a single HTML file. It doesn't even use JSX, instead showing you how to build the raw JS that the JSX would compile to. I found it to be a great introduction without a lot of overhead to learn.
http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/