Изучаю React по самоучителю. Сейчас в самоучителе дошел до вот такого примера:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React [RU] Tutorial v2</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script
>
<script src="https://unpkg.com/babel-standalone@6.15.0/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>
И вроде как должен выводиться результат, но по нулям. Мало того, в консоли вообще никаких ошибок? Что тут не так и как правильно дебажить React-код?
Простой