Why does the component tree put specific data before general data? Why is App.js more specific than its child component?

I don't think you're necessarily wrong. You can look at any "tree" from root-to-stem or stem-to-root.

In the case of my limited understanding of React components - the reason you're passing the info to the "parent" App.js is because you need a way to pass it down to its children. If the children were stand alone you could pass the "parameters" to the children directly. Because App.js contains nested components you can think of it as a big function that you'e passing a large object to - and that function - App.js is handling distributing the arguments to all its sub-components.

Also, I think App.js was a last minute wrapper structure. So, in general you build small re-usable components and then pick the ones you need and wrap them around a larger container (in our case it was App.js). In my mind I thought of the <Player/> and <Counter/> components as lego pieces and App.js as the finished Lego toy - which contains as many <Player/> and <Counter/> pieces as needed.

Hopefully this didn't further confuse you! ;p