Question 181813 in Html Question posted in
Some basic documentation can be found here.

Html – getting a blank page instead of Hello World in react?

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React App</title>
  </head>
  <body>
    <script src="../src/index.js" type="text/JSX"></script>
    <div id="root"></div>
  </body>
</html>

import React from 'react';
import ReactDOM from 'react-dom/client';


ReactDOM.render(<h1>Hello World!</h1>,document.getElementById('root'));

When exececuting this code ,Instead of ‘Hello World!’, all i am getting is a blank Page.Some one please explain why?

Got a blank page instead of "hello world!"

Tags:

2

Answers


  1. 0

    It doesn’t appear that you’re using React properly. JSX need to be transpiled into Javascript for the browser to understand it. You’ll need Babel for that. Also, React needs to be in scope to be able to import it.

    If you just want to try React in a simple way locally (not for production), you can use this template:

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>

    <!-- React+ReactDOM v18: -->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Babel: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <!-- root element first: -->
    <div id="root"></div>
    <!-- now you can add your script tag... note the type: -->
    <script type="text/babel">
    
      function App() {
        return <h1>Hello, world!</h1>;
      }

      /* This is how to bootstrap in React version 18+ */
      const container = document.getElementById('root');
      const root = ReactDOM.createRoot(container);
      root.render(<App />);

    </script>
  </body>
</html>

    Otherwise, follow the installation instructions in the official documentation, or use create-react-app to properly bootstrap your application.

    Login or Signup to reply.
  2. 0

    The issue is with the way you are importing ReactDOM. The render() function is not available inside the react-dom/client. Changing it to import from react-dom would do the trick

    So the file would look like this :

    import React from 'react';
import ReactDOM from 'react-dom';


ReactDOM.render(<h1>Hello World!</h1>,document.getElementById('root'));
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search