JavaScript Webpage displays Blank when 'npm start' ran in terminal

[DavidFrear]

I have started building a react webpage and when I run npm start in the terminal the localhost:3000 page loads with no errors etc but its just blank.



I tried adding some text in white to see if but I cant!



I am new and just need pointing in the right direction if someone can.

 

[Malcolm]

Hi there,

Can you post your code?

 

[DavidFrear]

hi @Malcolm

whats the easiest way to do this without posting it as a Repo on github? 🙂

 

[Malcolm]

hi @Malcolm

whats the easiest way to do this without posting it as a Repo on github? 🙂

You could do this, but you can also press the </> and paste your code. You can find more info by clicking here 🙂

 

[DavidFrear]

I will attach below all the pages I have written so far 🙂

 

[DavidFrear]

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1, p, a {
  color: #fff;
}

body {
  margin: 0;
  font-family: 'Outfit', 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', '',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background: #000;
}
ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.btn {
  padding: 12px 32px;
  font-size: 1.2rem;
  text-transform: uppercase;
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  cursor: pointer;
}

.btn-light {
  background: rgba(255,255,255, .2);
}

.btn:hover {
  background: rgba(255,255,255, .2);
}

import React from 'react'
import {Routes, Route} from 'react-router-dom'

import Home from './routes/Home'

function App() {
  return (
    <>
      <Routes>
        <Route path='/' element={<Home />} />
      </Routes>
    </>
  );
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

import React from 'react'
import Navbar from '../components/Navbar'

const Home = () => {
  return (
    <div>
        <Navbar />
    </div>
  )
}

export default Home

import React from 'react'
import {Link} from 'react-router-dom'
import {FaBars, FaTimes} from 'react-icons/fa'
import './NavbarStyles.css'

const Navbar = () => {
    return (
        <div className='header'>
            <Link to='/'><h1>GLX TRVL</h1></Link>
            <ul className='nav-menu'>
                <li>
                    <Link to='/'>Home</Link>
                </li>
                <li>
                    <Link to='/pricing'>Pricing</Link>
                </li>
                <li>
                    <Link to='/training'>Training</Link>
                </li>
                <li>
                    <Link to='/contact'>Contact</Link>
                </li>
            </ul>
            <div className='hamburger'>
                <FaBars size={20} style={{color: '#fff'}}/>
            </div>
        </div>
    )
}

export default Navbar


.header {
    position: fixed;
    width: 100%;
    height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    z-index: 10;
}

.nav-menu {
    display: flex;   
}

.nav-menu li {
    padding: 0 1rem;
}

.nav-menu a {
    font-size: 1.2rem;
    font-weight: 500;
}