Как это работает?

Question

[Артур]

Вот наткнулся на урок в интернете : https://maxfarseer.gitbooks.io/react-course-ru/con...

И там в конце есть код где созданы три экземпляра, но рендерится только один(App),а выводится в браузер три последовательно экземпляра,как так?
Я попытался воспроизвести такую конструкцию на новом стандарте, вот код:

import React from 'react'
import {render} from 'react-dom'
import './index.css'

class Main extends React.Component {
    render() {
        return <div className = "Main">
         <h1>Main</h1>
                </div>
            }                
    }          
class Forum extends React.Component {
    render () {
        return <div className = "Forum">
        <h1>Forum</h1>
               </div>
            }
    }            
class Biography extends React.Component {
   render () {
       return <div className = "Biography">
       <h1>Biography</h1>
              </div>
            }
    };         
class Sections extends React.Component {
    render () {
        return <div className = "Sections">
        <h1>Sections</h1>
               </div>
    }
}         
              
  render(
      <Main/>,
      document.getElementById('root')
  )

Однако у меня на странице рендерится только тот компонет который передается в рендер.В чем дело подскажите?Может дело в устаревшем синтаксисе,или я не верно осовременил его.

Answer 1

[Максим]

Да, как уже подсказали выше, в учебнике было: внутри <App /> лежит <News /> и <Comments />.

Значит у вас, нужно внутри Main отрисовать Sections, Biography и Forum. Ошибка в том, что вы не написали компоненты внутри Main (с большой буквы и внутри < >)

class Main extends React.Component {
  render() {
      return (
        <div className = "Main">
          <h1>Main</h1>
          <Forum />
          <Biography />
          <Sections />
        </div>
      )
  }            
}

p.s. пока учебнике не обновлены, можете быть в курсе с помощью: vk / youtube / telegram (ссылки в профиле)

Answer 2

[Александр]

...
class Main extends React.Component {
    render() {
        return <div className = "Main">
         <h1>Main</h1>
                </div>
<Forum />
<Biography />
<Sections />
            }                
    } 
...