Got some pointers for you. First, I keep a big list of links to high-quality tutorials and articles on React and related topics, at [0]. As part of that list, I have a page called "Basic Overviews" [1], which has articles that try to help clarify what these various tools are, how they fit together, and what you would use them for. There's also a couple articles in that section that give advice for how to tackle learning front-end stuff, and not be overwhelmed.

As for React specifically, there's an official tool from the React team called Create-React-App [2]. It hides the details and complexity of project config from you until you're ready to tackle them yourself, and lets you focus on just writing the app. Meanwhile, the React docs were just revamped and improved [3]. There's also a great community called Reactiflux on Discord, which is a set of chat channels dedicated to talking about React, Javascript, and React-related tools [4]. It's a great place to hang out, ask questions, and learn.

Finally, part of what's going on here is that people are trying to write highly complex and powerful applications in the browser, not just "pages" with some interactivity. Complex applications mean some meaningful amount of complexity in the project setup. These tools are basically the web equivalent of a C++ compiler toolchain and standard library. So, there's several aspects here: the tools are somewhat big, the libraries are sophisticated to enable you to manage your application's complexity, and your own app code is going to be more than just a couple click handlers.

The other thing to remember is that you don't have to use everything all at once right away. Focus on learning one or two tools and concepts at a time.

Hopefully this helps!

[0] https://github.com/markerikson/react-redux-links

[1] https://github.com/markerikson/react-redux-links/blob/master...

[2] https://github.com/facebookincubator/create-react-app

[3] https://facebook.github.io/react/

[4] http://www.reactiflux.com