Was ist der Unterschied zwischen Bower und npm für das Abhängigkeitsmanagement in JavaScript?

Hallo zusammen! Ich bin neu in JavaScript und versuche, mich mit package managern vertraut zu machen. Ich habe angefangen, React zu lernen, und in einem Tutorial wurde gesagt, ich solle Abhängigkeiten über npm installieren, in einem anderen über Bower. Ich bin völlig verwirrt. Ich habe beide Optionen in einem einfachen Projekt ausprobiert. So habe ich jQuery über npm installiert:

npm install jquery --save

Und dann über Bower:

bower install jquery --save

Beide haben jQuery in die Ordner `node_modules` bzw. `bower_components` heruntergeladen. Aber warum gibt es dann zwei verschiedene Tools? Was ist der grundlegende Unterschied? Und warum verwenden heute alle hauptsächlich npm, während fast niemand mehr über Bower spricht? Besonders verwirrt mich, dass Abhängigkeiten bei npm in `package.json` landen, bei Bower in `bower.json`. Außerdem habe ich gehört, dass Bower mit einer "flachen" Abhängigkeitsstruktur arbeitet, npm dagegen mit einer "verschachtelten". Was bedeutet das in der Praxis? Vielleicht muss ich beide Tools für verschiedene Aufgaben verwenden? Ich wäre für eine verständliche Erklärung dankbar.