Alexander Solonik Alexander Solonik - 2 years ago 179
React JSX Question

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.


Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download