JSX Lab

src/components/About.js

@@ -1,8 +1,14 @@
-import React from "react";
-import { image } from "../data/data";
+import React from "react"
+import {image} from "../data/data"
 
 function About() {
-  return <div>About</div>;
+  return (
+    <div id="about">
+      <h2>About Me</h2>
+      <p>Blah Blah Blah</p>
+      <img src={image} alt="I made this"></img>
+    </div>
+  )
 }
 
-export default About;
+export default About

src/components/App.js

@@ -1,7 +1,7 @@
-import React from "react";
-import NavBar from "./NavBar";
-import Home from "./Home";
-import About from "./About";
+import React from "react"
+import NavBar from "./NavBar"
+import Home from "./Home"
+import About from "./About"
 
 function App() {
   return (
@@ -10,7 +10,7 @@ function App() {
       <Home />
       <About />
     </div>
-  );
+  )
 }
 
-export default App;
+export default App

src/components/Home.js

@@ -1,9 +1,15 @@
-import React from "react";
-import { name, city } from "../data/data.js";
+import React from "react"
+import {name, city} from "../data/data.js"
 
 function Home() {
-  // update the JSX being returned!
-  return <div>Home</div>;
+  return (
+    <div id="home">
+      Home
+      <h1 style={{color: "firebrick"}}>
+        {name} is a Web Developer from {city}
+      </h1>
+    </div>
+  )
 }
 
-export default Home;
+export default Home

src/components/NavBar.js

@@ -1,8 +1,13 @@
-import React from "react";
+import React from "react"
 
 function NavBar() {
-  // update the JSX being returned!
-  return <nav>NavBar</nav>;
+  return (
+    <nav>
+      NavBar
+      <a href="#home">Home</a>
+      <a href="#about">About</a>
+    </nav>
+  )
 }
 
-export default NavBar;
+export default NavBar