Question 283266 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why am I getting a Blank Page but React is compiling successfully?

I don’t understand why I get a blank page when I run npm start. I am trying to have the and

tags to render.

Here is the code:

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Card from './Card';
import reportWebVitals from './reportWebVitals';
import 'tachyons';

ReactDOM.render(
  <React.StrictMode>
    <Card />
  </React.StrictMode>
  ,

  document.getElementById('root'));

Card.js

import React from 'react';

const Card = (_props) => {
    return  (
        <div>
            <img alt='robots' src='' />
            <div>
                <h2>Jane Doe</h2>
                <p>[email protected]</p>
            </div>
        </div>
    );
}

export default Card;

I have followed several pieces of advice from fellow students in my class who were experiencing similar issues however none of them seems quite to apply to my code, as I haven’t found similar typos or other documentation or syntax issues.

Tags:

2

Answers


  1. 0

    import ReactDOM from ‘react-dom’; use this!

    Login or Signup to reply.
  2. 0

    I believe you are using an newer version of react and the notation has changed a bit.

    newer versions of create use the createRoot Method.

    Here is the completed example

    import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Card from './card';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Card />
  </React.StrictMode>
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search