Yeah I wasn’t running in the browser.
I’ve solved this, now my npm start quit working.
It was working, but then I updated all my node stuff and it’s throwing errors.
GitHub issues for the create-react-app page is full of the same complaints.
Running a Python server for now.
A week is a long time to wait for a response though tbh.
I had that solved pretty quickly once I slowed down and listened carefully to the lesson instead of clicking “run”.
Great theme especially a few hours before going to bed, warm lights don’t block melatonine production in your body.
Thanks Zsolt, Now I learn something new about melatonine 
I usually choose dark mode in almost all of my app that I use. 
and this theme in my vsc looks very pleasing to my eyes, for me its more relaxing to see. haha
Hello, I’m really excited for this react course and hopefully once I finish it I can start building some good looking projects on github. For the first exercise the solution is basically just copy and pasting, just make sure you copy the example inside a script tag in your code then change the div tag id to matchup with the id in the examples document.getElementByID() line.
Type even when you could copy-paste initially, unless you have dev experience elsewhere. Typing forces you to thing things through, and correcting your own typos help you gain experience.
Could you please look over my code for me? I thought I performed the exercise correctly the first time. Then I watched the Hint video and tried to correct what I had done wrong. The file in Chrome says, “Hello, world.” It does not insert my name in place of “world.”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<h1 id="root"></h1>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}
ReactDOM.render(
<HelloMessage name="Joanna" />,
document.getElementById('hello-example')
);
</script>
<!--
Note: this page is a great way to try React but it's not suitable for production.
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
Read this section for a production-ready setup with JSX:
https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project
In a larger project, you can use an integrated toolchain that includes JSX instead:
https://reactjs.org/docs/create-a-new-react-app.html
You can also use React without JSX, in which case you can remove Babel:
https://reactjs.org/docs/react-without-jsx.html
-->
</body>
</html>
Thank you!
There are multiple problems.
First, you can only have one element in your HTML with the same ID attribute value (root).
Second, you have two separate ReactDOM.render calls in your source code.
Third, your second ReactDOM.render refers to the dom element with id hello-example. However, this ID cannot be found in the document.
Please restart the whole section and do the steps after me in the video, step by step, such that you type every single character in your code editor. Once it works, redo the exercise after a day or two on your own. This way you can lock in the transformation.
Do this with all the rest of the exercises, because the nature of the question indicates that you are up for a rough ride in the upcoming lessons, so a lot of practice is needed to develop the skill of autonomous problem solving (hint: employers are looking for this skill).
Okay. Thank you for your assistance. I will pay extra attention to this. If I don’t learn my mistakes now, I will definitely be lost later in the course.
Actually, the two ReactDOM.renders would work if their IDs were all represented in the code.
I’ll rather deliver you the hard message now, because as a hiring manager, the biggest fear of IT managers is to hire someone who needs too much assistance in finding out easy problems. For most people, myself included when I started learning, attention to details had to be developed big time.
As a role model, Michael Schumacher in his prime could exactly name statistics he collected from his onboard computer corner by corner for multiple laps. Most racing fans can’t even make a connection between hearing the phrase “Turn 15” and the actual turn in real life.
Good to know.
Whenever I learn something that is very new to me, I often don’t do well at first. It’s going to take a great deal of time and practice. Plus, I’m a college freshman, so I have other responsibilities to attend to.
Thanks, Zsolt!
I revisited the exercise hint video and finally got my code to function properly. I did, but when I watched the Solution video, I realized that I had changed the “root” ID to “hello-example” to match the ID in the ReactDom render. The code still worked fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="hello-example"></div>
<script type="text/babel">
/*ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);*/
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}
ReactDOM.render(
<HelloMessage name="Joanna" />,
document.getElementById('hello-example')
);
</script>
<!--
Note: this page is a great way to try React but it's not suitable for production.
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
Read this section for a production-ready setup with JSX:
https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project
In a larger project, you can use an integrated toolchain that includes JSX instead:
https://reactjs.org/docs/create-a-new-react-app.html
You can also use React without JSX, in which case you can remove Babel:
https://reactjs.org/docs/react-without-jsx.html
-->
</body>
</html>
As you suggested, I might practice the exercise with various words and phrases just to make sure I better understand it now.
It’s often the smallest but most important details that are often overlooked.
Thank you!
Glad you’re making progress.
Did the exact same thing as here, copy/pasted code between the script tags and instead of linking HelloMessage to the ‘root’ id, I created another div with id = HelloMessage, so that both will show on the browser.
Hello,
I don’t understand why I get this error with the lesson about classes Coin:
VM246:11 Uncaught TypeError: Super expression must either be null or a function
at _inherits (<anonymous>:11:113)
at <anonymous>:26:3
at <anonymous>:50:2
at VK (babel.min.js:1)
at a (babel.min.js:1)
at KK (babel.min.js:1)
at babel.min.js:1
at nq (babel.min.js:1)
at rq (babel.min.js:1)
this is the code I made following the lesson:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Ticker</th>
<th>Price</th>
</tr>
</thead>
<tbody id="root"></tbody>
</table>
<script type="text/babel">
class Coin extends React.component{
/*
constructor(props){
super(props)
}
*/
render(){
return(
<tr>
<td>{this.props.name}</td>
<td>{this.props.ticker}</td>
<td>{this.props.price}</td>
</tr>
);
}
}
ReactDOM.render(
<React.Fragment>
<Coin name="bitcoin" ticker="btc" price="1000000"/>
<Coin name="ethereum" ticker="eth" price="100000"/>
</React.Fragment>,
document.getElementById('root')
);
</script>
<!--
Note: this page is a great way to try React but it's not suitable for production.
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
Read this section for a production-ready setup with JSX:
https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project
In a larger project, you can use an integrated toolchain that includes JSX instead:
https://reactjs.org/docs/create-a-new-react-app.html
You can also use React without JSX, in which case you can remove Babel:
https://reactjs.org/docs/react-without-jsx.html
-->
</body>
</html>
thanks
Hi @enrico,
You are supposed to use the capital letter version of the word - “React.Component” and not “React.component”
Hope this helps. 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
<!--
Note: this page is a great way to try React but it's not suitable for production.
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
Read this section for a production-ready setup with JSX:
https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project
In a larger project, you can use an integrated toolchain that includes JSX instead:
https://reactjs.org/docs/create-a-new-react-app.html
You can also use React without JSX, in which case you can remove Babel:
https://reactjs.org/docs/react-without-jsx.html
-->
</body>
</html>
<body>
<div id="root"></div>
<script type="text/babel">
class HelloMessage extends React.Component {
render() {
return (
<h1>
Hello, {this.props.name}!
</h1>
);
}
}
ReactDOM.render(
<HelloMessage name="You" />,
document.getElementById('root')
);
</script>
</body>
Finally
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="timer-example"></div>
<script type="text/babel">
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { seconds: 0 };
}
tick() {
this.setState(state => ({
seconds: state.seconds + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div>
Seconds: {this.state.seconds}
</div>
);
}
}
ReactDOM.render(
<Timer />,
document.getElementById('timer-example')
);
</script>
</body>
</html>