How it works?

Question

React

I came across a lesson on the Internet: https://maxfarseer.gitbooks.io/react-course-ru/con...
And there at the end there is a code where three instances are created, but only one (App) is rendered, and output to the browser three consecutive instances, how so?
I tried to reproduce such a construction on the new standard, here is the code:

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')
  )

However, only the component that is passed to the renderer is rendered on the page. What's the matter, tell me? Maybe it's the outdated syntax, or I didn't update it correctly.

Answer 1

Yes, as already suggested above, in the textbook it was: inside <App />lies <News />and <Comments />.
So you need to draw Sections, Biography and Forum inside Main. The error is that you didn't write components inside Main (capitalized and inside < >)

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

ps until the tutorial is updated, you can keep up to date with: vk / youtube / telegram (links in profile)

Answer 2

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