React30-Project 13: SpaceX Launch Info app

Title image

Introduction:

In this tutorial, we’ll build a SpaceX latest launch info app using React. The app will fetch data from the SpaceX API and display launch information along with a video player using the react-player npm package.

Goal:

1. Fetch spaceX launch data from below API: https://api.spacexdata.com/v4/launches/latest
2. Show info about launch in left section and video player in right section to view stream of video launch using `react-player` npm as shown below:

App Preview

Try building the app once before proceeding with solution below

Prerequisites:

Before starting, ensure you have the following:

• Node.js installed on your machine
• Basic knowledge of React.js

Implementation:

Step 1: Set Up a New React App

Create a new React app using Create React App:

npx create-react-app spacex-launch-info
cd spacex-launch-info

Step 2: Install Dependencies

Install required dependencies

npm install react-player axios

Step 3: Create Components

Inside the src folder, create a new folder named components. Inside it, create two components:Header.js and LaunchInfo.js

// Header.js
import React from "react";

function Header() {
  return (
    <nav className="navbar navbar-dark bg-dark">
      <div className="w-100 text-light">SpaceX launch</div>
    </nav>
  );
}

export default Header;

import axios from "axios";
import React, { useState, useEffect } from "react";
import ReactPlayer from "react-player";
function LaunchInfo() {
  const [launchData, updateLaunchData] = useState(null);
  useEffect(() => {
    fetchLaunchData();
  }, []);
  async function fetchLaunchData() {
    try {
      const request = await axios.get(
        "https://api.spacexdata.com/v4/launches/latest"
      );
      console.log(request.data);
      updateLaunchData(request.data);
    } catch (error) {
      console.log(error);
    }
  }
  function renderLaunchInfo() {
    if (launchData) {
      return (
        <div>
          <div className="container mt-5">
            <div className="row">
              <div className="col-md-6">
                <h6 className="text-secondary">SpaceX Latest Launch Info</h6>
                <h2>{launchData.name}</h2>
                <p className="text-secondary">
                  SpaceX Crew-5 was the fifth operational NASA Commercial Crew
                  Program flight of a Crew Dragon spacecraft, and the eighth
                  overall crewed orbital flight. The mission was successfully
                  launched on 5 October 2022, with the aim of transporting four
                  crew members to the International Space Station (ISS). The
                  Crew Dragon spacecraft docked at the ISS on 6 October 2022 at
                  21:01 UTC.
                </p>
                <button className="btn btn-primary mt-2">More info</button>
              </div>
              <div className="col-md-6">
                <ReactPlayer
                  url={`https://www.youtube.com/watch?v=${launchData.links.youtube_id}`}
                  width="100%"
                  height="415px"
                  controls={true}
                />
              </div>
            </div>
          </div>
        </div>
      );
    }
  }
  return <div className="container mt-2">{renderLaunchInfo()}</div>;
}

export default LaunchInfo;

We make a request to SpaceX API in fetchLaunchData function and then show details to user. react-player is used to show video from API response in the form of Youtube URL.

Step 4: Use the Components in App.js

Modify src/App.js to integrate the components:

import React from 'react';
import './App.css';
import Header from './components/Header';
import LaunchInfo from './components/LaunchInfo';
function App() {
  return (
    <div className="App">
      <Header />
      <LaunchInfo />
    </div>
  );
}

export default App;

Step 5: Add Styling

Update App.css file to add some basic styling:

.App {
  text-align: left;
}

Include bootstrap in public/index.html file:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

Step 6: Run the App

In your terminal, make sure you’re in the `spacex-launch-info` directory and run:

npm start

Visit http://localhost:3000 in your browser to see the SpaceX launch info app.

Source Code:

Codesandbox | Github

Conclusion:

In this tutorial, we built a React app that fetches and displays the latest SpaceX launch information. We used the react-player npm package to embed a video player for streaming launch videos. This example demonstrates the power of React in combination with external libraries to create interactive and dynamic applications. Feel free to expand and customize the app based on your requirements.

Check out my Youtube channel for more content:
SaurabhNative-Youtube

Check out part 14 in the series below to learn usage on charting library in react:-

React30-Project14