I'm currently trying to learn react js using a tutorial I found. So as I'm following along, the webpage doesn't seem to appear the same for me. Even though I followed every single step of his.

It just shows an empty white page.

Here's my code:

import React, { Component } from 'react';
import Grid from '@mui/material/Grid';

class LoginPage extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return ( 
            <Grid container>
                <Grid item xs={3}>
                    ffdiaj
                </Grid>
                <Grid item xs={6}>
                    fdslkafj
                </Grid>
                <Grid item xs={3}>
                    fdsaife
                </Grid>
            </Grid>
         );
    }
}
 
export default LoginPage;

import './App.css';
import LoginPage from './Components/LoginPage/LoginPage';


function App() {
  return (
    <div className="App">
      <LoginPage />
    </div>
  );
}

export default App;

My terminal doesn't show any error:

Compiled successfully!

You can now view myinstagram in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.13:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

assets by path static/js/*.js 2 MiB
  asset static/js/bundle.js 1.99 MiB [emitted] (name: main) 1 related asset
  asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.89 KiB [emitted] 1 related asset
asset index.html 1.67 KiB [emitted]
asset asset-manifest.json 458 bytes [emitted]
cached modules 3.05 MiB [cached] 405 modules
runtime modules 31.4 KiB 16 modules
./src/Components/LoginPage/LoginPage.js 2.17 KiB [built]
webpack 5.65.0 compiled successfully in 5011 ms

When I open my Firefox console, this is what shows up as error.