How to fix the white screen in browser during react build?

Question

I am pretty new to React and I am trying to understand why I have a blank browser

my App.js is: `

import React from 'react';
import TodoList from './TodoList'

function App() {
  return (
    <TodoList />
  )
}

my Index.js is: ReactDOM.render(<App />, document.getElementById('root'));

My Todolist (Project name) `

import React from 'react'

export default function TodoList() {
  return (
    <div> 
        Hello World!
    </div>
  )
}

On my other project I have Index.css as `

html, body {
    margin: 0;
    padding: 0;
}

Index.html as `

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script src="index.js" type="text/babel"></script>
    </body>
</html>

and index.js as ReactDOM.render(<h1>Hello, everyone,</h1>. document.getElementById("root"))

all of these show a blank screen when ran. blank screen

I have tried to do some research, added "homepage": ".", to Package.json file and even tried to downgrade react script from 5.0 to 4.0 nothing worked.

Answer 1

export default App; Add this at the end of app.js file

ohter than that i am not seeing any problem

How to fix the white screen in browser during react build?

Question

1 answers

solution1
0 2022-12-25 16:24:42

How to fix the white screen in browser during react build?

Question

1 answers

solution1 0 2022-12-25 16:24:42

solution1
0 2022-12-25 16:24:42