React Webpack add new npm package - node.js

Question

How to add a new npm package with webpack? I can't understand the main idea.
Example, let's use npm install react-ripple-effect --save-dev from npm package here
After that, a bunch of files appears in /node_modules/react-ripple-effect
My structure:
>ReactApp
>>App
>>>components
----Arctic.jsx
----ArcticForm.jsx
----ArcticMessage.jsx
----Main.jsx
----Nav.jsx
>>>styles
----app.scss
---app.jsx
>>node_modules
...
>>public
---bundle.js
---index.html
--package.json
--server.js
--webpack.config.js
package.json
{
"name": "react-app",
"version": "1.0.0",
"description": "xxx",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "xxx",
"license": "xxx",
"dependencies": {
"express": "^4.14.0",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-router": "^2.0.0"
},
"devDependencies": {
"babel-core": "^6.5.1",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"foundation-sites": "^6.2.0",
"jquery": "^2.2.1",
"node-sass": "^3.4.2",
"react-ripple-effect": "^1.0.4",
"sass-loader": "^3.1.2",
"script-loader": "^0.6.1",
"style-loader": "^0.13.0",
"webpack": "^1.12.13"
}
}
webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: [
'script!jquery/dist/jquery.min.js',
'script!foundation-sites/dist/foundation.min.js',
'./app/app.jsx'
],
externals: {
jquery: 'jQuery'
},
plugins: [
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery'
})
],
output: {
path: __dirname,
filename: './public/bundle.js'
},
resolve: {
root: __dirname,
alias: {
Main: 'app/components/Main.jsx',
Nav: 'app/components/Nav.jsx',
Arctic: 'app/components/Arctic.jsx',
ArcticForm: 'app/components/ArcticForm.jsx',
ArcticMessage: 'app/components/ArcticMessage.jsx',
applicationStyles: 'app/styles/app.scss'
},
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
},
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/
}
]
}
};
app.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
var Main = require('Main');
var Nav = require('Nav');
var Arctic = require('Arctic');
// Load foundation
require('style!css!foundation-sites/dist/foundation.min.css')
$(document).foundation();
// App css
require('style!css!sass!applicationStyles')
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Main}>
<IndexRoute component={Arctic}/>
</Route>
</Router>,
document.getElementById('app')
);
main.jsx
var React = require('react');
var Nav = require('Nav');
var Main = (props) => {
return (
<div>
<Nav />
<div className="row">
<div className="columns medium-6 large-4 small-centered">
{props.children}
</div>
</div>
</div>
);
}
module.exports = Main;
arctic.jsx
var React = require('react');
var ArcticForm = require('ArcticForm');
var ArcticMessage = require('ArcticMessage');
var Arctic = React.createClass({
getDefaultProps: function () {
return {
name: "polar bear!"
};
},
getInitialState: function () {
return {
name: this.props.name
};
},
handleNewData: function (updates) {
this.setState(updates);
},
render: function(){
var name = this.state.name;
return (
<div>
<h1 className="text-center">Arctic</h1>
<ArcticForm onNewData={this.handleNewData}/>
<ArcticMessage name={name}/>
</div>
)
}
});
module.exports = Arctic;
ArcticForm.jsx
var React = require('react');
var ArcticForm = React.createClass({
onFormSubmit: function (e) {
e.preventDefault();
var updates = {};
var name = this.refs.name.value;
if (name.length > 0) {
this.refs.name.value = '';
updates.name = name;
}
this.props.onNewData(updates);
},
render: function () {
return (
<div>
<form onSubmit={this.onFormSubmit}>
<input type="text" ref="name" placeholder="Name" />
<button type="submit" className="button expanded hollow">
Submit
</button>
</form>
</div>
);
}
});
module.exports = ArcticForm;
ArcticMessage.jsx
var React = require('react');
var ArcticForm = require('ArcticForm');
var ArcticMessage = React.createClass({
render: function () {
var name = this.props.name;
return (
<h3 className="text-center">Hi {name}</h3>
);
}
});
module.exports = ArcticMessage;
The package instructions tell me to include this, but where and how? And how to include that in webpack?
import React from 'react';
import ReactDOM from 'react-dom';
import { RippleButton } from 'react-ripple-effect';
class App extends React.Component {
render(){
return(
<RippleButton>Click On Me!</RippleButton>
)
}
}
ReactDOM.render(<App />, document.getElementById("app"))

Answer 1

You don't import in webpack...Webpack is responsible to read your source and bundle all necessary modules.
The idea is:
You install a module using NPM.
You use inside your source code using import <module>
When bulding with webpack, it reads your source code, find that import and bundles it.