Hello world example not working in react.js

user_4381665 0
Viewed 1869

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.
reactjs
4 Answers

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.

user_8937800

You have to add this:

import ReactDOM from 'react-dom';

and delete export default App;

user_36123530

you are not importing React-DOM, jsut add

import ReactDOM from 'react-dom';

user_72384660

I have describe this example to understand

For Example: App.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';  // Step 1: import ReactDOM 
import logo from './logo.svg';
import './App.css';

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

// export default App;// Step 2 :- This line is comment

I hope 'Hello world' example is working in React.js.

user_58912260
Related