What is the difference between Bower and npm for dependency management in JavaScript?

Hello everyone! I'm a beginner in JavaScript and trying to understand package managers. I started learning React and in one tutorial they said to install dependencies via npm, and in another via Bower. I'm completely confused. I tried both options on a simple project. Here's how I installed jQuery via npm:

npm install jquery --save

And then via Bower:

bower install jquery --save

It seems both downloaded jQuery into the `node_modules` and `bower_components` folders respectively. But why are there two different tools? What is their fundamental difference? And why does everyone mostly use npm now, while Bower is hardly mentioned? What confuses me especially is that in npm, dependencies go into `package.json`, and in Bower, into `bower.json`. I also heard that Bower ra