<h1>Hello, world!</h1>
- как ни странно, это примитивный компонент.<App />
разметку. Да, в этом примере это одна строка и чувство эйфории отсутствует, но то ли еще будет! Пока запомним, что если мы хотим отрисовать в JSX компонент, то мы обязательно должны называть и вызывать его с Большой буквы.class
. Убьем сразу нескольких зайцев:className
, а не через class
, как мы привыкли делать это. Почему? Потому что, мы находимся внутри JSX-синтаксиса, в котором html и js идут вперемешку, а слово class зарезервировано в javascript.div
.React.Fragment
<News />
и вложить его в BigApp.<BigApp />
содержит в себе компонент <News />
, словно это просто дочерний <div></div>
элемент.<News />
такой же примитивный, как и App, поэтому мы создали его через функцию (а не через class).<BigApp/>
, оставьте <App />
(не переписывая его на statefull-компонент). В <App />
отображайте <News />
. Так же создайте компонент <Comments />
и сделайте, чтобы он отображался после новостей. Текст компонента: "Нет новостей - комментировать нечего."