D2 The first component of SpaceTravel🌌🌠 is ready and fixed one headache issue
Tags: dohackathon, react, webdev, showdev
Published: 2020-12-25 16:21:52

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**
```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**
```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**
```js
import React from "react";
function Space() {
  return (
    <div className="Space">
      <h1>hello world</h1>
    </div>
  );
}

export default Space;

```

**Globe.module.css**
```js
.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🔽☄🌠**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d21r0h39xal6g3gvtut9.png)
* 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 
{% stackoverflow 65449405 %}
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**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1sj6lc412hu1bjn4wg8j.png)
### 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 😁🕺☄🌠🎉❤
![Gif](https://media.giphy.com/media/CAxbo8KC2A0y4/giphy.gif)