This chart is over complicated and I feel like it's meant to throw you off and make you feel like React programming is over complicated, which it isn't.
Don't let this scare you away from React. React is simple.
Remember, React is just the view layer. You can do whatever you want outside of React. You don't have to buy into anything else. And if you want to, you can buy into them piecemeal. You're not locked into anything, don't worry!
Here's a short cheat sheet:
- Use create-react-app. It does every single boilerplate thing perfectly for you. You don't need to worry about gulp or weback for a single second.
- Don't worry about yarn. Don't even worry about npx. Just use npm. There are binaries inside ./node-modules/.bin/ if you need them.
- You absolutely do NOT need a CSS preprocessor with React. When you make reusable components, you can just add style={...} to them and you have good old fashion encapsulation.
- Want Types? Just add TypeScript, you have nothing to lose, it's battle tested and very easy to integrate lately. It won out over Flow. Don't want types? Skip this! You don't need them! Skip PropTypes, it's falling out of use and if you're using TypeScript then it's not even a little helpful.
- Want Routing? Use React-Router 4. They ditched the old imperative API. Now is honestly just shorthand for "if location.href matches this pattern, then render this given thing in my place" and if you think of it like that then you never have trouble with it again.
- Want to react to events imperatively, maybe from Socket.io? Use Kefir. At the mouth of the stream you create a function that takes events in, and pass it to a component that gives it a handler that takes incoming events and handles them. Think of it like Unix pipes except you get to create both ends and pass them around your app. Still too complicated? Just write your own function that does exactly this for you, BAM suddenly it's demystified and you can delete it and install Kefir now.
- Want to manage your state? Just pass things as props and use setState! You really don't need to learn Redux or Mobx, they are overkill for 90% of apps. People only seem to adopt them because they think they need them, because of pages like OP's.
- Don't worry about GraphQL! fetch works great, there is a built in polyfill in create-react-app, and Express.js makes it really easy to pass JSON around.
- Worried about testing frameworks? Don't even worry about testing if you don't want to! Test driven development is great if your manager or client wants it, but it's absolutely not necessary to writing a good product. Anyone who says otherwise either belongs to or leads a cult. Software development is a job, not a religion! There is more than one way to skin a cat ;) If you still want tests, create-react-app has some stuff built in for that. I've never used it but I hear it's good.
I strongly believe React is the future. We do have some problems with bundle sizes but if the community pulls together and React gets enough love and attention, we'll keep fixing these things like we consistently have been. And don't worry about all the extras, none of them are necessary to learn and get productive!