new Modal in nav

app/App.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {render} from 'react-dom';
-
+import Modal from 'Modal.jsx';
 import Nav from 'nav.jsx';
 import LikeCount from 'LikeCount.jsx'
 
@@ -16,3 +16,4 @@ class App extends React.Component {
 
 render(<App/>, document.getElementById('app'));
 render(<Nav/>,document.getElementById('nav-app'));
+render(<Modal/>,document.getElementById('modal-app'));

app/Modal.jsx

@@ -0,0 +1,37 @@
+
+import React from 'react';
+
+
+class Modal extends React.Component{
+
+  render(){
+
+   return(
+      <div className="modal fade" id="exampleModalLong" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+        <div className="modal-dialog" role="document">
+          <div className="modal-content">
+            <div className="modal-header">
+              <h5 className="modal-title" id="exampleModalLongTitle">Modal title</h5>
+              <button type="button" className="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div className="modal-body">
+              ...
+            </div>
+            <div className="modal-footer">
+              <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
+              <button type="button" className="btn btn-primary">Save changes</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+   ) 
+
+  }
+
+}
+
+export default Modal;
+

app/nav.jsx

@@ -21,6 +21,10 @@ class Nav extends React.Component {
               </li>
               <li className="nav-item">
                 <a className="nav-link disabled" href="#">Disabled</a>
+              </li>
+                <li className="nav-item">
+                <a className="nav-link " data-toggle="modal" data-target="#exampleModalLong" href="#" >Modal</a>
+
               </li>
             </ul>
             <form className="form-inline my-2 my-lg-0">
@@ -34,3 +38,4 @@ class Nav extends React.Component {
   }
 }
 export default Nav;
+

index.html

@@ -19,7 +19,9 @@
 
    <div id="nav-app">
 
+
    </div>
+   <div id="modal-app"></div>
 
     <div id="jumbotron-app" class="container">
       <div class="jumbotron jumbotron-fluid bg-transparent">

package.json

@@ -50,13 +50,14 @@
     "gulp-livereload": "^3.8.1",
     "gulp-sass": "^3.1.0",
     "gulp-sourcemaps": "^2.6.0",
+    "jquery": "^3.2.1",
     "picturefill": "^3.0.2",
+    "popper.js": "^1.11.1",
     "react": "^0.14.9",
     "react-addons-css-transition-group": "^15.6.0",
     "react-addons-transition-group": "^15.6.0",
     "react-dom": "^0.14.9",
     "smoothscroll": "^0.2.2",
-    "jquery": "^3.2.1",
     "svg4everybody": "^2.1.0",
     "tether": "^1.4.0",
     "webpack": "^3.1.0",