Why did React stop working?

M

Mixa2019-11-08 16:24:09

React

Mixa, 2019-11-08 16:24:09

I'm learning React by tutorial. Now in the tutorial I came to this example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React [RU] Tutorial v2</title>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script
>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<style>
.red {
color: red;
}

.none {
display: none;
}
</style>
</head>
<body>
<div id="root"></div>
  
<script type="text/babel">

const myNews = [
{
author: 'Саша Печкин',
text: 'В четверг, четвертого числа...'
},
{
author: 'Просто Вася',
text: 'Считаю, что $ должен стоить 35 рублей!'
},
{
author: 'Max Frontend',
text: 'Прошло 2 года с прошлых учебников, а $ так и не стоит 35'
},
{
author: 'Гость',
text: 'Бесплатно. Без смс, про реакт, заходи - https://maxpfrontend.ru'
}
];
class News extends React.Component {
render() {
const newsTemplate = this.props.data.map(function(item, index) {
return (
<div key={index}>
<p className="news__author">{item.author}:</p>
<p className="news__text">{item.text}</p>
</div>
)
})
console.log(newsTemplate)
return (
<div className="news">
{newsTemplate}
</div>
)
}
}

</script>
</body>
</html>

And it seems like the result should be displayed, but by zeros. Moreover, there are no errors in the console at all? What is wrong here and how to properly debug React code?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

0

0xD34F, 2019-11-08
@Mixa

Forgot:

ReactDOM.render(
  <News data={myNews} />,
  document.querySelector('#root')
);