D2 The first component of SpaceTravel🌌🌠 is ready and fixed one headache issue

Hackathon Journey Day 2-first component project is ready
hello all 😊👋
In this article includes following things

• How i built first component of the project
• which things i used and also how project look
• and how i solved one issue related to react route
• insights related to next component

How i built first component
Firstly i tried so many things like three.js and other libraries but then i came to the react-globe npm package that built with help of three.js and and with help help of react and then i installed and imported easily that stuff and included that in my globe component and then i struggled😭 with plain css files in react components for button firstly i am thinking about should i use styled-components and then my funny mind saw other things like bulma/and matrial UI etc and then i remembered for last project i used Example.module.css thing and that worked fine and then things are good worked fine and then i am thinking on thing like after clicking button stars will fall with help of onClick etc events but eventually i gave up on that and then thought about after clicking button putting sound of missile launch and then it worked fine with help of react-hooks so now i will show few code snippets of my components

Globe.js

import React from "react";
import styles from "./Globe.module.css";
import ReactGlobe from "react-globe";
import useSound from "use-sound";
import sound from "../Missle_Launch-Kibblesbob-2118796725.mp3";
import { Link } from "react-router-dom";

function Globe() {
  const [play] = useSound(sound);

  return (
    <div className="Globe">
      <ReactGlobe height="90vh" width="100vw" />
      <div className={styles.buttons}>
        <div>
          <span>⭐🌟☄🌠🌟☀🌌🪐🌍🌚🌙🌕</span>
        </div>
        <div>
          <Link target={"_blank"} to="/Space">
            <button onClick={play} className={styles.button}>
              Welcome To The Space Travel🌌
            </button>
          </Link>
      </div></div>
    </div>
  );
}

export default Globe;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Space from "./components/Space";
import Globe from "./components/Globe";

ReactDOM.render(
  <BrowserRouter>
  <React.StrictMode>
    <Switch>
    <Route exact path="/" component={Globe}/>
    <Route path="/Space" exact component={Space} />
    </Switch>
  </React.StrictMode>
  </BrowserRouter>
 ,

  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Space.js

import React from "react";
function Space() {
  return (
    <div className="Space">
      <h1>hello world</h1>
    </div>
  );
}

export default Space;

Globe.module.css

.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #0c0f0c;
  border: none;
  border-radius: 25px;
  box-shadow: 0 9px #999;
}
.button:hover {
  background-color: #9fa79f;
}

.button:active {
  background-color: #090a09;
  box-shadow: 0 5px rgb(231, 227, 227);
  transform: translateY(4px);
}
.buttons {
  text-align: center;
  background-color: #384ab1;
}

How the app looks like now🔽☄🌠

• the earth is 3d and continuously revolving and after clicking on the button missile sound will come and then the new page will be opened so that new page thing took me 2 and a half hours so that I tell within a second below

React router issue and how I fixed that
first, the story is following
I am using react-router for clicking the button and opening different component in new tab button things are happening opposite means before clicking on that button that content is showing in the existing page without clicking that button and after clicking the button same content is showing as it is like the first component for more insights check my stackoverflow question

answer re: React-Router open Link in new tab content is opening in same existing tab

Dec 25 '20

0

i deleted app.js file and reference related to that and then did following

thank you brother saurabh for guiding me 🎉❤

Open Full Answer

and after that, I did search for an hour and then messaged one of my best friend/brother @saurabhdaware and he guided/help me with this issue and then Ii deleted app.js file and reference related to that and then did following enter image description here did one thing

and then in index.js and removed globe and I added this code their <Route exact path="/" component={Globe}/>



and then it worked with the correct path error-free correctly thank you Saurabh bhaiya(brother such a good human )

Insights of second component Second Page of the webapp

Additional Resources/Info

• NASA API for images/content.
• reactjs for building an app.

I am building This project from scratch so much fun learning new things and that is helping a lot for evolving as a developer
thank you for reading the article have a good day and happy new year merry christmas 😁🕺☄🌠🎉❤