¿Cuál es la diferencia entre Bower y npm para la gestión de dependencias en JavaScript?

¡Hola a todos! Soy nuevo en JavaScript y estoy tratando de entender los gestores de paquetes. Empecé a estudiar React y en un tutorial me dijeron que instalara las dependencias con npm, y en otro con Bower. Estoy completamente confundido. Probé ambas opciones en un proyecto simple. Así es como instalé jQuery con npm:

npm install jquery --save

Y luego con Bower:

bower install jquery --save

Ambos descargaron jQuery en las carpetas `node_modules` y `bower_components` respectivamente. Pero, ¿para qué sirven dos herramientas diferentes? ¿Cuál es su diferencia principal? ¿Y por qué ahora casi todos usan npm y casi no se habla de Bower? Me confunde especialmente que en npm las dependencias van a `package.json`, y en Bower a `bower.json`. También escuché que Bower trabaja con una estructura "plana" de dependencias, mientras que npm usa una "anidada". ¿Qué significa esto en la práctica? ¿Quizás debería usar ambas herramientas para diferentes tareas? Agradecería una explicación clara.