Make a Stellar React + NASA App in 10 Minutes ― Scotch.io


One of the most stellar open API’s out there is the NASA Astronomy Picture of the Day. In today’s article, we are going to mess around with that API and build an application that displays the photo of the day, the title of that photo, the current date, and some information about the picture.

Using the NASA Open API: Astronomy Picture of the Day (APOD), we will be building an application that displays the information that is provided by that API. The information we will display is:

  • The photo
  • The photo’s title
  • Current date
  • Information on the photo

We will be building our application with React. More specifically, we will be using the React Router and even throw in a .env file for our API key. We are going to start from a new environment, but if you would like to look at the finished code now, please visit this GitHub repo.

What is the React Router?

The react router is React’s way of navigating around an application. We are able to change pages waiting having to load each page. We will build a Single Page Application (SPA) so even though it looks like we have multiple pages, we have one that is split into sections.

Those sections, or components as we like to call them, can be navigated to depending on what the URL says. The React Router has us add to the URL to specify which component we are viewing. Generally, the Home page is declared with / and if we were to add an About page, we could do something like /about.

In our app that we build, we will be using the following parts of the React Router:

  1. BrowserRouter – How we tell our browser that we are going to be setting routes
  2. Route – Matching up a component with the URL path we assign it to
  3. Link – Using those URL path’s to already assigned components

Before we dive into the code, let’s chat a little bit about setting up our API. If we were to head to { NASA’s API } page we would find all the information about all of NASA’s open APIs. Scroll down to where it says “Browse APIs” and we will see the API we want to use, “APOD: Astronomy Picture of the Day”:


Our New React Course! Make 20 React apps. Build more than just a ‘to-do app’

In this section, we will also see the example query:

https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY

We will be using this. Where it says DEMO_KEY, we will need to replace that with our own API key. Let’s go grab that!

API Key

On the same page, we are going to scroll up to the section that says, “Generate API Key”. We can also click on “Generate API Key” in the nav bar at the top:

Fill in the required information. No need to do the “Application URL”.

Once we have done that, we will receive an email with an API Key in that email. Hold onto that key.

Nasa API Information

So far we need the following things for our NASA API connection:

  1. The following URL: https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY
  2. Our individual API Key that was sent to our email.

Now that we have all the information we will need to connect our application to the open NASA open API, let’s start building out our application!

For today’s example, we will be using the Terminal to run commands to get our application set up, get our application running, and add in dependencies. Open up the Terminal and navigate to the folder we would like our application to live.

Once there, we are going to be using the create-react-app command to get our application running. Run the following command:

npx create-react-app nasa-apod

The npx command will install and run the command create-react-app for us. The last part of that command is the name of our app. We are going to be naming our app nasa-apod, feel free to name it whatever.

Once our app is created, we are going to run the following command to get into our project:

cd nasa-apo

Open up the project in whichever text editor, for example, VS Code.

And to get our app running, we are going to run the command:

npm start

And head on over to localhost:3000 in any browser to see our default React start page.

Yay! Our React app is ready for us!

Our Components

Quickly, let’s set up our components that will hold our code. Within the /src folder, create a folder named /components. With that folder, create three files:

  1. /Home.js
  2. /NasaPhoto.js
  3. /NavBar.js

Let’s start building!

Before we start building out each component, let’s set up our App.js so that our app can have seamless routing. We will need to install the dependency. To do so, run the command:

npm install --save react-router-dom

Navigate to src/App.js and replace all the code in there with the following code:



import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Home from "./components/Home";
import NasaPhoto from "./components/NasaPhoto";
import "./App.css";

export default function App() {
  return (
    <BrowserRouter>
      <div className="app">
          <Route component={Home} path="/" exact />
          <Route component={NasaPhoto} path="/nasaphoto" />
      </div>
    </BrowserRouter>
  );
}

In here we see that we have imported the react-router-dom, our /Home and /NasaPhoto components, and set up the routing for that.

For the react-router-dom dependency, we pulled out BrowserRouter and Route for our routing.

  • BrowserRouter will wrap around our declared routes.
  • Route will help us build out our routes, what component the route will show, and how the URL route will look.

We can give BrowserRouter an alias if we want. That would look like `{ BrowserRouter as Router }` in the import.

We will be getting an error right now in our localhost:3000 view! That’s because we haven’t put anything into our components. Let’s work on those!

Our Home component is going to have a large clickable button that will take us to the other component that will display the NASA picture of the day.

Head to src/components/Home and add the following code:



import React from "react";
import { Link } from "react-router-dom";

export default function Home() {

  return (
    <div className="home">
      <Link className="home-link" to="/nasaphoto" >See into the stars!</Link>
    </div>
  );
}

Remember how in App.js we assigned the route, /nasaphoto to the component, NasaPhoto? We are now using that assignment in this component. We don’t need to tell the which component because that’s already done!

If we visit our browser at localhost:3000, we will see the words “See into the stars!” and nothing else. We may need to restart our server.

Let’s have that /nasaphoto URL route show us something! And speaking of the NASA Photo, let’s call our API!

Navigate to our src/components/NasaPhoto.js file and paste in the following code:



import React, { useState, useEffect } from "react";

export default function NasaPhoto() {
  const [photoData, setPhotoData] = useState(null);

  useEffect(() => {
    fetchPhoto();

    async function fetchPhoto() {
      const res = await fetch(
                
        `https://api.nasa.gov/planetary/apod?api_key=KEYHERE`
      );
      const data = await res.json();
      setPhotoData(data);
    }
  }, []);

  if (!photoData) return <div />;

  return (
    <div className="nasa-photo">
        <img
          src={photoData.url}
          alt={photoData.title}
          className="photo"
        />
      <div>
        <h1>{photoData.title}</h1>
        <p className="date">{photoData.date}</p>
        <p className="explanation">{photoData.explanation}</p>
      </div>
    </div>
  );
}

Let’s walk through this code!

We are using React Hooks so we see that for state, we have set it to null and later we set setPhotoData to the data we pull out of the API.

In the return() we are using photoData to use each element of the API in an organized way. We are using:

  1. Photo URL – That is the photo itself.
  2. Photo Title – That will be used as our alt for the photo and the h1 on our page.
  3. Photo Date – This will be the current date because this API is the Astronomy Picture of the Day.
  4. Photo Explanation – This will be a paragraph of information that NASA provides about the photo.

Handling the Media Type

The API sometimes sends back a short video. So we want to be able to display that properly. If the media type is “image”, we will return it as an image. If not, we will return the “image/video” in an