CODEWITHSUNDEEP
reactjs
Alexander Solonik
Alexander Solonik

Reputation: 10250

Hello world example not working in react.js

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.

Upvotes: 3

Views: 1988

Answers (4)

Chetan Bhagat
Chetan Bhagat

Reputation: 572

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.

Upvotes: 0

Adil
Adil

Reputation: 629

you are not importing React-DOM, jsut add

import ReactDOM from 'react-dom';

Upvotes: 1

robertklep
robertklep

Reputation: 203519

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.

Upvotes: 4

cn0047
cn0047

Reputation: 17091

You have to add this:

import ReactDOM from 'react-dom';

and delete export default App;

Upvotes: 1

Related Questions