finished day 1 of project, which is just building card

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.env
 
 # testing
 /coverage

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.6.8",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0"

src/App.js

@@ -1,14 +1,38 @@
-import React from "react";
+import React, {useState, useEffect} from "react";
+import NasaCard from "./NasaCard";
+// import {nasaData} from "./data";
+import axios from "axios";
 import "./App.css";
 
 function App() {
+
+const [nasaData, setNasaData] = useState();
+
+useEffect(() => {
+axios.get(`https://api.nasa.gov/planetary/apod?api_key=${process.env.REACT_APP_API_KEY}`)
+.then(response => {
+  console.log(response.data);
+  setNasaData(response.data);
+
+})
+}, []);
+
+// this is needed for the initial render since state is empty. 
+// state is empty until we call setState within axios
+if(nasaData === undefined){
+  return <h1>loading...</h1>
+}
   return (
     <div className="App">
-      <p>
-        Read through the instructions in the README.md file to build your NASA
-        app! Have fun <span role="img" aria-label='go!'>🚀</span>!
-      </p>
-    </div>
+      <NasaCard 
+       title = {nasaData.title}
+       date = {nasaData.date}
+       imgUrl = {nasaData.url}
+       desc = {nasaData.explanation}
+      />
+
+      </div>
+
   );
 }
 

src/NasaCard.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+
+
+function NasaCard(props) {
+const {imgUrl, title, desc, date} = props
+
+return(
+    <div className = "card">
+    <div className = "image-container">
+       <img src= {imgUrl} alt="Daily Photo from NASA" />
+    </div>
+    <h1 className = "card-title">{title}</h1>
+    <div className = "card-description">
+       <p>{desc}</p>
+       <p>{date}</p>
+    </div>
+    </div>
+)
+
+
+}
+
+
+
+
+
+export default NasaCard;