✔Added Bootstrap, NavBar, JS Editor.

Author: archies-coder

package-lock.json

@@ -3,10 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bootstrap": "^4.3.1",
     "codemirror": "^5.48.0",
     "react": "^16.8.6",
+    "react-bootstrap": "^1.0.0-beta.9",
     "react-codemirror2": "^6.0.0",
     "react-dom": "^16.8.6",
+    "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1"
   },
   "scripts": {

package.json

@@ -5,6 +5,13 @@
 .CodeMirror{
   font-family: monospace;
   font-size: 21pt;
-  height: 300px;
+  height: 400px;
   /* background-color: #44475a; */
+}
+
+.toggler {
+  width: 200px;
+  position: relative;
+  left: 50%;
+  margin: 40px 0 40px -100px
 }

src/App.css

@@ -1,50 +1,25 @@
 import React, { Component } from 'react';
-import 'codemirror/lib/codemirror.css';
-import './App.css'
-import {Controlled as CodeMirror} from 'react-codemirror2'
-import 'codemirror/mode/xml/xml'
-import 'codemirror/theme/dracula.css'
- 
+ import 'bootstrap/dist/css/bootstrap.min.css'
+ import { Switch , Route } from 'react-router-dom';
+import AppNav from './components/AppNav'
+import XML from './components/XML'
+import JS from './components/JS'
+import Home from './components/Home'
 
 
 export default class App extends Component {
-  constructor(){
-    super();
-    this.state = {
-      name: 'CodeMirror',
-      code: '🌹💕🐱‍🚀 MODE: XML'
-    };
-  }
-
-  updateCode = (newCode) => {
-		this.setState({
-      code: newCode,
-		});
-	}
 
-  render() {
-    const options = {
-      lineNumbers: true,
-      mode: 'xml',
-      theme: 'dracula'
-		};
+  render() {  
+    
     return (
-      <div>
-        <p className="op">
-          {this.state.code}
-        </p>
-        {/* <CodeMirror value={this.state.code} onChange={this.updateCode} options={options} autoFocus={true} /> */}
-        <CodeMirror
-          value={this.state.code}
-          options={options}
-          onBeforeChange={(editor, data, code) => {
-            this.setState({code});
-          }}
-          onChange={(editor, data, code) => {
-            this.updateCode(code)
-          }}
-        />
-      </div>
+      <React.Fragment>
+        <AppNav />
+        <Switch>
+          <Route exact path="/" component={Home}/>
+          <Route path="/xml" component={XML}/>
+          <Route path="/js" component={JS}/>
+        </Switch>
+      </React.Fragment>
     );
   }
 }

src/App.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import './Navbar.css';
+
+const AppNav = () => {
+    return (
+        <React.Fragment>
+          <nav className="navbar navbar-expand-sm bg-dark navbar-dark px-sm-5">
+          <Link to='/'>
+            <span className='navbar-brand'>CodeMirror React</span>
+          </Link>
+          <ul className="navbar-nav align-items-center">
+            <li className="nav-item ml-5 ">
+              <Link to='/xml' className='nav-link'>
+                XML
+              </Link>
+            </li>
+            <li className="nav-item ml-5 ">
+              <Link to='/js' className='nav-link'>
+                JS
+              </Link>
+            </li>
+          </ul>
+        </nav>
+        </React.Fragment>
+      )
+}
+
+export default AppNav;

src/components/AppNav.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+const Hello = props => <h1>{props.code}</h1>;
+
+export default Hello;

src/components/Hello.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Home = () => {
+    return <h1>HOME PAGE</h1>
+}
+
+export default Home;

src/components/Home.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react'
+import 'codemirror/lib/codemirror.css';
+import '../App.css'
+import {Controlled as CodeMirror} from 'react-codemirror2'
+import 'codemirror/mode/javascript/javascript'
+import 'codemirror/theme/dracula.css'
+import Hello from './Hello'
+
+
+export default class XML extends Component {
+    constructor(props){
+        super(props);
+        this.state = {
+          name: 'CodeMirror',
+          code: '🌹💕🐱‍🚀 MODE: JS',
+          viewOpToggle : false
+        };
+    }
+
+    updateCode = (newCode) => {
+		this.setState({
+      code: newCode,
+		});
+    }
+  
+    handleSubmit = e => {
+        e.preventDefault();
+        this.setState(
+        {viewOpToggle: !this.state.viewOpToggle}
+        )
+    }
+    render() {
+        const options = {
+            lineNumbers: true,
+            matchBrackets: true,
+            mode: 'javascript',
+            theme: 'dracula'
+        };
+        return (
+            <div>
+                <CodeMirror
+                    ref={this.code}
+                    value={this.state.code}
+                    options={options}
+                    onBeforeChange={(editor, data, code) => {
+                        this.setState({code});
+                    }}
+                />
+        <div className="btn btn-primary p-2 my-3 toggler" onClick={this.handleSubmit}>Toggle Code Display</div>
+        {this.state.viewOpToggle &&
+         <Hello code={this.state.code} />
+        }
+            </div>
+        )
+    }
+}

src/components/JS.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react'
+import 'codemirror/lib/codemirror.css';
+import '../App.css'
+import {Controlled as CodeMirror} from 'react-codemirror2'
+import 'codemirror/mode/xml/xml.js'
+import 'codemirror/theme/dracula.css'
+import Hello from './Hello'
+
+
+export default class XML extends Component {
+    constructor(props){
+        super(props);
+        this.state = {
+          name: 'CodeMirror',
+          code: '🌹💕🐱‍🚀 <MODE>: </XML>',
+          viewOpToggle : false
+        };
+    }
+
+    updateCode = (newCode) => {
+		this.setState({
+      code: newCode,
+		});
+    }
+  
+    handleSubmit = e => {
+        e.preventDefault();
+        this.setState(
+        {viewOpToggle: !this.state.viewOpToggle}
+        )
+    }
+    render() {
+        const options = {
+            lineNumbers: true,
+            matchBrackets: true,
+            mode: 'xml',
+            theme: 'dracula'
+        };
+        return (
+            <div>
+                <CodeMirror
+          ref={this.code}
+          value={this.state.code}
+          options={options}
+          onBeforeChange={(editor, data, code) => {
+            this.setState({code});
+          }}
+        />
+        <div className="btn btn-primary p-2 my-3 toggler" onClick={this.handleSubmit}>Toggle Code Display</div>
+        {this.state.viewOpToggle &&
+         <Hello code={this.state.code} />
+        }
+            </div>
+        )
+    }
+}

src/components/Navbar.css

@@ -2,8 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import {BrowserRouter as Router} from 'react-router-dom'
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<Router><App /></Router>, 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.