Add MainContainer component

feelsbook/feelsbook/package.json

@@ -3,7 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bootstrap": "^3.3.7",
+    "jquery": "^3.3.1",
+    "popper.js": "^1.14.6",
     "react": "^16.7.0",
+    "react-bootstrap": "^1.0.0-beta.4",
     "react-dom": "^16.7.0",
     "react-scripts": "2.1.3"
   },

feelsbook/feelsbook/public/index.html

@@ -38,4 +38,19 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
+  <script
+  src="https://unpkg.com/react/umd/react.production.js"
+  crossorigin
+  ></script>
+  <script
+    src="https://unpkg.com/react-dom/umd/react-dom.production.js"
+    crossorigin
+  ></script>
+  <script
+    src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
+    crossorigin
+  ></script>
+  <script>
+    var Alert = ReactBootstrap.Alert;
+  </script>
 </html>

feelsbook/feelsbook/src/App.js

@@ -1,25 +1,12 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import MainContainer from './components/MainContainer';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
+        <MainContainer></MainContainer>
       </div>
     );
   }

feelsbook/feelsbook/src/App.test.js

@@ -6,4 +6,4 @@ it('renders without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(<App />, div);
   ReactDOM.unmountComponentAtNode(div);
-});
+});

feelsbook/feelsbook/src/components/MainContainer.jsx

@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import './css/MainContainer.css';
+import { Card } from 'react-bootstrap';
+import { Nav } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
+
+class MainContainer extends Component {
+  render() {
+    return (
+      <div className="MainContainer notebook">
+        {/* <Card>
+          <Card.Header>
+            <Nav variant="tabs" defaultActiveKey="#first">
+              <Nav.Item>
+                <Nav.Link href="#first">Active</Nav.Link>
+              </Nav.Item>
+              <Nav.Item>
+                <Nav.Link href="#link">Link</Nav.Link>
+              </Nav.Item>
+              <Nav.Item>
+                <Nav.Link href="#disabled" disabled>
+                  Disabled
+                </Nav.Link>
+              </Nav.Item>
+            </Nav>
+          </Card.Header>
+          <Card.Body>
+            <Card.Title>Special title treatment</Card.Title>
+            <Card.Text>
+              With supporting text below as a natural lead-in to additional content.
+            </Card.Text>
+            <Button variant="primary">Go somewhere</Button>
+          </Card.Body>
+        </Card>; */}
+
+        <Card style={{ width: '18rem' }}>
+          <Card.Img variant="top" src="holder.js/100px180" />
+          <Card.Body>
+            <Card.Title>Card Title</Card.Title>
+            <Card.Text>
+              Some quick example text to build on the card title and make up the bulk of
+              the card's content.
+            </Card.Text>
+            <Button variant="primary">Go somewhere</Button>
+          </Card.Body>
+        </Card>;
+      </div>
+
+    );
+  }
+}
+
+export default MainContainer;

feelsbook/feelsbook/src/components/css/MainContainer.css

@@ -0,0 +1,3 @@
+.notebook {
+    background-color: #ffe49b
+}

feelsbook/feelsbook/src/index.js

@@ -1,12 +1,7 @@
+import 'bootstrap/dist/css/bootstrap.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
+ReactDOM.render(<App />, document.getElementById('root'));