| As someone who's been around frontend development for a while now, and who had a similar "wtf" moment when finally deciding to pick up React and all of its friends, I think it depends on what you want to learn... 1. If you want to learn frontend from scratch... Then I'd recommend not going anywhere near React at all. Stick with plain HTML/CSS/Javascript injected with <script> tags on the page. Throw in jQuery if you need to. Although if you're just hacking on things that need to work in Chrome / Firefox, you don't even need it. That should give you a good introduction to the fundamentals, and still be fairly easy to find tutorials and information about how to get things done. The key is to have a well-defined, but small project idea to be able to implement. When I was first getting started one of my early projects was a domain name search using the Domainr API. Something at that scale, with just one or two pages and a small amount of Javascript is perfect. 2. If you want to learn React... Then I'd recommend not trying to do add anything like Redux or Flux or Relay to begin with from the "state control" side. And don't worry about Webpack or Hot Module Replacement or anyting from the "build experience" side. The only additional thing I'd add here is Babel. While it's not required to get going with React, you'll find that 90% of people using React also use Babel for JSX, and so 90% of the tutorials are written in JSX. It's totally possible to first learn how the translate between non-JSX and JSX, and to convert it in your mind, but it'll end up confusing you way more than just deciding to get Babel running. Whatever you do, DO NOT start from a boilerplate. These things are actually completely counterproductive to learning how things work. You'll end up with a huge mess of things you don't understand! The only time a boilerplate is really ever useful is if you're having trouble configuring some tool, and you check out a few boilerplates to see how they work. If you ever actually generate a new project from one, god help you. Not recommended. With that, again, build something simple with React and JSX by itself. Self-contained, one or two pages. Be careful, because trying to throw in all of ES6 once you get Babel up might be alluring, but see if you can get by with just using straight ES5 to begin with. If you can do this for a little while, it'll be much clearer where React ends and ES6 begins. Trying to learn them at the same time is possible, but it makes it a much slower process. As the project expands, add in React Router to handle routing. If it continues to get bigger, or once you feel comfortable, add in Browserify or Webpack with HMR and Live Reload to see how much it improves your development workflow. 3. If you want to learn Redux... Here I can't really help you. I honestly am not convinced at all that Redux is a tool 90% of teams should be using. In my opinion, it's one of the primary reasons why tutorials these days are so damn complicated. If you can get away with not using it, always do that. If you have to learn it, do it the same way, get all of the React fundamentals down first. And honestly, get a live reloading development environment down first too, because Redux generally involves creating tons of files and directories to stay organized. If at all possible, I recommend looking into Relay (from Facebook) instead. It's an equally challenging amount of boilerplate and new concepts to learn, since the API isn't as clean as Redux's. But once you get it working, you can literally completely forget about data-handling logic and the app will function exactly as you expect it to. It's much, much simpler to reason about and develop around. --- Hopefully something in there helps! As confusing as it can be, once you get the hang of React, JSX, ES6, and live development it's incredibly productive and easy to reason about, and you'll want to be using it everywhere. (Redux is sadly the opposite.) |