Hello world example not working in react.js

Question

I have installed React.js using the following command:

create-react-app my-app

now i open my command line and i execute the following command:

npm start

The App opens in my browser at the following URL:

http://localhost:3000/

Now i go to the public/src/app.js folder and change the code from the following:

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';



class App extends Component {

  render() {

    return (

      <div className="App">

        <header className="App-header">

          <img src={logo} className="App-logo" alt="logo" />

          <h1 className="App-title">Welcome to React</h1>

        </header>

        <p className="App-intro">

          Why did you do ?? 

        </p>

      </div>

    );

  }

}



export default App;

To the following:

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';



ReactDOM.render(

  <h1>Hello, world!</h1>,

  document.getElementById('root')

);



export default App;

But i get the following error. Why ?

Failed to compile

./src/App.js

  Line 5:   'ReactDOM' is not defined  no-undef

  Line 10:  'App' is not defined       no-undef



Search for the keywords to learn more about each error.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

The errors are pretty self-explanatory:

Line 5: 'ReactDOM' is not defined no-undef

You are using ReactDOM.render, but you're not importing it, so it's not defined.

Also, you probably don't want to use it at all, because it's already being called in another file (src/index.js).

Line 10: 'App' is not defined no-undef

The original code declared a class App and exported it. You removed the class declaration, but you kept the export, which references the now non-existent class App.

Hello world example not working in react.js

Sign up