this.props
, и передаются компоненту как атрибуты.this.props.ИМЯ_СВОЙСТВА
(в statefull-компонентах) или в первом аргументе функции (в stateless).{name: Garry, surname: Potter}
[1,2,3,4,5]
{/* текст комментария */}
<News />
. Необязательно было называть свойство так, можно было написать, например:<div>
. Мы могли бы обернуть ее в любой другой элемент, главное, напоминаю - внутри return всегда должен возвращаться DOM-узел (то есть, что угодно, обернутое в родительский тэг или в React.Fragment).<div key={index}>
). Если объяснить предельно просто: реакту нужна уникальность, чтобы все его механизмы работали корректно. По "ключу" он будет понимать с каким именно дочерним узлом вы работаете и какому родителю он принадлежит. Индекс - не идеальный вариант для ключа, мы это исправим далее.<p className="news__author">{item.author}:</p>
которое могло бы быть представлено в нативном js-коде как <p className="news__author">''+item.author+':'</p>
(пустая строка + значение переменной + двоеточие)newsTemplate
, и в render функции компонента <News />
вернуть разметку + "переменную-шаблон".console.log(newsTemplate)
(откройте вкладку Console).P.S. Здесь и в продолжении всего курса в коде для отображения массива новостей используетсяkey = {index}
. Обратите внимание на следующую ветку комментариев (спасибо DeLaVega и geakstr).